Bootstrap 5 Tutorial



 

Bootstrap 5 Tutorial

Bootstrap 5 is the latest version of the Bootstrap framework, bringing new features, cleaner syntax, and enhanced responsiveness for building modern, mobile-first websites. Bootstrap 5 removes jQuery dependencies, offers a refined grid system, and introduces new components, making it a versatile choice for web development.


Key Features of Bootstrap 5

  • No jQuery Dependency: Simplifies the framework by using vanilla JavaScript.
  • Updated Grid System: With better spacing options and more flexibility.
  • New Components: Off-canvas menu, accordion updates, form controls, and more.
  • Enhanced Utility Classes: Includes responsive font sizes, colors, and spacing.
  • Improved Customization: With CSS variables for easy theme adjustments.

Getting Started with Bootstrap 5

Bootstrap 5 can be included in your project via a CDN or by downloading the CSS and JavaScript files.

1. Bootstrap 5 CDN Links

To get started quickly, include these links in the <head> section of your HTML document:

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

Example: Basic Bootstrap 5 Template

Here’s a basic template using Bootstrap 5 to get you started:

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

    <!-- Navigation Bar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">My Bootstrap 5 Site</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <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="#">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="container mt-5">
        <h1>Welcome to My Bootstrap 5 Website</h1>
        <p>Bootstrap 5 provides powerful tools to create responsive, clean, and modern websites quickly.</p>
        <div class="row">
            <div class="col-md-6">
                <h2>About Us</h2>
                <p>Learn about our mission and values.</p>
            </div>
            <div class="col-md-6">
                <h2>Our Services</h2>
                <p>Discover the services we offer to our clients.</p>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
  • Explanation:
    • Responsive Navbar: Built with .navbar, .navbar-expand-lg, and .navbar-light for a modern navigation.
    • Grid System: The .container, .row, and .col-md-6 classes enable a responsive grid layout.