Jeromy's Notes

Bootstrap

12 min read

Install Bootstrap

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" 
      rel="stylesheet"/>

Layout out content with containers and grids

Bootstrap containers establish the root of your HTML document providing a basis of default styles such as the overall margins, paddings, and font of your document. There are two main classes that control container elements: .container and .container-fluid. The .container class centers the content with margins on either side and defines several responsive design thresholds. The .container-fluid class just defines a constant thin margin all around the document.

Welcome to Bootstrap!

Grid System

It’s easy to break a page vertical in HTML with the p and div tags. It’s a little harder to layout content horizontally. Some resort to HTML tables to layout content horizontally using table rows and columns, but this is generally considered a bad practice. HTML tables should be used for displaying tabular content only, not laying out HTML content. Nevertheless, laying out content like a table is convenient, so to achieve the same functionality as tables, but without tables, we can use CSS instead. Bootstrap provides classes such as .row and .col to layout content in a grid.

<h2><a href="https://getbootstrap.com/docs/5.1/layout/grid/">Grid system</a></h2>
<div class="row">
  <div class="col bg-danger text-white">
     <h3>Left half</h3></div>
  <div class="col bg-primary text-white">
     <h3>Right half</h3></div></div>
<div class="row">
  <div class="col-4 bg-warning">
     <h3>One thirds</h3></div>
  <div class="col-8 bg-success text-white">
     <h3>Two thirds</h3></div></div>
<div class="row">
  <div class="col-2 bg-dark text-white">
     <h3>Sidebar</h3></div>
  <div class="col-8 bg-secondary text-white">
     <h3>Main content</h3></div>
  <div class="col-2 bg-info">
     <h3>Sidebar</h3></div></div>

The example above will be rendered as:

Grid system

Left half

Right half

One thirds

Two thirds

Main content

Responsive Grids

Bootstrap grids can adapt to the size of the screen, that is, they can be responsive. We can achieve this by applying more than one .col class which only applies for a given window size.

<h2>Responsive grid system</h2>
<div class="row">
 <div class="col-12 col-md-6 col-xl-3 bg-warning">
  <h3>Column A</h3>
 </div>
 <div class="col-12 col-md-6 col-xl-3 bg-primary text-white">
  <h3>Column B</h3>
 </div>
 <div class="col-12 col-md-6 col-xl-3 bg-danger text-white">
  <h3>Column C</h3>
 </div>
 <div class="col-12 col-md-6 col-xl-3 bg-success text-white">
  <h3>Column D</h3>
 </div>
</div>

The example above will be rendered as:

Responsive grid system

Column A

Column B

Column C

Column D

Let's try a more dramatic example by adding more content spread over more columns and rows. 
<h2>Responsive grid system</h2>
<div class="row">
 <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 bg-warning">
   <h4>1</h4></div>
 <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 bg-primary text-white">
   <h4>2</h4></div>
 <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 bg-danger text-white">
   <h4>3</h4></div>
 <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 bg-success text-white">
   <h4>4</h4></div>
 <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 bg-warning">
   <h4>5</h4></div>
 <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 bg-primary text-white">
   <h4>6</h4></div>
 <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 bg-danger text-white">
   <h4>7</h4></div>
 <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 bg-success text-white">
   <h4>8</h4></div>
 <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 bg-warning">
   <h4>9</h4></div>
 <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 bg-primary text-white">
   <h4>10</h4></div>
 <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 bg-danger text-white">
   <h4>11</h4></div>
 <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 bg-success text-white">
   <h4>12</h4></div>
</div>

The example above will be rendered as:

Responsive grid system

1

2

3

4

5

6

7

8

9

10

11

12

Hiding and showing responsive content

As users shrink or widen the browser window, there may be more or less space to show some content. Bootstrap can configure content to show or hide depending on the width of the screen. As described earlier in Responsive grids, Bootstrap breaks up the screen into 5 sizes: extra small, small, medium, large, extra large, and extra extra large. Use Bootstrap display classes as shown below that illustrates hiding and showing content as you resize the screen. Resize the window and confirm that the content only shows at certain widths.

