# Week 13: Bootstrap & Github Pages

Agenda

Bootstrap (opens new window) is a CSS framework that allows you to quickly design and customize responsive mobile-first sites. It features Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

# Bootstrap Colors

Bootstrap Colours Reference (opens new window)

Bootstrap comes with a large set of predefined colours that we can use as class names in our HTML. The predefined colours can be modified if you edit the SASS code and then recompile the CSS. See the SASS section in next week's notes for more details.

The colours are names like red, purple, indigo, blue, cyan, or green. Each colour name has a range of CSS class names to apply the base color — or a modified shade — as a text color or background colour. For example, to apply the base red color to the text use the class .text-red-500. You can apply lighter shades with .text-red-100 through .text-red-400, or darker with .text-red-600 through .text-red-900. The same can be down with background color .bg-red-500.

<p class="text-red-500">lorem ipsum</p>
<p class="text-red-200">lorem ipsum</p>
<p class="bg-red-900">lorem ipsum</p>

1
2
3

# Bootstrap Typography

Bootstrap Typography Reference (opens new window)

Bootstrap has default sizes and fonts that are applied to each HTML element. It also features a number of default utility classes to customize and alter the text.

<p class="h1">Lorem ipsum dolor sit amet.</p>
<!-- Applies <h1> styling, available for h1 through h6 -->
<p class="fs-2">Lorem ipsum dolor sit amet.</p>
<!-- Applies only the font-size of <h2>, available for h1 through h6 -->
<p class="text-end">Lorem ipsum dolor sit amet.</p>
<!-- Aligns text to the right-->
<p class="text-lg-center">Lorem ipsum dolor sit amet.</p>
<!-- Aligns text to the center on large screens and up-->
<p class="text-uppercase">Lorem ipsum dolor sit amet.</p>
<!-- Transforms the text to all caps. Should be used instead of writing in all caps for accessibility. -->

1
2
3
4
5
6
7
8
9
10

There are tonnes more utility classes that will be extremely helpful. I encourage you to review the Bootstrap Typography Reference (opens new window) to become more familiar with the available options.

# Bootstrap Buttons

Bootstrap Buttons Reference (opens new window)

Bootstrap provides a number of .btn classes that can be applied to <a>, <button>, or <input type="button">. The .btn class variants include colors (for example: .btn-primary, .btn-warning), size (for example: .btn-sm, .btn-lg), state, and more.

<a class="btn btn-primary" href="#">Primary</a>
<a class="btn btn-outline-primary" href="#">Outline</a>
<a class="btn btn-warning" href="#">Warning</a>
<button class="btn btn-danger btn-lg" type="button">Large Danger</button>
<input class="btn btn-success btn-sm" type="button" value="Small Success" />

1
2
3
4
5

# Bootstrap Cards

Bootstrap Cards Reference (opens new window)

A Card is a fairly standard interface component that you see on many webpages. Typically they are used to display content collections where each element is the same size.

For the basic Bootstrap card, the outer shell will get the class card. Inside there is an image as well as a <div class="card-body"> containing the card content. We can use our .btn from above to add a button to the card.

<div class="card">
  <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>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11

# Bootstrap List Group

Bootstrap Collections Reference (opens new window)

List groups are a flexible and powerful component for displaying a series of content. There is a container with the class list-group and then individual list items, each with the class list-group-items.

You can use <ul> and <li> as the container for a basic list like this:

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

1
2
3
4
5
6
7

Alternatively, we can combine it with some more content to create a more complex list layout:

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

To preview, look at the second example under the Numbered (opens new window) section n the Bootstrap website.

# Bootstrap Navbars

Bootstrap Navbars Reference (opens new window)

A Navbar element is made up of a <nav> element which contains two parts - a logo or brand link, plus a list of nav links.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-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">
          <a class="nav-link active" aria-current="page" 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>
        <li class="nav-item">
          <a
            class="nav-link disabled"
            href="#"
            tabindex="-1"
            aria-disabled="true"
            >Disabled</a
          >
        </li>
      </ul>
    </div>
  </div>
</nav>

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

Inside your <nav> element you need a block element with the class container to create the proper alignment and padding.

The <a> element is the branding / home link followed by the <ul> element for the links. In the example above, we also have a <div class="collapse navbar-collapse" id="navbarNav"> which allows us to create a collapsible mobile nav. This requires the Bootstrap JS to be loaded in order to function.

In the list items that hold the <a> elements you can add the class active to change the background and highlight the current page link.

# Bootstrap Forms

Bootstrap Forms Overview (opens new window)

Bootstrap forms are incredibly well built and provide a sleek, functional form design. The above link provides all of the information you need, with a few key form types highlighted below.

# To Do Before Week 14

Self-Directed To Do

Review the Bootstrap documentation
Complete Week 13: SASS Mixins

← Week 12: SASS Week 14: Bootstrap →