Bootstrap

Getting a new website off the ground is a large undertaking. There's all the HTML content, of course, and we need to think about responsive layout (adapting to different size devices), sizing things in percentages, having nice colors that provide sufficient contrast and so forth.

It would be nice to have some pre-fabricated components: HTML and CSS stuff, that makes building a basic site easier.

Bootstrap is essentially that: snippets of HTML that are slightly higher level than basic tags, plus a lot of CSS classes to use with that HTML. The CSS classes specify sizes in percentages, nice fonts and colors and more.

Historical Context

Bootstrap (front-end framework) dates from August 19, 2011, so it's about 10 years old. It's still wildly popular. It contains CSS and (optionally) can have JavaScript added. The JavaScript adds some interactive features. There are also several versions of Bootstrap. The following are active:

  • Bootstrap 3 (2013)
  • Bootstrap 4 (2014)
  • Bootstrap 5 (May 5th, 2021)

Bootstrap versions 3 and 4 used jQuery as part of their JavaScript, but Bootstrap version 5 dropped jQuery for vanilla JavaScript.

In CS 204, we will use Bootstrap 4

CoffeeRun will use only the Bootstrap 4 CSS; it won't use any JS features. We'll see those later in the course.

Side-by-Side Comparison

When we first looked at the CoffeeRun HTML code, I told you to ignore all the CSS classes, that they were just formatting. Today, we'll look at them.

But first, let's see what CoffeeRun would look like with and without Bootstrap. Here, I've use the Firefox Developer Tools to show what the CoffeeRun site would look like on an iPhone 6/7/8:

CoffeeRun with Bootstrap
CoffeeRun with Bootstrap on an iPhone 6
CoffeeRun without Bootstrap
CoffeeRun without Bootstrap on an iPhone 6

I think you'll agree that the version with Bootstrap looks nicer.

Let's see how Bootstrap works.

References

There are many Bootstrap tutorials on the web. I'll make use of the W3Schools Bootstrap 4 tutorials and reference pages.

Setup

To use Bootstrap, really all you have to do is load a .CSS file. However, it can be helpful to also load some JS files.

Furthermore, if we want to have a full-width page, it's a good idea to add the container-fluid CSS class to the body element. If we want a fixed-width page, we can use container. See Bootstrap 4 Containers.

Here's a minimal template, which is what we use in CoffeeRun:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CoffeeRun with Bootstrap 4</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
        href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body class="container-fluid">
</body>
</html>

If we want to add some of the cool widgets that require JavaScript and jQuery, we can add some script tags to the head:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Website Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<body class="container-fluid">
</body>
</html>

When to Load JavaScript

Note that, so far in the course, I have told you to load JS/JQ files at the bottom of the page, right before the close-body tag: </body>.

The reason for that is so that you know for sure that the DOM is built, so that if we want to attach an handler to an element, we'll know that it exists:

$("#some_element").click(some_function);

If you did that in the head, it would fail (without an error message, since jQuery doesn't mind empty sets). Here, the JS files we are loading are not referring to any page elements, so it doesn't hurt to start loading them. (Though, in fact, we should be saying that they can be loaded asynchronously. More on that later in the course.)

When we want to use these Bootstrap JS features, we'll need to make sure the DOM is built first. Again, we'll discuss this later in the course. For now, let's return to Bootstrap.

Bootstrap Grid

Bootstrap supports a Grid system, which is a nice way to think about laying out a page that might have multiple columns. Early in the course, we talked about layout of several example pages. Click through to that link to remind yourself.

For example, the Wikipedia page is laid out in two columns, with a narrow ribbon on the left, maybe a quarter of the page, and the main content on the right being the other three-quarters.

In Bootstrap's Grid system, like many others grid systems, you think of building these multi-column layouts out of an underlying 12-column system. Yes, it's confusing to use the word "column" for both the thing we are building and the materials we are building with, but hang in there. I'll call the underlying grid "base columns". There are twelve base columns because 12 is divisible in lots of ways: by 2, 3, 4 and 6.

The Wikipedia page might have been designed like this, build the left ribbon out of 3 base columns and build the main area out of 9 base columns, giving us the 1:3 ratio we wanted. Like this:

<div class="container-fluid">
  <h1>Two Unequal Responsive Columns</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other 
      when the screen is less than 576px wide.</p>
  <div class="row">
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
    <div class="col-sm-9" style="background-color:lavenderblush;">.col-sm-9</div>
  </div>
</div>

Or, if that makes the left ribbon too wide, we can use 2 and 10. We can even use 2 and 9, leaving one of the base columns unused.

In Bootstrap3, this feature was built on float; in Bootstrap 4, it's built on our old friend flexbox. It's also responsive because for narrower devices, it will switch to a one-column layout:

two unequal columns, responsive

This is surprisingly easy and flexible, which is pretty cool.

Colors

You can set up default color schemes with CSS classes. See Bootstrap 4 colors.

Cards

Our CoffeeRun app has two sections: the form to fill out and the section on pending orders. It structured these as cards, a Bootstrap pre-fabricated bit of HTML and CSS that gives a nice bordered box for some content with options for headers and the like. Cards can be next to each other if the browser is wide enough, or stack vertically if the browser is narrower.

See Bootstrap 4 Cards

Here it is in CoffeeRun:

     <section class="card">
        <div class="card-body">
        <h2>Order Form</h2>

        <form data-coffee-order="form">
        ...
        </form>
        </div>
    </section>
    <section class="card">
        <div class="card-body">
        <h2>Pending Orders</h2>
        <div data-coffee-order="checklist">
        </div>
        </div>
    </section>

Form Controls

Bootstrap has some built-in styling for forms and their inputs. Take a minute to read over these, just to get an overview.

Bootstrap 4 Forms

and

Bootstrap 4 Form Inputs

CoffeeRun uses lots of these classes as well.

More Bootstrap

There's lots more to Bootstrap, but our goal is not to learn all of Bootstrap, but just enough to get started and to learn more if we want to. There's a lot of information at W3Schools.

Here's a list of All Bootstrap 4 Classes which is a terrifyingly long list. The advantage of Bootstrap is that it gives us pre-fabricated solutions to lots of common problems. The trouble with pre-fabricated solutions to common problems is that there are so many out there.

Another thing that people complain about with Bootstrap is that it's so widely used that there's a certain sameness to websites and web applications. So, consider starting with Bootstrap and then customizing your site.