Complete Bootstrap Tutorial

Master Bootstrap - the most popular CSS framework for building responsive, mobile-first websites

Introduction to Bootstrap

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS and JavaScript design templates for typography, forms, buttons, navigation, and other interface components.

Simple Bootstrap Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1 class="text-primary">Hello, Bootstrap!</h1>
        <button class="btn btn-success">Click Me</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Why Use Bootstrap?

Responsive Grid System - Easily create responsive layouts
Pre-styled Components - Ready-to-use UI components
Cross-browser Compatibility - Works on all modern browsers
Mobile-first Approach - Designed for mobile devices first
Customizable - Easily customize with Sass variables
Large Community - Extensive documentation and support

Getting Started

Include Bootstrap in your project via CDN or download the files:

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

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap Grid System

Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive.

Basic Grid Example

<div class="container">
    <div class="row">
        <div class="col">Column 1</div>
        <div class="col">Column 2</div>
        <div class="col">Column 3</div>
    </div>
</div>

Responsive Grid

Bootstrap's grid includes six tiers of predefined classes for building complex responsive layouts.

.col-12 .col-sm-6 .col-md-4 .col-lg-3 .col-xl-2

Grid Options

Breakpoint	Class Prefix	Dimensions
Extra small	`.col-`	<576px
Small	`.col-sm-`	≥576px
Medium	`.col-md-`	≥768px
Large	`.col-lg-`	≥992px
Extra large	`.col-xl-`	≥1200px
Extra extra large	`.col-xxl-`	≥1400px

Bootstrap Components

Bootstrap comes with nearly two dozen components that are ready to use right out of the box.

Common Components

Alerts

Primary alert

Success alert

<div class="alert alert-primary" role="alert">Primary alert</div>
<div class="alert alert-success" role="alert">Success alert</div>

Badges

Primary Secondary Success

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>

Breadcrumb

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>

Bootstrap Utilities

Bootstrap includes dozens of utilities—classes with a single purpose to reduce the frequency of highly repetitive declarations.

Common Utilities

Utility	Example	Description
Spacing	`.mt-3`, `.px-4`	Margin and padding utilities
Text	`.text-center`, `.fw-bold`	Text alignment and styling
Colors	`.bg-primary`, `.text-danger`	Background and text colors
Display	`.d-none`, `.d-md-block`	Display property utilities
Flex	`.d-flex`, `.justify-content-between`	Flexbox utilities
Position	`.position-relative`, `.fixed-top`	Positioning utilities

Spacing Utilities Example

<!-- Margin top 3 -->
<div class="mt-3">Content</div>

<!-- Padding x-axis 4 -->
<div class="px-4">Content</div>

<!-- Margin bottom 5 -->
<div class="mb-5">Content</div>

Bootstrap Typography

Bootstrap sets basic global display, typography, and link styles.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

This is a lead paragraph. It stands out from regular paragraphs.

Regular paragraph with highlighted text and small text.

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<p class="lead">This is a lead paragraph.</p>
<p>Regular paragraph with <mark>highlighted</mark> text.</p>

Text Utilities

Start aligned text

Center aligned text

End aligned text

Uppercase text

Lowercase text

capitalized text

Bold text

Italic text

<p class="text-center">Center aligned text</p>
<p class="text-uppercase">Uppercase text</p>
<p class="fw-bold">Bold text</p>

Bootstrap Forms

Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.

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

Form Controls

<input type="text" class="form-control" placeholder="Text input">
<textarea class="form-control" placeholder="Textarea"></textarea>
<select class="form-select">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
</select>

Bootstrap Buttons

Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>

Button Sizes

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>

Button States

Disabled link

<button type="button" class="btn btn-primary active">Active</button>
<button type="button" class="btn btn-primary" disabled>Disabled</button>

Bootstrap Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title.

Go somewhere

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

<div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some text.</p>
    </div>
</div>

Bootstrap Navbar

Bootstrap's powerful, responsive navigation header. Includes support for branding, navigation, and more.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Home</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Bootstrap Modals

Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                Modal body text
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Bootstrap Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="..." class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>

Bootstrap Icons

Bootstrap Icons is an open source SVG icon library featuring over 1,800 glyphs, with more added every release.

<i class="bi bi-alarm"></i>
<i class="bi bi-arrow-right-circle-fill"></i>
<i class="bi bi-bell"></i>

<!-- Include Bootstrap Icons CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

Customizing Bootstrap

Bootstrap can be customized to fit your design needs. Here are the main approaches:

1. Using CSS Overrides

/* Override primary color */
.btn-primary {
    background-color: #ff5722;
    border-color: #ff5722;
}

/* Custom navbar */
.navbar-custom {
    background-color: #6200ea;
}

2. Using Sass Variables

Create a custom.scss file to modify Bootstrap's source Sass variables:

// Custom.scss
// Option A: Include all of Bootstrap

// Override default variables
$primary: #00ff88;
$enable-shadows: true;

// Include all Bootstrap
@import  "../node_modules/bootstrap/scss/bootstrap";

3. Theming with CSS Variables

Bootstrap 5 includes many CSS variables that can be overridden:

:root {
    --bs-primary: #00ff88;
    --bs-body-font-family: 'Inter', sans-serif;
}

Bootstrap Best Practices

Mobile First - Design for mobile devices first, then scale up
Use Utilities - Leverage Bootstrap's utility classes before writing custom CSS
Customize with Sass - Use Sass variables for consistent theming
Proper Document Structure - Include meta viewport tag and proper HTML5 structure
Optimize JavaScript - Only include the JavaScript components you need
Accessibility - Use proper ARIA attributes and semantic HTML
Keep It Simple - Don't overcomplicate your markup
Stay Updated - Use the latest version of Bootstrap
Custom Builds - Consider creating custom builds to reduce file size
Complement with Custom CSS - Use Bootstrap for layout and components, add your own styles for unique elements