MAD9013

# Week 14: Bootstrap

Agenda

# Bootstrap Grids

Bootstrap has a collection of classes that are very helpful with building layouts.

# Containers

Bootstrap Container Reference (opens new window)

Bootstrap comes with three different containers:

  • .container, which sets a max-width at each responsive breakpoint
  • .container-fluid, which is width: 100% at all breakpoints
  • .container-{breakpoint}, which is width: 100% until the specified breakpoint

Note!

Unfortunately, containers is one of the few areas that Bootstrap isn't quite up to standard. The containers use a different set px width at each breakpoint instead of one adaptive em/rem max-width. This can cause some problems if a user adjusts their default font size because the container will not adapt with the change of font-size.

We could fix this by changing the values in the _variables.scss file to proper corresponding em values.

# Grids

Bootstrap Grid Reference (opens new window)

The Bootstrap grid system is built using flexbox. To create a grid on the page we would create a div with the class .row and then other elements inside the row would each have the class .col.

By default each of the columns has the same amount of width. In the example below, each column will be 1/3 of the width.

<div class="row">
  <div class="col">A column</div>
  <div class="col">A column</div>
  <div class="col">A column</div>
</div>
1
2
3
4
5

We can also set specific widths for our columns and have those widths change at the different breakpoints. Each .row is built with a 12 column system. We can use a classes to state how many columns our .col should span at the different screen sizes. Here is an example:

<div class="row">
  <div class="col col-12 col-md-4 col-lg-6">A column</div>
  <!-- Full width on xs screens, a third on medium, and half width on large -->
  <div class="col col-12 col-md-4 col-lg-3">A column</div>
  <!-- Full width on xs screens, a third on medium, and quarter width on large -->
  <div class="col col-12 col-md-4 col-lg-3">A column</div>
  <!-- Full width on xs screens, a third on medium, and quarter width on large -->
</div>
1
2
3
4
5
6
7
8

# Bootstrap SASS

There are two versions of Bootstrap that you can download. One is the base version and the other contains all the source including the SASS files. You can find both download links on the download page (opens new window)

The Compiled CSS and JS (opens new window) version is a ready to go version you simply need to add to your project and link in your html file. This option is quick to set up and is ready to go right away.

The Source Files (opens new window) download provides all related source files including the scss files found in the ./scc folder. This option allows further customization of the code through altering variables of colours, typography, and so on. We are going to use this method for our final project so that we can leverage the customization and so that we can compile all the scss, both the Bootstrap and our own custom scss into one clean compressed css file.

# Bootstrap Icons

The Bootstrap Framework includes over 1300 icons that you can incorporate in your website or webapp for free.

The simplest way to include the icons is through the icon font by including the following link and by using their specific icon classes.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
/>
1
2
3
4

Then each icon can be added to your page as content. Typically, you would use an <i> element to house the icon. This is the old italic element from the original HTML spec. The italic element was replaced with the semantic <em> emphasis element.

Now, <i> is often used as a container for icons. We just have to use the CSS class name bi so the imported font is used and the correct icon character is shown.

<i class="bi bi-heart-fill"></i>
1

The icon is sized with the font-size property and inherits its parent's font-size by default.

Bootstrap Icon Reference & List (opens new window)

# Bootstrap Preloaders

If you want to add an animation to your page to indicate loading or activity then Bootstrap provides a few types that you can use.

If you want a bar that you can control the percentage that something has loaded then use a Progress bar (opens new window).

<div class="progress">
  <div
    class="progress-bar"
    role="progressbar"
    style="width: 50%"
    aria-valuenow="50"
    aria-valuemin="0"
    aria-valuemax="100"
  ></div>
</div>
1
2
3
4
5
6
7
8
9
10

There are also round spinner (opens new window) types. You can edit the colour with the text-color classes.

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
1
2
3

# Bootstrap Scripted Components

A number of the Bootstrap components require JS to work. Bootstrap provides all of the JS in both a ready to use processed format and as modules. Since this is not a JS course, my recommendation is to stick with using the ready out of the box compiled version for now.

To include the JS in your project, copy either the bootstrap.js or bootstrap.min.js files from the bootstrap/dist/js folder of the Source Files (opens new window) download into your project's ./js folder. Don't forget to include a script tag in each HTML page linking to the file!

# Project Licenses

When we create our projects with NPM or Git you will often see references to project licence files that talk about who can do what with the code in your project.

Do you want to have people pay to use your code? Is it a one time payment or a per use fee? Is the code free for others to use as long as they give you credit? Are people allowed to make changes to your code when they include it in another project? Are they allowed to distribute their project to other people if their project includes your code? These are just some of the questions that having the correct licence will answer.

This website will help you decide on which type of licence would be most appropriate for your project.

TLDR Legal (opens new window)

# To Do

To Do before next week

Last Updated: 12/4/2021, 4:58:50 PM

← Week 15: Final Project Work →