<h2>Hiding and showing responsive content</h2>
<div class="d-block d-sm-none fa-2x">XS</div>
<div class="d-none d-sm-block d-md-none fa-2x">S</div>
<div class="d-none d-md-block d-lg-none fa-2x">M</div>
<div class="d-none d-lg-block d-xl-none fa-2x">L</div>
<div class="d-none d-xl-block d-xxl-none fa-2x">XL</div>
<div class="d-none d-xxl-block fa-2x">XXL</div>

The example above will be rendered as:

Hiding and showing responsive content

XS
S
M
L
XL
XXL

Tables and Lists

Styling tables

Bootstrap provides several classes that enhance the look and feel of common HTML widgets such as tables, lists, and form elements. Let’s start with tables.

<h2>Tables</h2>
<table class="table">
   <thead>
   <tr class="table-dark"><th>Quiz</th><th>Topic</th><th>Date</th><th>Grade</th></tr>
   </thead>
   <tbody>
   <tr class="table-warning"><td>Q1</td><td>HTML</td><td>2/3/21</td><td>85</td></tr>
   <tr class="table-danger"><td>Q2</td><td>CSS</td><td>2/10/21</td><td>90</td></tr>
   <tr class="table-primary"><td>Q3</td><td>JavaScript</td><td>2/17/21</td><td>90</td></tr>
   </tbody>
   <tfoot>
   <tr class="table-success"><td colspan="3">Average</td><td>90</td></tr>
   </tfoot>
</table>

The example above will be rendered as:

Tables

QuizTopicDateGrade
Q1HTML2/3/2185
Q2CSS2/10/2190
Q3JavaScript2/17/2190
Average90

Making tables responsive

In general it is a good practice to minimize the number of scrollbars shown at any one time in a browser screen. In browsers large amounts of content extends vertically beyond the height of the window, and then scrollbars allow you to access that extra content. Sometimes it is necessary to use additional scrollbars when appropriate such as tables that might be too wide to fit horizontally. Bootstrap provides tables that can show scrollbars when they don’t fit in their parent window.

<h2>
   <a href="https://getbootstrap.com/docs/5.1/content/tables/#responsive-tables">
       Responsive tables</a></h2>
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr><th>Very</th><th>long</th><th>set</th><th>of</th><th>columns</th>
          <th>Very</th><th>long</th><th>set</th><th>of</th><th>columns</th>
          <th>Very</th><th>long</th><th>set</th><th>of</th><th>columns</th>
      </tr>
    </thead>
    <tbody>
      <tr>
         <td>Very</td><td>long</td><td>set</td><td>of</td><td>columns</td>
         <td>Very</td><td>long</td><td>set</td><td>of</td><td>columns</td>
         <td>Very</td><td>long</td><td>set</td><td>of</td><td>columns</td>
      </tr>
    </tbody>
  </table>
</div>

The example above will be rendered as:

Responsive tables

VerylongsetofcolumnsVerylongsetofcolumnsVerylongsetofcolumns
VerylongsetofcolumnsVerylongsetofcolumnsVerylongsetofcolumns

Styling lists

Another set of Bootstrap classes can make simple HTML lists look more presentable. The .list-group and .list-group-item classes can be applied to ul and li tags correspondingly to make list stand out. The .active class can be applied to an li tag to highlight it.

<h2>
   <a href="https://getbootstrap.com/docs/5.1/components/list-group/">
       Favorite movies</a>
</h2>
<ul class="list-group">
   <li class="list-group-item active">Aliens</li>
   <li class="list-group-item">Terminator</li>
   <li class="list-group-item">Blade Runner</li>
   <li class="list-group-item">Lord of the Ring</li>
   <li class="list-group-item disabled">Star Wars</li>
</ul>

The example above will be rendered as:

Favorite movies

  • Aliens
  • Terminator
  • Blade Runner
  • Lord of the Ring
  • Star Wars

The same .list-group and .list-group-item Bootstrap classes can be applied to div and a tags to implement a list of anchor links.

<h3>
   <a href="https://getbootstrap.com/docs/5.1/components/list-group/#links-and-buttons">
       Favorite books</a>
