Bootstrap Basics

Welcome to the second part of my styling series where I go over some popular styling libraries/frameworks. In this blog, we'll go over Bootstrap. Bootstrap is a powerful, open source frontend framework that makes building websites faster and easier by providing an intuitive grid system, UI components, and an extensive array of utility.

Setup

Of course before getting into some of the features, we have to talk about setting up Bootstrap in a project. At the time of writing, Bootstrap's current version is 5.3.3 and that is what I'll be using for any examples.

Bootstrap Via CDN

Bootstrap can be set up very quickly by using a CDN, or content delivery network. This method does not require any installation, just add Bootstrap's CSS and JavaScript links to your HTML file and you're off to the races!
You'll put the following CSS link inside the <head> tag of your HTML:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

After that, you'll put the following script before the closing <body> tag:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Via Package Manager

If you're working in a larger project, or working with modern frontend tools, you may want to install via project manager. Lucky for us, this is simple as well! In your terminal, just write npm install bootstrap if using npm, or yarn add bootstrap if using yarn. After installing you'll want to import bootstrap's CSS and JavaScript into your main CSS and JS files respectfully:

// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Import Bootstrap JavaScript
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

The Grid System

One of Bootstrap's most powerful features is its grid system. This allows you to create responsive layouts that automatically adjust to different screen sizes.

Structure

The grid is based on a 12-column structure to organize content. Its basic structure can look something like this:

<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>

Container: The container holds the columns and rows while aligning them
Row: The rows hold and group columns together horizontally
Col: The columns are where your content will live, each row can have 12

Sizes

Columns can also have their own sizes! This can be used to provide different layouts. They are notated by how many columns they'll take up on the row.

<div class="container">
  <div class="row">
    <div class="col-12">100% Width</div>
  </div>
  <div class="row">
    <div class="col-6">50% Width</div>
    <div class="col-6">50% Width</div>
  </div>
  <div class="row">
    <div class="col-4">33.33% Width</div>
    <div class="col-4">33.33% Width</div>
    <div class="col-4">33.33% Width</div>
  </div>
</div>

Breakpoints

Bootstraps grid is mobile first, meaning it's built for mobile devices before scaling up to larger devices. Because of this, Bootstrap has classes that define how columns act across different screen sizes. These are:

xs: For screens less than 576px
sm: For screens more than 576px
md: For screens more than 768px
lg: For screens more than 992px
xl: For screens more than 1200px

For example:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">Wide on medium and larger screens</div>
    <div class="col-6 col-md-4">Narrower on medium and larger screens</div>
  </div>
</div>

In this example, the first column takes up the full width on small screens, but only eight grid units on medium or larger screens. The second will take up half the width on small screens, and only four units on medium or larger.

Common Components

Bootstrap gives us a variety of pre-built components that help in creating appealing, user friendly websites with minimal custom CSS. There are a lot of components, so I'll go over some of the more common one's you're likely to work with.

Typography

We'll start by talking about text, since your users need to read to believe. The typography classes make defining consistent text styles easy, from headings, to body text, to lists. For example, the different heading are notated by their display class:

<h1 class="display-1">Heading 1</h1>
<h2 class="display-2">Heading 2</h2>
<h3 class="display-3">Heading 3</h3>
<p class="lead">This is lead text, which stands out from regular paragraph text.</p>
<p>This is regular paragraph text.</p>
<p class="small">This is small text, which stands out from regular paragraph text.</p>

You can also define paragraph text with utility classes to modify body text as seen above.

Buttons

Every website or app needs buttons! Bootstrap gives a variety of button styles out the box. Their classes are defined as such:

<!-- Basic Buttons -->
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-danger">Danger Button</button>

<!-- Button Sizes -->
<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-primary btn-sm">Small Button</button>

<!-- Button Outlines-->
<button class="btn btn-outline-success">Success Outline</button>
<button class="btn btn-outline-warning">Warning Outline</button>

NavBar

Bootstrap's navbar component comes with built in classes for alignment, dropdowns, and more!

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" 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>
    </ul>
  </div>
</nav>

In this example, the navbar will collapse on smaller screens.

Utility Classes

Bootstrap also includes a wide range of utility classes to help speed along development and reduce the need for custom CSS. With just a few class names, you can adjust spacing, alignment, display properties and more!

Spacing

Spacing is extremely important in development for user readability. Thankfully, Bootstrap gives us classes to adjust margins and padding of elements. They all follow a similar format of {property}{sides}-{size}.

Property: m for margin, p for padding
Sides: t top, b bottom, s start(left), e end(right), x left and right, y top and bottom, or blank for all sides
Size: 0, 1, 2, ..., or auto

For example:

<div class="mt-3">Margin Top of 3</div>
<div class="p-5">Padding of 5</div>
<div class="mx-auto" style="width: 300px">Horizontally Centered with Auto Margin</div>

Display

Display utilities help control the visibility and layout of elements. These can be used to show, hide, or change how elements behave. The display classes include:

d-block: Display as a block element
d-inline: Display as an inline element
d-none: Hide the element
d-flex: Enable Flexbox
d-inline-block: Display as an inline block

Bootstrap also provides responsive versions of these classes that apply to breakpoints, such as d-none d-md-block, this hides an element on small screens.

<div class="d-none d-md-block">Visible on medium and larger screens</div>
<div class="d-flex justify-content-center">Centered with Flexbox</div>

Text Utilities

Bootstrap gives a large amount of text customization with classes like:

Text Alignment

text-start: Aligns text to the left
text-end: Aligns text to the right
text-center: Aligns text to the center

Text Wrapping

text-nowrap: Prevent text from wrapping to the next line
text-truncate: Truncate text with an ellipsis if it's too long

Text Color

text-primary: Text with primary color (default: blue)
text-success: Text with success color (default: green)
text-danger: Text with danger color (default: red)

<p class="text-center text-success">This text is centered and green</p>
<p class="text-end text-primary">This text is right-aligned and blue</p>

Conclusions

Bootstrap is a powerful and flexible framework that allows devs to build responsive websites efficiently. By mastering these foundational concepts, you'll be able to streamline your workflow and focus more on the design and functionality of your site rather than with custom CSS and layout management. So dive in! Experiment with some of the examples and build an amazing app!

Sources

Bootstrap

Blog

Dakota Day