Bootstrap 5 Tutorial

Bootstrap 5 is a popular front-end framework that helps in creating responsive and mobile-first websites quickly. This tutorial will guide you through setting up and using Bootstrap 5 with examples.

1. Setting Up Bootstrap 5

Option 1: Using CDN (Recommended)

This is the easiest way to include Bootstrap in your project. Just add the following links in the <head> section of your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Tutorial</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <h1 class="text-center text-primary mt-5">Hello, Bootstrap 5!</h1>

    <!-- Bootstrap JS (Optional for components like modals, dropdowns, etc.) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Option 2: Downloading Bootstrap

Download Bootstrap from getbootstrap.com.
Extract the downloaded files and link the bootstrap.min.css and bootstrap.bundle.min.js in your project.

2. Bootstrap 5 Layout Basics

Containers

Bootstrap uses containers to align content properly. There are three types of containers:

<div class="container">Fixed-width container</div>
<div class="container-fluid">Full-width container</div>
<div class="container-md">Responsive container</div>

Grid System

Bootstrap’s grid system is based on 12 columns. You can create responsive layouts easily.

<div class="container">
    <div class="row">
        <div class="col-md-6 bg-primary text-white p-3">Column 1 (6/12)</div>
        <div class="col-md-6 bg-secondary text-white p-3">Column 2 (6/12)</div>
    </div>
</div>

.col-md-6 means 6 columns (out of 12) on medium (md) screens and larger.

3. Bootstrap 5 Components

Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">My Site</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" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

Buttons

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-danger">Danger Button</button>

Cards

<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">This is a Bootstrap 5 card.</p>
    <a href="#" class="btn btn-primary">Read More</a>
  </div>
</div>

Forms

<form>
  <div class="mb-3">
    <label class="form-label">Email address</label>
    <input type="email" class="form-control">
  </div>
  <div class="mb-3">
    <label class="form-label">Password</label>
    <input type="password" class="form-control">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

4. Bootstrap 5 Utilities

Bootstrap 5 provides many helper classes for quick styling.

Text and Background Colors

<p class="text-primary">Primary text</p>
<p class="text-danger">Danger text</p>
<p class="bg-warning text-dark p-2">Warning background</p>

Spacing (Margin & Padding)

<div class="p-3 m-2 border">Padding & Margin Example</div>

.p-3 → Padding size 3
.m-2 → Margin size 2

5. Bootstrap 5 Responsive Design

Bootstrap automatically adapts to different screen sizes, but you can also control visibility manually.

Hiding Elements on Specific Screen Sizes

<div class="d-none d-md-block">Visible only on medium (md) screens and larger</div>

Conclusion

Bootstrap 5 makes it easy to build modern, responsive websites quickly. With its grid system, ready-to-use components, and utility classes, you can create professional designs without writing much CSS.

Would you like help with a specific Bootstrap 5 feature?

About It E Research

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

Bootstrap 5 Tutorial