</h3>
<div class="list-group">
  <a href="https://en.wikipedia.org/wiki/Dune_(novel)" class="list-group-item list-group-item-action active">
       Dune</a>
   <a href="https://en.wikipedia.org/wiki/The_Lord_of_the_Rings" class="list-group-item list-group-item-action">
       Lord of the Rings</a>
   <a href="https://en.wikipedia.org/wiki/The_Forever_War" class="list-group-item list-group-item-action">
       The Forever War</a>
   <a href="https://en.wikipedia.org/wiki/2001:_A_Space_Odyssey_(novel)" class="list-group-item list-group-item-action">
       2001 A Space Odyssey</a>
   <a href="https://en.wikipedia.org/wiki/Ender%27s_Game" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Ender's Game</a>
</div>

The example above will be rendered as:

Favorite books

Dune Lord of the Rings The Forever War 2001 A Space Odyssey Ender's Game

Styling Forms

Basic form styling

Bootstrap has tons of classes to style form elements especially to make them friendly for mobile Web applications.

<h2>
  <a href="https://getbootstrap.com/docs/5.1/forms/form-control/">
    Forms
  </a>
</h2>
<div class="mb-3">
  <label for="input1"
         class="form-label">
    Email address</label>
  <input type="email"
         class="form-control"
         id="input1"
         placeholder="name@example.com">
</div>
<div class="mb-3">
  <label for="textarea1"
         class="form-label">
    Example textarea</label>
  <textarea class="form-control"
            id="textarea1"
            rows="3"></textarea>
</div>

The example above will be rendered as:

Forms

Styling Dropdowns

Dropdowns can also be styled professionally.

<h3>
   <a href="https://getbootstrap.com/docs/5.1/forms/select/">
       Dropdowns</a>
</h3>
<select class="form-select">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
</select>

The example above will be rendered as:

Dropdowns

Styling switches

Checkboxes can be styled to look like switches with Bootstrap classes .form-check and .form-switch.

<h3>
 <a href="https://getbootstrap.com/docs/5.1/forms/checks-radios/#switches">Switches</a>
</h3>
<div class="form-check form-switch">
 <input class="form-check-input"
        type="checkbox"
        id="switch1">
 <label class="form-check-label" for="switch1">
     Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
 <input class="form-check-input"
        type="checkbox"
        id="switch2"
        checked>
 <label class="form-check-label"
        for="switch2">
     Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
 <input class="form-check-input"
        type="checkbox"
        id="switch3"
        disabled>
 <label class="form-check-label"
        for="switch3">
     Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
 <input class="form-check-input"
        type="checkbox"
        id="switch4"
        checked disabled>
 <label class="form-check-label"
        for="switch4">
     Disabled checked switch checkbox input</label>
</div>

The example above will be rendered as:

Switches

Styling range and sliders

Range input fields render as sliders.

<h3>
 <a href="https://getbootstrap.com/docs/5.1/forms/range/#steps">
    Range
 </a>
</h3>
<label for="range1"
      class="form-label">
 Example range</label>
<input type="range"
      class="form-range"
      min="0"
      max="5"
      step="0.5"
      id="range1"/>

The example above will be rendered as:

Range

Styling addons

Addons decorate input felds to give some context on the type and formate of the information to type in the input field.

<h3><a href="https://getbootstrap.com/docs/5.1/forms/input-group/">Addons</a></h3>
<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>
  <input type="text" class="form-control">
</div>
<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-text">$</span>
  <span class="input-group-text">
    0.00</span>
</div>

The example above will be rendered as:

Addons

$ 0.00
$ 0.00

Making forms responsive

Forms can be configured to display either horizontally or vertically depending on the size of the containing element.

<h3><a href="https://getbootstrap.com/docs/5.1/forms/layout/#horizontal-form">Responsive forms</a></h3>
<div class="mb-3 row">
  <label for="email1"
         class="col-sm-2 col-form-label">
    Email</label>
  <div class="col-sm-10">
    <input type="text"
           class="form-control"
           id="email1"
           value="email@example.com">
  </div>
</div>
<div class="mb-3 row">
  <label for="password1"
         class="col-sm-2 col-form-label">
    Password</label>
  <div class="col-sm-10">
    <input type="password"
           class="form-control"
           id="password1">
  </div>
