4.5. Bootstrap Tutorial

Bootstrap is a CSS and JavaScript library that can help you build a great looking website without having to create your styles from scratch.

There are many libraries like Bootstrap available. We can’t cover them all. But we can use Bootstrap to give you the idea of what these libraries can do.

Let’s get started with a simple web document.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example Bootstrap Document</title>
  </head>

  <body>
    <header>
      <nav>
        <a href="#">Simpson College</a>
          <ul>
            <li>
              Home
            </li>
            <li>
              <a href="about.html">About</a>
            </li>
            <li>
              <a href="location.html">Location</a>
            </li>
          </ul>
      </nav>
    </header>

    <h1>Lorem Ipsum</h1>

    <p><em>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</em></p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit odio quis magna pharetra finibus.
        Etiam iaculis pellentesque lectus, sed suscipit enim scelerisque in. Cras volutpat ut mi id suscipit.
        Nunc quis turpis lectus. Ut rutrum tempus enim quis dictum.
        Duis consequat ex orci, non maximus dui vestibulum non.
        In sed rutrum nulla. Curabitur auctor ultrices massa, vel maximus enim imperdiet sed.
        Sed libero augue, vehicula eu finibus vitae, interdum nec ante.
        Mauris vel porttitor felis.
        Suspendisse blandit erat vel neque volutpat, sed convallis est volutpat.</p>

    <p>Quisque felis mi, ornare molestie mauris ut, ullamcorper varius ex.
        Etiam facilisis lorem vitae quam tristique sagittis.
        Morbi finibus mauris eget elit pellentesque, non porta tortor placerat.
        Cras vel sodales tortor, fermentum fringilla elit.
        Proin ante ligula, posuere vitae sem sit amet, tincidunt dapibus quam.
        Pellentesque placerat augue ut aliquet vehicula. Cras et mauris id mauris pretium varius ac nec augue.
        Etiam rutrum eros quis hendrerit ultricies. Pellentesque a tellus id neque auctor eleifend vehicula non odio.
        Sed varius, justo sit amet rutrum blandit, justo erat tincidunt justo, eget mollis justo felis vitae enim.</p>

        <h2>Tables</h2>

        <table>
            <tr>
                <thead>
                  <tr>
                      <th>First</th>
                      <th>Last</th>
                      <th>Email</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Sam</td>
                    <td>Simpson</td>
                    <td>sam.simpson@simpson.edu</td>
                  </tr>
                  <tr>
                    <td>Fred</td>
                    <td>Flinstone</td>
                    <td>fred.flinstone@simpson.edu</td>
                  </tr>
                </tbody>
            </tr>
        </table>

  </body>
</html>

4.5.1. Bootstrap Setup

To enable Bootstrap functionality in our page, we have a few steps:

  1. Tell the browser that we are “responsive” to changing size browsers, phones, tablets, etc.
  2. Import the Bootstrap CSS.
  3. (Optional) Select a theme.
  4. Load “JavaScript” so functional things like pull-down menus work.

For the first three, we need to modify our HTML head to include these tags:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<head>
  <meta charset="utf-8">
  <title>Example Bootstrap Document</title>

  <!-- This says our CSS is compatible with phones, and phones
       don't need to scale it strangely. -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
        crossorigin="anonymous">

  <!-- Optional theme add-on -->
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/darkly/bootstrap.min.css" integrity="sha384-nNK9n28pDUDDgIiIqZ/MiyO3F4/9vsMtReZK39klb/MtkZI3/LtjSjlmyVPS3KdN"
        crossorigin="anonymous">

  <!-- If you don't like how sandstone looks, go here and see other themes
       that are available:
       https://bootswatch.com/

       You can replace the 'optional theme' with links from the page below
       to get that theme:
       https://www.bootstrapcdn.com/bootswatch/
  -->
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/flatly/bootstrap.min.css" integrity="sha384-qF/QmIAj5ZaYFAeQcrQ6bfVMAh4zZlrGwTPY7T/M+iTTLJqJBJjwwnsE5Y0mV7QK"
        crossorigin="anonymous">
</head>

For the last one, we need to add the following line just before the close of the body tag:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
        crossorigin="anonymous">
</script>

Where did I get this info? Bootstrap has great docs, and this is from the getting started guide.

At this point, you might notice some slight changes to your document. Mainly font changes.

You should also get introduced to the idea of using a CDN, what the “integrity” and “crossorigin” mean. Your instructor will explain.

4.5.2. Bootstrap Menu

The Bootstrap website is great. For our purposes, here’s an example document to get started with.

Our first page will have a simple menu, and some text:

First Web Page

Bootstrap is great at being responsive. It will scale and easily work on large wide-screen monitors, and small iPhone 4’s.

We can see that if we narrow our screen, the menu goes away and is replaced by a “hamburger” style pull-down menu.

First Web Page

For more info about the navbar, see: https://getbootstrap.com/docs/5.1/components/navbar/

Here is the code behind that menu bar:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<header>
  <nav class="navbar navbar-expand-sm navbar-light bg-light">
    <div class="container-fluid">
      <!-- Brand/site name -->
      <a class="navbar-brand" href="#">Simpson College</a>
      <!-- Hamburger icon -->
      <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 to hide stuff if we have hamburger -->
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <!-- Nav bar item list -->
        <ul class="navbar-nav me-auto mb-2 mb-sm-0">
          <li class="nav-item">
            <!-- This is the style for the 'active' page -->
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="about.html">About</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="location.html">Location</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

4.5.3. The Container

Your content will run all the way to the edge of the screen. It will extend too wide on large monitors. It will look awful.

../../../_images/content.png

To get around this, put all the content in a <div> with the class “container”:

