Bootstrap 5 Framework

Introduction to Bootstrap 5

12 min Lesson 1 of 40

Bootstrap is the world's most popular front-end framework for building responsive, mobile-first websites and web applications. In this lesson, we'll explore what Bootstrap is, why it's so widely used, and what makes Bootstrap 5 special.

What is Bootstrap?

Bootstrap is an open-source CSS framework that provides pre-built components, utilities, and a powerful grid system to help developers create professional-looking websites quickly. Originally developed by Twitter in 2010, Bootstrap has become an industry standard for rapid web development.

Key Point: Bootstrap eliminates the need to write complex CSS from scratch by providing ready-to-use components and responsive design patterns that work across all modern browsers and devices.

Why Use Bootstrap?

Bootstrap offers numerous advantages that make it the framework of choice for millions of developers:

Responsive Design: Built-in mobile-first grid system ensures your site looks great on all devices
Pre-built Components: Dozens of ready-to-use components like navbars, cards, modals, and forms
Consistency: Uniform design language across your entire project
Cross-browser Compatibility: Works seamlessly on all modern browsers
Extensive Documentation: Comprehensive guides and examples
Large Community: Millions of developers, abundant resources, and third-party themes
Customizable: Easy to customize colors, spacing, and components
Time-saving: Dramatically reduces development time

Bootstrap 5: What's New?

Bootstrap 5, released in May 2021, introduced significant improvements and breaking changes from Bootstrap 4:

Major Changes in Bootstrap 5:

✓ No jQuery Dependency (Vanilla JavaScript)
✓ Improved Grid System with new xxl breakpoint
✓ Updated Form Controls with better styling
✓ New Utility API for custom utilities
✓ Enhanced Documentation
✓ RTL (Right-to-Left) Support built-in
✓ Custom CSS Properties (CSS Variables)
✓ Improved Accessibility
✗ Dropped Internet Explorer Support
✗ Removed jQuery requirement

Performance Boost: By removing jQuery, Bootstrap 5 is lighter and faster. The entire Bootstrap 5 CSS is only about 27KB minified and gzipped!

Bootstrap 5 vs Bootstrap 4

Here are the key differences you should know:

Bootstrap 4 vs Bootstrap 5 Comparison:

jQuery:
Bootstrap 4: Required jQuery
Bootstrap 5: No jQuery (Pure JavaScript)

Grid Breakpoints:
Bootstrap 4: xs, sm, md, lg, xl
Bootstrap 5: xs, sm, md, lg, xl, xxl (added)

Form Controls:
Bootstrap 4: Custom form classes
Bootstrap 5: Native form controls with .form-control

Utilities:
Bootstrap 4: Limited utilities
Bootstrap 5: Extensive utility API

Icons:
Bootstrap 4: No official icons
Bootstrap 5: Bootstrap Icons library

IE Support:
Bootstrap 4: IE 10+
Bootstrap 5: No IE support

CDN vs Local Installation

There are two main ways to include Bootstrap in your project:

1. CDN (Content Delivery Network)

The fastest way to get started - just include links in your HTML:

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet">

<!-- Bootstrap 5 JS Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
</script>

CDN Advantages:

No download required
Fast loading from distributed servers
Cached by browsers (shared across sites)
Always up-to-date
Perfect for learning and prototypes

2. Local Installation

Download Bootstrap files to your project:

Via NPM:
npm install bootstrap@5.3.0

Via Download:
Download from getbootstrap.com and extract to your project

Project Structure:
project/
├── css/
│   └── bootstrap.min.css
├── js/
│   └── bootstrap.bundle.min.js
└── index.html

Local Installation Advantages:

Works offline
Full control over versions
Can customize source files
Better for production

Production Tip: For production websites, use local installation or a reliable CDN with Subresource Integrity (SRI) hashes to ensure file integrity and security.

Your First Bootstrap Page

Let's create a complete Bootstrap 5 page from scratch:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Bootstrap 5 Page</title>

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
          rel="stylesheet">
</head>
<body>

    <!-- Navigation Bar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#">My Website</a>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12">
                <h1 class="text-center text-primary">Welcome to Bootstrap 5!</h1>
                <p class="lead text-center">
                    Build responsive websites faster with the world's most popular framework.
                </p>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Responsive Grid</h5>
                        <p class="card-text">
                            Powerful mobile-first grid system.
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Components</h5>
                        <p class="card-text">
                            Pre-built UI components ready to use.
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Utilities</h5>
                        <p class="card-text">
                            Hundreds of utility classes.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-12 text-center">
                <button class="btn btn-primary btn-lg">Get Started</button>
                <button class="btn btn-outline-secondary btn-lg">Learn More</button>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
    </script>
</body>
</html>

Try It: Copy this code into a new HTML file and open it in your browser. You'll see a fully responsive page with a navigation bar, cards, and buttons - all without writing a single line of CSS!

Understanding the Basic Structure

Let's break down the essential parts of every Bootstrap page:

1. DOCTYPE and HTML tag:
<!DOCTYPE html>
<html lang="en">

2. Required Meta Tags:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. Bootstrap CSS (in <head>):
<link href="bootstrap.min.css" rel="stylesheet">

4. Bootstrap JS (before closing </body>):
<script src="bootstrap.bundle.min.js"></script>

Viewport Meta Tag: The viewport meta tag is crucial for responsive design. It ensures your page scales correctly on mobile devices. Never forget this tag!

What's Included in Bootstrap?

Bootstrap 5 provides a comprehensive toolkit:

Layout: Grid system, containers, columns, breakpoints
Content: Typography, images, tables, figures
Components: 30+ components (buttons, cards, navbars, modals, etc.)
Forms: Form controls, validation, layouts
Utilities: Spacing, colors, display, flex, text utilities
Icons: 1,800+ Bootstrap Icons (optional)

Practice Exercise:

Create a new HTML file called bootstrap-test.html
Copy the "First Bootstrap Page" example above
Open it in your browser and resize the window to see responsive behavior
Change the btn-primary to btn-success and see the color change
Add another card to the row by copying one of the existing card columns

Challenge: Try changing col-md-4 to col-md-6 on the cards and observe how the layout changes!

Summary

In this lesson, you've learned:

Bootstrap is a popular CSS framework for building responsive websites
Bootstrap 5 removed jQuery and added many improvements
You can use Bootstrap via CDN or local installation
The basic structure of a Bootstrap page includes CSS in the head and JS before closing body
Bootstrap provides a complete toolkit of layout, components, and utilities

In the next lesson, we'll dive deeper into Bootstrap setup and explore the file structure and proper HTML configuration.