Published on

Getting Started with Bootstrap 5: A Comprehensive Crash Course for Beginners

Authors

'Getting Started with Bootstrap 5: A Comprehensive Crash Course for Beginners'

Learn everything you need to know to start building responsive, modern websites with Bootstrap 5. This detailed guide covers setup, the grid system, essential components, and customization.

Table of Contents

So, you want to build beautiful, responsive websites without tearing your hair out over CSS? You've come to the right place. Welcome to your crash course on Bootstrap 5, the world's most popular front-end framework for developing responsive, mobile-first projects on the web.

For years, Bootstrap has been the go-to tool for developers looking to rapidly prototype and build professional-looking websites. It provides a solid foundation of pre-styled components, a powerful grid system, and helpful utility classes that handle the heavy lifting of design and responsiveness.

In this guide, we'll dive deep into Bootstrap 5. We'll cover everything from setting up your first project to mastering its core concepts. Whether you're a complete beginner to web development or a seasoned pro looking to get up to speed with the latest version, this post is for you.

What's New in Bootstrap 5?

If you've used Bootstrap 4 before, you'll feel right at home. But Bootstrap 5 brings some significant improvements:

  • No more jQuery: This is the big one! Bootstrap 5 is written in plain, vanilla JavaScript, making it lighter and more compatible with modern JavaScript frameworks.
  • Enhanced Grid System: The grid is even more powerful, with a new xxl breakpoint for extra-large screens and the addition of an intuitive gutter system.
  • CSS Custom Properties: Bootstrap 5 now uses CSS Custom Properties (Variables), making customization and theming easier than ever.
  • Utility API: A brand new API allows you to generate and modify utility classes on the fly, offering incredible flexibility.
  • Improved Forms: Form controls have been redesigned and reorganized for better consistency and appearance.

Ready to jump in? Let's get building!

Section 1: Setting Up Your Bootstrap 5 Project

Before we can use Bootstrap's magic, we need to include it in our project. There are two primary ways to do this: using a CDN or a package manager like npm.

The Quick and Easy Way: CDN (Content Delivery Network)

For learning, prototyping, or small projects, using a CDN is the fastest way to get started. A CDN hosts the Bootstrap files for you, and you simply link to them in your HTML.

Here's a starter HTML5 boilerplate. Copy this into a file named index.html.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

    <title>Hello, Bootstrap 5!</title>
  </head>
  <body>
    <div class="container py-5">
        <h1>Hello, world!</h1>
        <p class="lead">This is my first Bootstrap 5 page.</p>
        <button class="btn btn-primary">I'm a Bootstrap Button!</button>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

Let's break this down:

  1. meta name="viewport": This is crucial for responsive design. It tells the browser how to control the page's dimensions and scaling.
  2. CSS <link>: This tag in the <head> pulls in all of Bootstrap's stylesheets.
  3. JS <script>: This tag, placed just before the closing </body> tag, includes the Bootstrap JavaScript Bundle. The bundle contains Popper.js (for positioning tooltips, popovers, and dropdowns) and Bootstrap's own JS. Placing scripts at the end of the body allows the HTML to render first, improving perceived page load time.

Open this index.html file in your browser. You should see a nicely styled heading and a blue button. Congratulations, you're using Bootstrap!

The Professional Way: Using a Package Manager (NPM)

For any serious project, you'll want to manage your dependencies locally. This gives you more control, allows for customization via Sass, and integrates into modern build tools like Vite or Webpack.

  1. Initialize your project: If you don't have one already, create a package.json file.

    npm init -y

  2. Install Bootstrap: Run the following command in your terminal.

    npm install bootstrap@5.3.2

This will download Bootstrap's files into a node_modules/bootstrap directory in your project.

To use it, you'll need to import the CSS and JS into your project's main files. For example, in a JavaScript project, you might import the JS in your main app.js file:

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'

And in your main Sass file (styles.scss), you'd import the CSS:

// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";

This method is more complex and requires a build process to compile your Sass and bundle your JavaScript, but it's the standard for professional development.

Section 2: The Heart of Bootstrap: The Grid System

The Bootstrap Grid is a powerful mobile-first flexbox system for building layouts of all shapes and sizes. It's based on a 12-column system, and understanding it is the key to mastering Bootstrap.

Core Concepts: Containers, Rows, and Columns

The grid has three main components:

  1. .container or .container-fluid: This is the outermost wrapper.

    • .container provides a responsive, fixed-width container that is centered on the page.
    • .container-fluid provides a full-width container, spanning the entire width of the viewport.

  2. .row: Rows are wrappers for columns. They use flexbox to align columns horizontally and have negative margins to counteract the default padding on columns.

  3. .col-*: This is where your content lives. You can specify how many of the 12 available columns a particular div should span at different screen sizes.

Here's a basic example:

