Bootstrap

Bootstrap is one of the world's most popular frontend frameworks for building responsive, mobile-first sites. It provides designers and developers with a variety of reusable HTML, CSS, and JavaScript components.

Desired outcomes

Understand the fundamentals and benefits of Bootstrap.

  • Learn how to include Bootstrap in projects.
  • Familiarize with the core components and utilities Bootstrap offers.
  • Create a responsive web layout using the Bootstrap grid system.

What is Bootstrap?

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

Setting up Bootstrap

There are several ways to include Bootstrap in your project:

Via CDN (Content Delivery Network):

Simply add the following links in the <head> section of your HTML document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link 
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
        rel="stylesheet">
  </head>
 
  <body>
    <h1>Hello, world!</h1>
    <script 
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js">
    </script>
  </body>
</html>

Local Installation:

  • You can download Bootstrap from the official website https://getbootstrap.com/.
  • Use package managers like npm with npm install bootstrap.

Bootstrap Grid System

Bootstrap uses a 12-column responsive grid system. This helps developers create page layouts for different screen sizes.

<div class="container">
    <div class="row">
      <div class="col-sm">Column 1</div>
      <div class="col-sm">Column 2</div>
      <div class="col-sm">Column 3</div>
    </div>
</div>
Bootstrap’s Grid System
Bootstrap’s Grid System

In this example, we have a row with 3 columns inside of a Bootstrap container.

  • .container: Fixed-width container.
  • .container-fluid: Full-width container that spans the entire viewport.
  • .row: Creates a row of columns.
  • .col-{breakpoint}: Specifies column width for different screen sizes (xs, sm, md, lg, xl).
  • .col-{breakpoint}-{col-span}: Specifies column width for different screen sizes (xs, sm, md, lg, xl) and column spans (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12).
<div class="container">
    <div class="row">
      <div class="col-12 col-sm-6 col-md-4">Column 1</div>
      <div class="col-12 col-sm-6 col-md-4">Column 2</div>
      <div class="col-12 col-sm-6 col-md-4">Column 3</div>
    </div>
</div>

In this example, we again have a row with 3 columns inside of a container, but this time they are fine tuned to take up the full width of the viewport on mobile extra small (xs) devices, half width on small (sm) devices and full width on medium (md) and above devices.

Bootstrap Breakpoints

Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.

Breakpoint

Class infix

Dimensions

Extra small

None

<576px

Small

sm

≥576px

Medium

md

≥768px

Large

lg

≥992px

Extra large

xl

≥1200px

Extra extra large

xxl

≥1400px

Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions, they don’t specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.

Core Components

Bootstrap comes with numerous predefined components:

  • Navigation: Navbar, Breadcrumbs, Pagination, etc.
  • Content: Typography, Images, Tables, etc.
  • Forms: Inputs, Textareas, Buttons, Checkboxes, Radios, etc.
  • Components: Alerts, Badges, Dropdowns, Modal, Progress bars, Spinners, etc.

Example:

<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"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation">
         <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" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
               <a class="nav-link dropdown-toggle"
                  href="#"
                  id="navbarDropdown"
                  role="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false">
                  Dropdown
               </a>
               <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
               </ul>
            </li>
            <li class="nav-item">
               <a class="nav-link disabled" 
        href="#" 
        tabindex="-1" 
        aria-disabled="true">Disabled</a>
            </li>
         </ul>
         <form class="d-flex">
            <input class="form-control me-2" 
        type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
         </form>
      </div>
   </div>
</nav>

Desktop:

Bootstrap Navbar Desktop
Bootstrap Navbar Desktop

Mobile:

Bootstrap Navbar Mobile
Bootstrap Navbar Mobile

Utilities

Bootstrap offers utility classes for:

  • Borders
  • Colors
  • Display
  • Spacing (Margin & Padding)
  • Text alignment and more.

Example:

<p class="text-center text-primary mt-5">
     This is a centered, blue text with a top margin of 5 units.
</p>
Bootstrap Utility Classes
Bootstrap Utility Classes

You can learn more about all the components Bootstrap has to offer here: https://getbootstrap.com/docs/5.3/getting-started/introduction/

-75%

Time remaining:
days 00: 00: 00

Learn to code HTML & CSS

From Zero to Hero

Check out this course on Udemy, now at 75% off! Inside this interactive course, I will teach you how to develop websites from scratch moving from beginner to advanced concepts. I take time to explain every detail and finish off by building some real-world websites.

HTML & CSS: From Zero to Hero
Learn to code HTML & CSS

-75%

Time remaining:
days 00: 00: 00

Learn to code JavaScript & jQuery

From Zero to Hero

Check out this course on Udemy, now at 75% off! Inside this interactive course, I will teach you how to develop components from scratch moving from beginner to advanced concepts. I take time to explain every detail and finish off by building some real-world reusable components.

JavaScript & jQuery: From Zero to Hero
Learn to code JavaScript & jQuery

-75%

Time remaining:
days 00: 00: 00

Learn Frontend Web Development

From Zero to Hero

Check out this course on Udemy, now at 75% off! A bundle of the previous two courses. Inside this interactive course, I will teach you how to develop websites from scratch moving from beginner to advanced concepts. I take time to explain every detail and finish off by building some real-world websites.

Frontend Web Development: From Zero to Hero
Learn Frontend Web Development