Responsiveness using Bootstrap

Bootstrap is a popular, open-source front-end framework designed to help create responsive websites quickly. It includes a collection of pre-designed HTML, CSS, and JavaScript components. By using Bootstrap, we can save time and effort by leveraging its built-in styles and components, ensuring consistent design and responsive behavior across various devices.

Linking Bootstrap to HTML

To use Bootstrap in a project, we can either download it or link it via a CDN (Content Delivery Network).

By download

Download these files and add them to your website folder.

The <head> section

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
Bottom of the body secion

<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>

CDN

The <head> section

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
Bottom of the body secion

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>

Responsive grid system

One of the core features of Bootstrap is its responsive grid system. It allows us to create layouts that adjust to different screen sizes. The grid system uses a 12-column layout, which is divided into different breakpoints based on the screen size. The whole grid has to be enclosed in a <div> with the .container or .container-fluid class assigned (the latter takes the entire available viewport width).

Breakpoints

Breakpoints are custom classes that define how many columns a container takes in a given screen size (col-[breakpoint]-[number]). The numbers can be from 1 to 12 (unit: columns).

  • col-xs-* - For extra small screens (phones, less than 576px)
  • col-sm-* - For small screens (tablets, 576px and up)
  • col-md-* - For medium screens (desktops, 768px and up)
  • col-lg-* - For large screens (large desktops, 992px and up)
  • col-xl-* - For extra large screens (large desktops, 1200px and up)

Rows are fundamental components of the grid system, used to create horizontal groups of columns. A row is created with the .row class and serves as a wrapper for column elements (.col-*). Columns within a row are aligned based on the defined breakpoints and their respective widths. Rows use negative margins to counterbalance the padding of the container, ensuring the layout stays aligned.

In the extra small size, the columns stack on each other, taking the whole screen by default (col-xs-12). Because Bootstrap 4 and later versions no longer include the xs breakpoint, we can just use col-12 instead.


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

    <div class="row">
        <div class="col-md-8">Column 4</div>
        <div class="col-md-4">Column 5</div>
    </div>
</div>

Here, the col-md-4 class means that each column takes up 4 out of 12 available columns on medium-sized screens and larger. The grid system automatically adjusts for smaller screen sizes, stacking the columns vertically.

We can create a layout that adjusts based on screen size by adding multiple breakpoint classes:


<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4">Column 1</div>
        <div class="col-xs-12 col-sm-6 col-md-4">Column 2</div>
        <div class="col-xs-12 col-sm-12 col-md-4">Column 3</div>
    </div>
</div>

This layout will display one column on extra-small screens, two columns on small screens, and three columns on medium and larger screens.

Basic built-in classes (replacing CSS)

Bootstrap offers many classes that replace CSS attributes. Of course, there are much more.

Bootstrap predefined colors: primary, secondary, success, danger, warning, info, light, dark, white.

bg-[bootstrap-predefined-color] Applying background color to an element.
text-[bootstrap-predefined-color] Applying a text color to an element.
text-center Centering the text horizontally within its container (also: left, right, justify).
text-uppercase Transforming the text to uppercase (also: lowercase, capitalize).
text-muted Applying a muted (lighter) color to text, often used for less important information.
p-[size] Applying padding to an element (e.g., p-3 for padding of 1rem on all sides).
m-[size] Applying margin to an element (e.g., m-3 for margin of 1rem on all sides).
.h1-.h6 Changing the font size to the one of the specified header type.
img-fluid Ensuring an image is responsive, scaling it to fit within its container while maintaining its aspect ratio (width: 100%; and height: auto;).

Components

Bootstrap includes a variety of pre-styled components. It would be pointless to list them all here because Bootstrap has a very developed documentation, so I will name only a few:

Button

<button class="btn btn-primary">Primary Button</button>

Alert

<div class="alert alert-warning">Warning message</div>

Warning message

Dropdown


<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>
Action Another action Something else here

Download a Bootstrap website template.