<div class="container text-center">
  <!-- A single row with three equal-width columns -->
  <div class="row">
    <div class="col" style="background-color: #f8d7da;">Column 1</div>
    <div class="col" style="background-color: #d1ecf1;">Column 2</div>
    <div class="col" style="background-color: #d4edda;">Column 3</div>
  </div>

  <!-- A row where columns have specific widths -->
  <div class="row mt-4">
    <div class="col-6" style="background-color: #f8d7da;">6 of 12 columns</div>
    <div class="col-3" style="background-color: #d1ecf1;">3 of 12 columns</div>
    <div class="col-3" style="background-color: #d4edda;">3 of 12 columns</div>
  </div>
</div>

In the first row, we just use .col. Bootstrap automatically divides the space equally. In the second row, we explicitly define the column widths (col-6 + col-3 + col-3 = 12).

Responsive Breakpoints

This is where the grid truly shines. Bootstrap is mobile-first, meaning styles apply from the smallest screen size up. You use breakpoint classes to change the layout on larger screens.

The breakpoints are:

  • xs (Extra small): <576px (This is the default, so you just use .col-*)
  • sm (Small): ≥576px
  • md (Medium): ≥768px
  • lg (Large): ≥992px
  • xl (Extra large): ≥1200px
  • xxl (Extra extra large): ≥1400px

Let's create a layout that stacks on mobile but becomes a three-column layout on larger screens.

<div class="container">
  <div class="row">
    <!-- 
      On mobile (extra small), this will be 12 columns wide (full width).
      On medium screens and up, it will be 4 columns wide.
    -->
    <div class="col-12 col-md-4" style="border: 1px solid red;">
      I'm full-width on mobile, but one-third on desktop.
    </div>
    <div class="col-12 col-md-4" style="border: 1px solid green;">
      Me too!
    </div>
    <div class="col-12 col-md-4" style="border: 1px solid blue;">
      Me three!
    </div>
  </div>
</div>

Try resizing your browser with this code. You'll see the columns stack vertically on small screens and line up horizontally on screens wider than 768px. This is the essence of responsive design with Bootstrap.

Advanced Grid Feature: Gutters

Gutters are the gaps between your column content, created by padding. In Bootstrap 5, you can easily control them with gutter classes (g-*).

  • g-*: Sets horizontal and vertical gutters.
  • gx-*: Sets horizontal gutters.
  • gy-*: Sets vertical gutters.

These classes use a scale from 0 to 5.

<div class="container">
  <!-- This row will have a large horizontal gutter (gx-5) and a small vertical gutter (gy-2) -->
  <div class="row gx-5 gy-2">
    <div class="col-6"><div class="p-3 border bg-light">Custom gutter</div></div>
    <div class="col-6"><div class="p-3 border bg-light">Custom gutter</div></div>
    <div class="col-6"><div class="p-3 border bg-light">Custom gutter</div></div>
    <div class="col-6"><div class="p-3 border bg-light">Custom gutter</div></div>
  </div>
</div>

Section 3: Essential Components You'll Use Every Day

Beyond the grid, Bootstrap's real time-saver is its vast library of pre-built components. Let's look at a few of the most common ones.

Almost every website needs a navigation bar. Bootstrap's navbar is powerful, responsive, and accessible.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MyApp</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 ms-auto">
        <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>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Key Classes Breakdown:

  • .navbar: The main container.
  • .navbar-expand-lg: This is critical. It tells the navbar to be collapsed (hamburger menu) on screens smaller than the lg breakpoint, and expanded horizontally on lg screens and up.
  • .navbar-dark bg-dark: These set the color scheme. navbar-dark is for dark backgrounds (light text), and bg-dark sets the background color.
  • .navbar-toggler: This is the hamburger button that appears on mobile.
  • data-bs-toggle="collapse" and data-bs-target="#navbarNav": These JavaScript data attributes control the collapsing behavior.
  • .collapse .navbar-collapse: The container for the links that gets hidden on mobile.
  • .ms-auto: This is a margin utility (margin-start: auto) that pushes the nav links to the right.

Actions and Information: Buttons and Cards

Buttons are the primary way users interact with your site, and cards are perfect for grouping related content.

Buttons:

Bootstrap offers a wide range of button styles and sizes.

<!-- Standard Buttons -->
<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>

<!-- Outline Buttons -->
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>

<!-- Sized Buttons -->
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Cards:

Cards are incredibly versatile containers. Here's a typical example combining an image, a body, a title, and a button.

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/286x180" class="card-img-top" alt="Placeholder Image">
  <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 and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

You can easily place these cards inside your grid columns to create beautiful, responsive layouts.

Data Entry: Forms

Styling forms is notoriously tedious. Bootstrap makes it simple with its form controls.

<div class="container mt-5">
  <form>
    <div class="mb-3">
      <label for="exampleInputEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
      <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
    </div>
    <div class="mb-3">
      <label for="exampleInputPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1">
    </div>
    <div class="mb-3 form-check">
      <input type="checkbox" class="form-check-input" id="exampleCheck1">
      <label class="form-check-label" for="exampleCheck1">Check me out</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

