Lab 3 - Bootstrap

Due: . In this lab, you will try out the Bootstrap design framework.
Categories:

  11 minute read  

Overview

As we begin to look at how to specify the presentation of our webpages using CSS, this sneak peak is intended to help give you a sense of how much can be accomplished with CSS. (We will also write “vanilla” CSS that begins with no third-party code so that you know how these things are accomplished, and importantly how to modify them to suit your specific needs.) In this lab we introduce Bootstrap, but there are many design frameworks out there that provided excellent CSS starting points. For novices especially, design frameworks like Bootstrap are a great way to begin projects you intend to publish because typically the frameworks:

  1. are well-documented
  2. are well-tested
    1. in multiple browsers
    2. on multiple devices
    3. with many viewport sizes
  3. have solved issues novices aren’t even aware of yet
  4. have designed for accessibility
  5. have designed for responsiveness
  6. have designed for usability
  7. have designed for performance
  8. demonstrate best practices for CSS that works well with semantically-structured HTML (itself a best practice)

Specs

(Following the steps in later sections) Make a web page that has:

  1. a responsive navigation bar ("nav bar") at the top,
    • one that has a “Responsive behavior” called a “Toggler” and With a brand name shown on the left and toggler on the right
  2. a responsive content area after the nav such that:
    1. when the viewport is at least 768px wide,
      1. the left 2/3 of the content area’s will be the main content area
      2. the remaining right 1/3 of the content area will be an area for aside content
    2. when the viewport is less than 768px wide,
      1. the main content will occupy the full width of its container
      2. the aside content will come after the main and will also occupy the full width of its container

Starting Resources

Code

Bootstrap’s documentation has the perfect starting code for you ready to roll. We recommend you use the (first) code sample from #2 in the Quick start section (for now, you can ignore the other code samples on that page including the second code block in #2).

This seems like it’s become difficult to specify clearly. This is a good starting point:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <!-- your code here -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

❤️ Favicon

By now, you’ve seen that most of what goes in an html document’s head is metadata not immediately visible to the visitor, and that the content that will be rendered into the browser’s viewport is in the body. The icon that will appear by default alongside the site’s title in browsers’ tabs and which will be used in browsers’ histories and bookmarks is often called a favicon.

This wesbos character has put a ton of useful resources on the web. While I appreciate a fun tone as much as the next prof, I think flicking off visitors on entering your site isn’t the way 🫣 I’d’ve done it. Nonetheless, FavFarm is pretty useful. Consider just referencing this example for now:

<link rel="icon" href="https://fav.farm/🕸️">

Placeholders

Placeholder text is often useful when you’re focussed only on the semantic structure and/or presentation of your page, but not yet its content. A common choice is lorem ipsum text (for the curious: there’s always more to learn), which you can grab a small example in vscode by simply typing lorem and accepting the emmet completion (via hitting tab or enter).

There’s also a delightful variety of these generators, e.g.:

for text
🥓 Bacon Ipsum
🧁 Cupcake Ipsum
🚀 Space Ipsum
🧀 Cheese Ipsum
🏴‍☠️ Pirate Ipsum
➕ and 🤪 more
for images
🏞️ Lorem Picsum

Step 1: Begin with the provided resources

  1. Start this activity as we generally recommend you start all of them
  2. create a file named index.html and paste the code sample from the bootstrap docs (linked above) into your otherwise empty index.html file. Make sure that your code includes the link and script tags referencing the Bootstrap files.
  3. paste the provided favicon link into your head (see above).
  4. delete the Hello, World heading.
  5. make doctype all caps.

Step 2: Add some filler

So that you can see how the content of the is affected by the subsequent steps,

  1. create a main element as the first child of the body element
  2. create an h1 with the text content Bootstrap demo as the first child of the main element
  3. paste 3+ paragraphs of your favorite lorem ipsum text (each paragraph should be wrapped in a p element) into the main of your document (immediately following the h1).
  4. create an aside element as the second child of the body element
  5. paste 3 more paragraphs of your favorite lorem ipsum text (each paragraph should be wrapped in a p element) into the aside of your document.

