DEV Community

Cover image for Bootstrap Basics
Dakota Day
Dakota Day

Posted on

Bootstrap Basics

#html #javascript

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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, l left, r 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Read next

abeertech01 profile image

Asynchronous JavaScript - Get Confusions Cleared

Abdul Ahad Abeer -

mateuscechetto profile image

How to Test Functions That Return Functions in TypeScript with Jest

Mateus Cechetto -

subfuzion profile image

Built-in TypeScript Support with Node.js

Tony Pujals -

babar_ali profile image

Stylish Text Generator

babar ali -