</div>
<div class="mb-3 row">
  <label for="textarea1"
         class="col-sm-2 col-form-label">
    Bio</label>
  <div class="col-sm-10">
  <textarea class="form-control"
            id="textarea1"
            rows="3"></textarea>
  </div>
</div>

The example above will be rendered as:

Responsive forms

Another example is

<h3><a href="https://getbootstrap.com/docs/5.1/forms/layout/#horizontal-form">Responsive forms</a>
</h3>
<form>
 <div class="row mb-3">
   <label for="r1" class="col-sm-2 col-form-label">
     Email</label>
   <div class="col-sm-10">
     <input type="email" class="form-control"
            id="r1"/>
   </div>
 </div>
 <div class="row mb-3">
   <label for="r2" class="col-sm-2 col-form-label">
       Password</label>
   <div class="col-sm-10">
     <input type="password" class="form-control"
            id="r2"/>
   </div>
 </div>
 <fieldset class="row mb-3">
   <legend class="col-form-label col-sm-2 pt-0">
     Radios</legend>
   <div class="col-sm-10">
     <div class="form-check">
       <input class="form-check-input" type="radio"
              name="gridRadios" id="r3"
              value="option1" checked/>
       <label class="form-check-label" for="r3">
         First radio</label>
     </div>
     <div class="form-check">
       <input class="form-check-input" type="radio"
              name="gridRadios" id="r4"
              value="option2"/>
         <label class="form-check-label" for="r4">
           Second radio</label>
         </div>
         <div class="form-check disabled">
           <input class="form-check-input"
                  type="radio"
                  name="gridRadios" id="r5"
                  value="option3" disabled/>
           <label class="form-check-label" for="r5">
             Third disabled radio</label>
         </div>
     </div>
 </fieldset>
 <div class="row mb-3">
   <div class="col-sm-10 offset-sm-2">
     <div class="form-check">
       <input class="form-check-input"
              type="checkbox" id="r6"/>
         <label class="form-check-label" for="r6">
           Example checkbox</label>
     </div>
   </div>
 </div>
 <button type="submit" class="btn btn-primary">Sign in</button>
</form>

And this will be rendered as:

Responsive forms

Radios

Overriding Bootstrap style

Bootstrap makes it easy to apply professional styles, but sometimes we will need override some of the styles declared by Bootstrap. The way to achieve this is by loading additional stylesheets after loading the Bootstrap library.

.btn-primary.override-bs {
   background-color: #a90dfd;
   border-color: #fd0d51;
   border-width: 10px;
   border-radius: 20px;
   border-style: dashed;
   font-size: 2em;
   font-weight: bolder;
}
<h3>Overriding Bootstrap style</h3>  
<button class="btn btn-primary">  
  Regular Bootstrap Button  
</button>  
<br/>  
<button class="btn btn-primary override-bs">  
  Overriden Button  
</button>

The example above will be rendered as:

Overriding Bootstrap style


Bootstrap provides several common navigation widgets such as tabs, menus, and pills. Let’s take a look at tabs first.

<h2><a href="https://getbootstrap.com/docs/5.1/components/navs-tabs/">Tabs</a></h2>
<ul class="nav nav-tabs">
   <li class="nav-item">
       <a class="nav-link active" href="#">Active</a>
   </li>
   <li class="nav-item">
       <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
       <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
       <a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
   </li>
</ul>

The example above will be rendered as:

Tabs

Pills are another navigation widget listing several links.

<h3>
   <a href="https://getbootstrap.com/docs/5.1/components/navs-tabs/#pills">
       Pills
   </a>
</h3>
<ul class="nav nav-pills">
   <li class="nav-item">
       <a class="nav-link active" href="#">Active</a>
   </li>
   <li class="nav-item">
       <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
       <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
       <a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
   </li>
</ul>

The example above will be rendered as:

Pills

Cards combine images, titles, paragraphs and buttons into a reusable component that can quickly summarize a topic.

<h2>
   <a href="https://getbootstrap.com/docs/5.1/components/card/">
       Cards
   </a>