<div class="container">
  Most of your content below the header goes here.
</div>

Now it will look better:

4.5.4. Buttons

Buttons are great!

../../../_images/button.png

You can create buttons with Bootstrap:

<button type="button" class="btn btn-primary">Click me!</button>

Buttons are used in forms. But you aren’t limited to using these as button tags! They can be links:

<a type="button" class="btn btn-primary" href="https://simpson.edu">Simpson</a>

There are many styles of buttons. See: https://getbootstrap.com/docs/4.0/components/buttons/

4.5.5. Tables

Say you have a boring table you want to make look better:

../../../_images/table.png

Simply adding the table class to the table tab will make it look better:

<table class="table">

There’s a lot more you can do to style tables and make them look great: https://getbootstrap.com/docs/5.0/content/tables/

4.5.6. Bootstrap Alert

Want to grab someone’s attention? Use a Bootstrap Alert.

../../../_images/alert.png

Check the linked docs for different styles.

<div class="alert alert-primary" role="alert">
  Use an alert!
</div>

4.5.7. Cards

You can create cool looking cards with images and text below.

../../../_images/card.png 
<div class="card" style="width: 18rem;">
  <img src="..." 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>
  </div>
</div>

For more info, see:

https://getbootstrap.com/docs/5.1/components/card/

4.5.8. Full Bootstrap Example

This is a full example with working code from above.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example Bootstrap Document</title>

    <!-- This says our CSS is compatible with phones, and phones
         don't need to scale it strangely. -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
          crossorigin="anonymous">

    <!-- Optional theme add-on -->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/darkly/bootstrap.min.css" integrity="sha384-nNK9n28pDUDDgIiIqZ/MiyO3F4/9vsMtReZK39klb/MtkZI3/LtjSjlmyVPS3KdN"
          crossorigin="anonymous">

    <!-- If you don't like how sandstone looks, go here and see other themes
         that are available:
         https://bootswatch.com/

         You can replace the 'optional theme' with links from the page below
         to get that theme:
         https://www.bootstrapcdn.com/bootswatch/
    -->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/flatly/bootstrap.min.css" integrity="sha384-qF/QmIAj5ZaYFAeQcrQ6bfVMAh4zZlrGwTPY7T/M+iTTLJqJBJjwwnsE5Y0mV7QK"
          crossorigin="anonymous">
  </head>

  <body>

    <header>
      <nav class="navbar navbar-expand-sm navbar-light bg-light">
        <div class="container-fluid">
          <!-- Brand/site name -->
          <a class="navbar-brand" href="#">Simpson College</a>
          <!-- Hamburger icon -->
          <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 to hide stuff if we have hamburger -->
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <!-- Nav bar item list -->
            <ul class="navbar-nav me-auto mb-2 mb-sm-0">
              <li class="nav-item">
                <!-- This is the style for the 'active' page -->
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="about.html">About</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="location.html">Location</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <!-- Main content
     Put your main content in a dic named 'container'.
     This includes your footer.
     Otherwise everything will stretch to the edge of the  screen.
     -->
    <div class="container">
      <h1>Lorem Ipsum</h1>

      <p><em>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</em></p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit odio quis magna pharetra finibus.
          Etiam iaculis pellentesque lectus, sed suscipit enim scelerisque in. Cras volutpat ut mi id suscipit.
          Nunc quis turpis lectus. Ut rutrum tempus enim quis dictum.
          Duis consequat ex orci, non maximus dui vestibulum non.
          In sed rutrum nulla. Curabitur auctor ultrices massa, vel maximus enim imperdiet sed.
          Sed libero augue, vehicula eu finibus vitae, interdum nec ante.
          Mauris vel porttitor felis.
          Suspendisse blandit erat vel neque volutpat, sed convallis est volutpat.</p>

      <p>Quisque felis mi, ornare molestie mauris ut, ullamcorper varius ex.
          Etiam facilisis lorem vitae quam tristique sagittis.
          Morbi finibus mauris eget elit pellentesque, non porta tortor placerat.
          Cras vel sodales tortor, fermentum fringilla elit.
          Proin ante ligula, posuere vitae sem sit amet, tincidunt dapibus quam.
          Pellentesque placerat augue ut aliquet vehicula. Cras et mauris id mauris pretium varius ac nec augue.
          Etiam rutrum eros quis hendrerit ultricies. Pellentesque a tellus id neque auctor eleifend vehicula non odio.
          Sed varius, justo sit amet rutrum blandit, justo erat tincidunt justo, eget mollis justo felis vitae enim.</p>

      <h2>Buttons</h2>

      <a type="button" class="btn btn-primary" href="https://simpson.edu">Simpson</a>

      <h2>Tables</h2>

      <table class="table">
          <tr>
              <thead class="thead-light">
                <tr>
                    <th scope="col">First</th>
                    <th>Last</th>
                    <th>Email</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Sam</td>
                  <td>Simpson</td>
                  <td>sam.simpson@simpson.edu</td>
                </tr>
                <tr>
                  <td>Fred</td>
                  <td>Flinstone</td>
                  <td>fred.flinstone@simpson.edu</td>
                </tr>
              </tbody>
          </tr>
      </table>

      <h2>Alerts</h2>

      <div class="alert alert-primary" role="alert">
       Use an alert!
      </div>

      <h2>Cards</h2>

      <div class="card" style="width: 18rem;">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Juvenile_Ragdoll.jpg/330px-Juvenile_Ragdoll.jpg" class="card-img-top" alt="Kitten">
        <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>
        </div>
      </div>

    </div> <!-- end container -->

    <!-- Load in JavaScript that makes Bootstrap interactive -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
          crossorigin="anonymous"></script>
    </script>
  </body>
</html>