Key Classes:

  • .form-label: Styles the <label> elements.
  • .form-control: A key class that styles text inputs, textareas, and selects to be full-width with consistent padding and borders.
  • .form-check, .form-check-input, .form-check-label: Used together to style checkboxes and radio buttons correctly.
  • .mb-3: This is a spacing utility (margin-bottom: 1rem) that neatly spaces out the form groups.

Section 4: The Power of Utility Classes

If the grid is the heart of Bootstrap, utility classes are its nervous system. These are single-purpose, atomic classes that let you apply styles directly in your HTML without writing a single line of custom CSS. This approach, often called "utility-first CSS," is incredibly fast for prototyping and building custom designs.

Spacing Utilities

These are arguably the most important and frequently used utilities. They control margin and padding.

The format is {property}{sides}-{size}.

  • Property: m for margin, p for padding.
  • Sides:
    • t - top
    • b - bottom
    • s - start (left in LTR, right in RTL)
    • e - end (right in LTR, left in RTL)
    • x - both left and right
    • y - both top and bottom
    • (blank) - all 4 sides
  • Size: A scale from 0 to 5 (and auto for margins).
    • 0 - 0
    • 1 - .25rem
    • 2 - .5rem
    • 3 - 1rem (the default)
    • 4 - 1.5rem
    • 5 - 3rem

Example:

<!-- A div with padding on all sides of 1rem -->
<div class="p-3 bg-light border">p-3</div>

<!-- A div with a margin-top of 3rem and horizontal padding of 1.5rem -->
<div class="mt-5 px-4 bg-light border">mt-5 px-4</div>

Color and Background Utilities

Quickly apply theme colors to text and backgrounds.

<p class="text-primary">This text is the primary color.</p>
<p class="text-success">This text indicates success.</p>

<div class="bg-warning p-3">This div has a warning background.</div>
<div class="bg-danger text-white p-3">This div has a danger background and white text.</div>

Flexbox Utilities

While the grid is for page-level layout, you can use flexbox utilities for component-level alignment. Bootstrap gives you a full suite of flexbox classes.

<!-- Create a flex container and center its content -->
<div class="d-flex justify-content-center align-items-center bg-info" style="height: 100px;">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
</div>

<!-- A flex container that wraps on small screens -->
<div class="d-flex flex-wrap">
    <!-- ... flex items ... -->
</div>

This is just scratching the surface. There are utilities for display, position, borders, shadows, and so much more. Exploring them in the official documentation is highly recommended.

Section 5: Customizing and Extending Bootstrap

While Bootstrap is great out of the box, you'll eventually want to match your own brand's identity. The best way to do this is with Sass.

The Best Practice: Using Sass

Bootstrap is built with Sass, a powerful CSS preprocessor. This means you can tap into its source files to change anything you want.

Let's say you want to change the primary blue color to a nice purple and use a different default font.

  1. Set up your project: Make sure you've installed Bootstrap via npm as described in Section 1.

  2. Create a custom Sass file: Create a file named custom.scss.

  3. Override variables: In custom.scss, you can override Bootstrap's default Sass variables before you import the main Bootstrap file.

// custom.scss

// 1. Import Google Fonts (or use your own)
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

// 2. Override default variables
// You can find all variables in `node_modules/bootstrap/scss/_variables.scss`
$primary: #712cf9; // A nice purple
$secondary: #6c757d;
$success: #198754;
$danger: #dc3545;
$font-family-base: 'Lato', sans-serif; // Change the default font
$border-radius: .5rem; // Make corners more rounded

// 3. Import the rest of Bootstrap's Sass
@import "../node_modules/bootstrap/scss/bootstrap";

// 4. Add your own custom CSS rules below
.custom-header {
    background-color: $primary;
    color: white;
    padding: 4rem 2rem;
}

  1. Compile your Sass: You'll need a tool to compile this custom.scss file into a regular style.css file that your browser can read. You can use the sass CLI, or integrate it into a build tool like Vite.

    # Example using the Sass CLI
npm install -g sass
sass --watch custom.scss:style.css

Now, you just link to your generated style.css in your HTML instead of the Bootstrap CDN link. Every component in Bootstrap will now use your new primary color, font, and border-radius!

Conclusion: Your Journey Has Just Begun

We've covered a lot of ground in this crash course. You've learned how to:

  • Set up a Bootstrap project using both a CDN and npm.
  • Build responsive layouts with the powerful Grid System.
  • Use essential Components like Navbars, Cards, and Forms.
  • Speed up your styling with Utility Classes.
  • Customize Bootstrap to fit your own brand using Sass.

Bootstrap is a massive framework, and the best way to learn is by doing. Take what you've learned here and try to build something. Recreate your favorite website's layout, build a personal portfolio, or design a landing page for a fictional product.

Whenever you're stuck, remember that the official Bootstrap documentation is your best friend. It's incredibly well-written, with examples for every single component and utility.

Happy coding!

Discuss on Twitter • View on GitHub