Lab 3: Bootstrap CSS

In this lab we will look at the Bootstrap CSS library, a library made by twitter, which modernizes our pages by extends our custom CSS to provide pre made layout, styles and components.

Computer running Windows, MacOS or Linux, with an Intel or AMD-based processor (x86 or x86-64) with administrator privileges.

• A modern web browser, with a strong preference for Firefox or Chrome
• A text editor, preferably VS Code

Bootstrap is a library originally developed by Twitter to modernize and standardize web development

• At the simplest, it can be seen as an update to the “default style sheet” which will automatically make an unstyled paged look much more modern
• Additionally, there are a number of pre-defined classes which can be attached to our HTML elements to automatically give them modern styles
• The Current Version, V5, was released September 2020, and is still the most recent major version, with the minor version being 5.3.3.

How to install it?

Rather than manually installing it and serving it from our server, we can have the user’s browser fetch it from a Content Delivery Network (CDN). A CDN distributes common resources on distributed servers around the world, ideally one nearby the user, and they may even have a cached copy on their own computers. (The distributed server scheme is similar to how DNS works). Typically CDNs employ proprietary load balancing algoritresohms that detect where things are in-demand and ensures local copies exist nearby!

This is useful for two reasons: it reduces bandwidth for our server, and if the user has previously downloaded it for any other website, it will be cached on their computer, and load instantly. The only problem is, if the CDN ever goes down, our styles will not load. But then again, if the CDN goes down, the internet likely has bigger problems than just your web page, based on how many sites rely on it.

Grab a link to it from the CDN, and add the code for it into your HTML file:

Installation guide

As with our spreadsheets, the link goes in the head, before our custom styles. (This will allow our custom styles to override theirs as needed.)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

You will also need to paste a JavaScript library into your HTML. This script tag is added in the last line of the body of the document.

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

We’ll investigate more about the placement of JavaScript scripts next lab.

What can it do?

Check out the Examples on Bootstrap’s website which includes pages styled using Bootstrap elements

Examples

You can also see many examples in the Bootstrap cheat sheet:

Bootstrap Cheat Sheet

Where to get help?

The official docs are excellent

Basic Bootstrap Usage

The simplest way to use bootstrap would be to create your HTML elements as usual, and add the Bootstrap class(es) to the HTML element class lists, which will cause the styles to apply. However, this is not always reliable, as sometimes the HTML components will need multiple components to function correctly, which is not always obvious. For this reason, it is often better to look at the examples to see the HTML and CSS requirements. Sometimes you may also need to add custom CSS to further fine-tune the styles. It is important to note that the final visual style will be a combination of the Bootstrap CSS, as well as your custom CSS.

Responsive Design

Today over half of the visits to your website are from mobile devices. How will your site adapt:

You could…

1. Do nothing and suffer the consequences.
2. Create a Dedicated mobile site.
3. Responsive Design.

Consequences of doing nothing: higher bounce rate. Google PageRank suffers.

Dedicated mobile site is a lot of work and maintenance. Responsive design is better.

Bootstrap encourages Mobile First design, and their classes are all automatically responsive! This means that your elements will automatically reflow to smaller screen sizes.

Some Bootstrap Elements:

Bootstrap Containers

The container class is assigned to a div to make the contents automatically responsive regarding the size of the viewport.

• An easy way to make things look pretty good without caring too much about the details
• take up 80% width, responsive
  • By default has some jarring jumps at different breakpoints

<div class="container">
    <p>This is some content that is inside of a container. It should automatically resize as you resize the window. This is some content that is inside of a container. It should automatically resize as you resize the window. This is some content that is inside of a container. It should automatically resize as you resize the window. This is some content that is inside of a container. It should automatically resize as you resize the window.</p>
</div>

container-fluid – Always takes up 100% of the screen width, which is visible when resizing

We are not stuck with the styles Bootstrap gives us, we can also further customize with our own custom CSS:

.container {
  padding: 30px;
}

Bootstrap Buttons

Let’s add some buttons to our text:

<button>Subscribe</button>
<button>Learn More</button>

Even with Bootstrap they are still kind of boring.

We need to attach the appropriate Bootstrap classes. Looking at the Bootstrap documentation…

We can see primary buttons, outline buttons. Let’s try outline buttons…

<button class="btn btn-outline-primary">Subscribe</button>
<button class="btn btn-outline-secondary">Learn More</button>

Say we’re not super happy with how these buttons look. We can use the box model to figure out how they are automatically styled in Bootstrap…

And we can edit these until we are happy it. Then we can record the changes we like in our custom CSS:

.btn {
    padding: .5rem 1rem;
}

Bootstrap Grid

The Bootstrap Grid aligns elements in a grid, and allows responsive resizing, for example, show 4 grid elements on a desktop site, 3 on a tablet, and 1 on a mobile device.

The HTML:

• The outer div’s assigns the class row
• the inner divs assign has class col

simplest version

<div class="row">
  <div class="col">
    <p>I'm in a grid!</p>
  </div>
  <div class="col">
    <p>I'm also in a grid!</p>
  </div>
</div>

If we want to use responsive design, we need to attach the number of units to each grid element

The total grid space is divided into 12 “units”, and our column can take up as many units as we want.

• If we wanted our column to take up 50%, this would be 6 units.
• By using 12 base units, is easy to have 2, 3, 4 or 6 columns.

Let’s look at 3 columns which take 25% of the screen:

<div class="row">
  <div class="col-3">
    <p>I'm in a grid!</p>
  </div>
  <div class="col-3">
    <p>I'm also in a grid!</p>
  </div>
  <div class="col-3">
    <p>A third element!</p>
  </div>
</div>

• We can fix our number of columns with subclasses like col-3
• We can also specify how cols will work depending on screen size

