Bootstrap 5 Tutorial for Beginners

Introduction

Bootstrap 5 is the latest version of the world’s most popular front-end toolkit. It makes building beautiful, responsive websites easy even for beginners. In this tutorial, you’ll learn how to set up Bootstrap 5, understand its key components, and create your first responsive layout.

Why Use Bootstrap 5?

• Mobile-first: Designed for responsive, mobile-first design.
• Pre-built Components: Includes navbars, cards, modals, and more.
• Utility Classes: Helps to style elements quickly with ready-made CSS classes.
• Customizable: Easy to override or extend with your own styles.

Step 1: Setting Up Bootstrap 5

Option 1: CDN

The quickest way is to add the Bootstrap CDN to your HTML file:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Option 2: Using npm

For modern projects, install via npm:

npm install bootstrap

Then, import Bootstrap CSS in your src/index.js or main entry point:

import 'bootstrap/dist/css/bootstrap.min.css';

Step 2: Understanding the Bootstrap 5 Grid

Bootstrap uses a 12-column grid system that makes creating responsive layouts a breeze. Example:

<div class="container">
  <div class="row">
    <div class="col-6 col-md-4">Column 1</div>
    <div class="col-6 col-md-4">Column 2</div>
    <div class="col-12 col-md-4">Column 3</div>
  </div>
</div>

Step 3: Using Bootstrap Components

Bootstrap 5 includes dozens of ready-made components. Here are some popular ones:

Button Example

<button class="btn btn-primary">Primary Button</button>

Navbar Example

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
    </ul>
  </div>
</nav>

Card Example

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Step 4: Customize Bootstrap

• Override styles using your own CSS file after the Bootstrap link.
• Take advantage of custom Sass variables for advanced themes.

Conclusion

Bootstrap 5 simplifies web design for beginners with responsive grids, flexible components, and easy customization. Start with the examples above and explore more features in Bootstrap’s official documentation. For more web development tutorials, stay tuned to fulldev.pl!