</h2>
<div class="card" style="width: 18rem;">
   <img src="../../images/starship.jpg"
        class="card-img-top" alt="...">
   <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>

The example above will be rendered as:

Cards

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Decorating documents with Fontawesome icons

Fontawesome can be installed in a couple of ways. You can download the latest version from their download Website, unzip the zip file, and copy the unzipped folder to public/vendors/fontawesome in your project. This alternative is best for software developers where they might have local copies of various versions of libraries they use during the development effort. Local copies of libraries simplify the development process. Add the following link tag to your HTML document.

<link href="../../vendors/fontawesome/css/all.css" rel="stylesheet"/>

Alternatively you can reference a CSS file hosted from any number of CDNs. CDN stands for Content Delivery Network and are remote servers dedicated to hosting common files and resources used by a community. This alternative is best for production environments when the Website is live.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" 
      rel="stylesheet"/>

Feel free to use either of the alternatives described above.

Using simple icons

<h2>Simple icons</h2>
<i class="fa fa-cog"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-share"></i>
<i class="fa fa-comment"></i><br/>
<i class="fa fa-image"></i>
<i class="fa fa-chart-bar"></i>
<i class="fa fa-calendar"></i>
<i class="fa fa-smile"></i>

The example above will be rendered as:

Simple icons


Resizing icons

<h2>Resizing icons</h2>
<i class="fa fa-cog fa-2x"></i>
<i class="fa fa-heart fa-2x"></i>
<i class="fa fa-share fa-3x"></i>
<i class="fa fa-comment fa-3x"></i><br/>
<i class="fa fa-image fa-3x"></i>
<i class="fa fa-chart-bar fa-4x"></i>
<i class="fa fa-calendar" style="font-size: 5em"></i>
<i class="fa fa-smile" style="font-size: 3.5em"></i>

The example above will be rendered as:

Resizing icons


Coloring icons

<h2>Coloring icons</h2>
<i class="fa fa-cog fa-2x" style="color: tomato"></i>
<i class="fa fa-heart fa-2x" style="color: tomato"></i>
<i class="fa fa-share fa-3x" style="color: #5ec15b"></i><br/>
<i class="fa fa-comment fa-3x" style="color: #19d49e"></i>
<i class="fa fa-image fa-3x" style="color: rgb(234,123,12)"></i>
<i class="fa fa-chart-bar fa-4x" style="color: rgb(123,234,123)"></i>

The example above will be rendered as:

Coloring icons


Brand icons

<h2>Brand icons</h2>
<i class="fab fa-twitter fa-2x"></i><br/>
<i class="fab fa-facebook fa-2x"></i><br/>
<i class="fab fa-apple fa-2x"></i><br/>

The example above will be rendered as:

Brand icons




Stacking icons

<h2>Stacking icons</h2>
<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span><br/>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span><br/>
<span class="fa-stack fa-2x">
<i class="fas fa-camera fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
</span><br/>

The example above will be rendered as:

Stacking icons




Rotating icons

<h2>Rotating icons</h2>
<div class="fa-4x">
   <i class="fas fa-snowboarding"></i>
   <i class="fas fa-snowboarding fa-rotate-90"></i>
   <i class="fas fa-snowboarding fa-rotate-180"></i><br/>
   <i class="fas fa-snowboarding fa-rotate-270"></i>
   <i class="fas fa-snowboarding fa-flip-horizontal"></i>
   <i class="fas fa-snowboarding fa-flip-vertical"></i><br/>
   <i class="fas fa-snowboarding fa-flip-both"></i><br/>
</div>

The example above will be rendered as:

Rotating icons




Animating icons

<h2>Animating icons</h2>
<div class="fa-3x">
  <i class="fas fa-spinner fa-spin"></i>
  <i class="fas fa-circle-notch fa-spin"></i>
  <i class="fas fa-sync fa-spin"></i><br/>
  <i class="fas fa-cog fa-spin"></i>
  <i class="fas fa-spinner fa-pulse"></i>
  <i class="fas fa-stroopwafel fa-spin"></i>
</div>

The example above will be rendered as:

Animating icons


Graph View