Step 3: Add a nav bar

  1. Copy the 2nd example in the Bootstrap Components:::Navbar::Responsive:Toggler, the one described as With a brand name shown on the left and toggler on the right.
  2. Paste the copied code to be the first child of the body in your document (i.e. it should immediately precede the main element you created in the previous step).

Step 4: Add a content area

  1. After the close tag of your nav element, let’s add a container for the rest of our page’s content. Paste the following code after the </nav>: 
    • <div class="container">
</div>
  2. Move both the main and aside elements you created in the previous step into the div you just created. Sometimes doing something like this might be more simply specified as “wrap the main and aside elements in a div with the class container”.

Step 5: Implement responsive behavior

Bootstrap implements several pre-defined responsive “breakpoints”. In this use of the term, a breakpoint is not a place to pause code when using a debugger, like most of our prior uses of the term. Rather, it means a value in a range that is used as the threshold for a change in presentation/behavior.

To accomplish the specs, we need to figure out where a viewport width 768px falls in the range of Bootstrap’s breakpoints. According to the docs, viewports with a width of at least 768px are considered “medium” which is represented in bootstrap’s classes with the abbreviated md.

  1. Wrap the main and aside elements in a div with the class row. (So you’re adding only one div element, but it will have two children: main and aside.)
    • so this new div should be the only child of the div with the class container you created in the previous step.
  2. Add this class to your main element: col-md-8, which means that at viewport widths of at least 768px, the main element should be presented as a “column” (within the row you just added) that takes up 8/12ths of the width of its container.
  3. Add this class to your aside element: col-md-4, which means that at viewport widths of at least 768px, the aside element should take up 4/12ths of the width of its container.

Step 6: Accordion

In Graphical User Interfaces on your computer, phone, watch, fridge? contact lens?!, you have become accustomed to some common ways for information to be presented and common dynamic behaviors of those presentations, let’s call a representation of information and its dynamic behavior a “widget”. Bootstrap implements many commonly used “widgets” as components. One of them is an accordion. Let’s try out the accordion.

  1. copy the first code example from the accordion docs and replace all the paragraphs in your aside with the code you copied.

Going Further

Color the navbar

  1. read the docs and try to apply the primary color scheme to the navbar
    1. if you succeed, you may agree that the navbar looks nice, but now the search box looks weird. I think it looks better to make one more modification in this case: find the form in the navbar and add this attribute and value to it: data-bs-theme="light"
    2. oh dang, now the search button kinda sucks too huh? I think it looks better to make one more modification in this case: find the search button in the navbar. Notice it has the class btn-outline-success? drop the -outline part of that class name. Dang, this is still pretty low contrast… 🤔 know what, make it btn-light. That seems alright.

Give the navbar margins to match content

  1. in your nav element, you’ll see one of the first children (which contains all the other descendants of nav) is an element with class container-fluid. Remove the -fluid part of that class name. Read more on Bootstrap Containers if you like.

Currently the responsive behavior of the main content area is based on the md breakpoint, which is at 768px, but the navbar’s responsive behavior is based on the lg breakpoint, which is at 992px. This means that the navbar will be in its “collapsed” state when the viewport is between 768px and 992px wide, but the main content area will be in its “2 column” state. This is a little weird. How can you fix it?

Only show aside when there’s enough real estate

  1. read the docs (e.g. these about hiding elements) and try to make it that the aside is either hidden (on viewports narrower than 768px) or shown on wider viewports as previously specified (a column that takes 4/12 of the available width).
    • if you want an additional challenge, make it that the aside is (1) hidden on extra small (narrower than 576px), (2) shown on small (from 576px up to 767px) but placed below the main, or (3) placed in a column on wider viewports.