We can also specify different units depending on device.

• e.g. if we wanted: desktop 4 cols, ipad 3 cols, mobile 2 cols
• we would use: class="col-lg-3 col-md-4 col-sm-6"

Example:

<div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">
      <h1>grid</h1>
      <p>I'm in a grid!</p>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
      <h1>grid</h1>
      <p>I'm also in a grid!</p>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
      <h1>grid</h1>
      <p>Another grid example!</p>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
      <h1>grid</h1>
      <p>A final grid column!</p>
    </div>
</div>

Note: If a viewport column size is not specified, it defaults to 100% width.

Jumbotron

Other components in Bootstrap require multiple HTML elements to work. Generally speaking for these I tend to start from samples to find the code, and then make changes as needed.

The JumboTron is a large block element near the top of the page for first impressions Sometimes called a “Hero”. It makes a good “Hello World” element to immediately see the effects of Bootstrap

• Unfortunately, as of Bootstrap 5, no longer a dedicated element
• The following is grabbed from the Bootstrap 5 sample source code:

Example:

<div class="p-5 mb-4 bg-light rounded-3">
    <div class="container-fluid py-5">
        <h1 class="display-5 fw-bold">Custom jumbotron</h1>
        <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
        <button class="btn btn-primary btn-lg" type="button">Example button</button>
    </div>
</div>

Each of the attached elements and classes serves a purpose. We’ve seen some of these classes before, but not all. If you want to figure out what one does, let’s say py-5, we can look it up in the Bootstrap Docs. (Or google Bootstrap 5 py-5, which takes you to spacing…)

Here we can see that this is setting padding in the y direction to 3 spacer units. (Where the spacer size is defined in SASS, something we don’t look at in this lab.)

Navbar

A navigation element. At it’s core it’s an unordered list, wrapped in various div’s. This one is modified from the examples page:

<header class="pb-3 mb-4 border-bottom">
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Carousel</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav ms-auto mb-2 mb-md-0">
              <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="#">Link</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
</header>

Carousel

A container which automatically cycles content over time, typically used for displaying images like a slideshow

Bootstrap Carousel

Bootstrap Cards

A self-contained group of elements, typically includes an image, text

• separated into a header, body and footer region
• cards are stored in a “card deck” and stacks them appropriately
• Less flexible than Bootstrap grid for responsive design

Bootstrap Cards

Input Groups

Sometimes certain inputs logically go together - you will certainly see this in our lab exercise! Check out input groups for some examples of how you might be able to put them together

Input Groups

Responsive Breakpoints with CSS Media Queries

If you ever need to style responsive CSS without bootstrap, you can use CSS Media Queries, a CSS modifier which checks something about the media (screen) and applies a style based on this:

@media screen (min-width: 900px) {
    /* Your CSS here */
}

Think of it like an if block, these styles will only apply if these conditions are met.

Bootstrap defines 4 cutoffs: 576, 768, 992, 1200px

Misc Styling Stuff

Favicon

The icon which appears in your browser tab is a file called favicon.ico, and it is stored in the root directory of your website. You can make it with software like GIMP

<link rel="icon" href="favicon.ico">

In modern browsers, you can even use an SVG, e.g. made in ‘Figma’. Export a drawing as SVG, and use:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Fonts

Fonts on the web are typically grabbed from the Google Fonts CDN, in a similar fashion to Bootstrap

• I’m personally a big fan of Geometeric Sans Serif fonts
• It’s worth learning about a few serif and sans fonts, and knowing which ones to use for accent text and which ones for body text

Some fonts I like:

• Montserrat, Raleway, Poppins, Lexend (Geometric Sans)
• Open Sans, Roboto, Lato (Humanistic Sans)
• Merriweather, Lora, Roboto Slab (Serif) Some of the best Google Fonts from Awwwards

The easiest way to use a Google font is with a CSS import statement:

1. Find a font you like on Google Fonts
2. Select the weights you want to use on your webpage
3. Select the @import option
4. Copy the @import line into yous CSS
5. Use the font-family rule as needed

Bootstrap Icons

Bootstrap has created a set of SVG icons you can use in your sites completely for free. Just copy the SVG code right into your HTML page

Bootstrap Icons

For this lab assignment, we will continue the work from last lab, by extending our previous styling using Bootstrap 5.

Your task is to add Bootstrap and Custom CSS to your HTML files from last lab to match this style. You may need to add to or change your HTML and/or custom CSS to make it look exactly correct.

Recommended approach:

• Look at the pictures to identify elements
• Use the Bootstrap documentation to find appropriate elements
• Add the required Bootstrap libraries from the CDN links
• Combine the appropriate Bootstrap HTML to make it look right (containers, classes, samples, etc.) with your HTML elements from last week, making changes as needed
• Add custom CSS to account for anything that does not look right. You can also try attaching the Bootstrap classes for adding padding.

FAQ:

Which font are you using:

• Poppins (One of my faves)

Which elements interact:

• On the login page, the Login and Register sections collapse to reveal the other
• On the Note-Vote page, when the user’s name is clicked on, the log out section drops down

Can I modify the style?

• Yes, but you will lose grades if it is deemed to be of lower complexity and/or usability. For example, trying different colors styles is fine as it does not reduce complexity or usability.

How will it be graded? Some things the TA will look for include

• Appropriate HTML elements included for all pages
• Bootstrap properly included, with appropriate Bootstrap classes used
• General layout of Login, Register and Note-Vote pages
• Each of the different types of Note-Vote states appropriately styled
• Some specific styling details, which you’ll have to figure out yourself

• This lab will be submitted via URCourses, not by interview.
• Please submit any HTML files and CSS files.
  • You do not need submit the Bootstrap library or any dependencies which can be fetched from the CDN.