The Bootstrap Framework

Introduction

The website is here

Incorporating Bootstrap

Method 1: Including Bootstrap via a Content Delivery Network (CDN)

The easy way to get started with Bootstrap is to access it remotely using a CDN. By using this method, you are linking to the Bootstrap CSS file hosted on a remote server, so you don't need to host the file on your own server.

To do so, always include the first of the following links in the HEAD of your document. If you want to include your own CSS stylesheet as well, always include it AFTERWARDS, so that Bootstrap doesn't override any of the properties included. I've called my CSS stylesheet bootstrapExample. Include these like so:

This is a good option if you don't want to host the files on your own server. Just remember to include the CSS file in the head of your HTML file. After that, you'll need to include theBootstrap JavaScript files in this way before the end of the closing body tag. The Popper.js library is a dependency of Bootstrap and is used to handle positioning and tooltips, so it should be included before the Bootstrap JavaScript file.

Method 2: Including Bootstrap via download

The other way involves downloading the Bootstrap package from the official website and including the CSS and JavaScript files in your project. You can include the CSS file in the head of your HTML file, and the JavaScript file just before the closing body tag. 

                        
                            <link rel="stylesheet" href="path/to/bootstrap.min.css">
                            <--This link goes in the head-->

                            <script src="path/to/bootstrap.min.js"></script>
                            <--This link comes in before the closing <body> tag
However, it's good practice to use a Content Delivery Network (CDN) to include the Bootstrap files in your website. This allows your website to load the files from a server that is geographically closer to the user, which can improve the website's loading time.

Using Classes From Bootstrap's Stylesheet

A container is the most basic layout system, and required to use Bootstrap's Grid System.

containers
Showing the standard container class versus the fluid container class

There are three main types of container (created quickly in VS Studio Code using a class name, such as .container and hitting TAB), including:

  1. The standard .container
  2. A fluid container like .container-fluid
  3. Responsive containers, such as .container-sm, .container-md, .container-lg, and .container-xl

The standard container simply enclosed the content of our <body> in a class that imposes margins and padding. The fluid container class is used for a full-width container spanning the length of the viewport. The responsive containers keep the screen at full-width until a specific breakpoint is reached.

Buttons in Bootstrap

Buttons, as with many features in Bootstrap, need to make use of classes. Whether it's a button or a navbar, be ready to consult the documentation often! In general, it's easier to consult the documentation than to attempt to memorize the order of something like btn-outline-warning etc...

Semantic Buttons

The typical button styles can be found here

It's fairly easy to include them...compare the following two button types: the former using Bootstrap, the latter nothing:

There are numerous semantic buttons. Many styles in Bootstrap include special semantics. For example, the term class="btn btn-primary" can be used (and adapted) for primary buttons. Success buttons can use class="btn btn-success" and are green. A number of examples are shown:

Different styles of button

Buttons can come in an array of different styles and sizes. For example, the outline is semantic, and included to create buttons without background images/colors. class="btn btn-outline-primary":

It's also very common to see semantic terms representing size, such as sm, md, and lg. e.g. from class="btn btn-primary btn-lg" down:

Adding the disabled state to a button

Adding the disabled attribute to a button makes the button look unsaturated and disabled: class="btn btn-lg btn-primary" disabled:

Typography and Utilities

Typography is found here

Display Class

Lead Class

Blockquotes

  • This is a very convenient way to incorporate quotes in the page naturally

    • This element represents a quotation that is offset in its own line. Using <blockquote> is an easy way to do this, and this section in the documentation is really helpful with that!

    Colt Steele The Web Developer Bootcamp 2023

    Alignment of text

    Text is relatively easy to align using classes such as .text-end, or text-center. We'll use text-center below:

    Here is where some more detailed text components can be changed!

    Colt Steele The Web Developer Bootcamp 2023

    Basic Utilties

  • Very briefly, this is largely used to change color and background-color

    • Finally, other basic utilities will be covered next! Here are some helpful ways to adjust text color and background-color

    Colt Steele The Web Developer Bootcamp 2023

    Badges, Alerts, and Button Groups

    Badges

  • Badges are relatively easy to incorporate. They're most often used in alerts for a navbar. For example, if we want to provide some way of communicating that there have been a specific number of updates (generated by some other function) in a page, we can do so by combining a button and badge like so:
  • These very often incorporate a badge class inside a <span>. Look at the code for the above, for example: 
                    
                    <button type="button" class="btn btn-primary">
                        Updates <span class="badge bg-secondary">4</span>
                    </button>
  • There are also pill badges, such as Pill Badge, which use the class badge-pill. The full version of the pill padge on the left looks something like <span><class="badge badge-pill badge-primary">Example<span>

    • The button group component just melds multiple buttons into a group

  • The underlying language uses JavaScript, but we'll come to that later!
  • For now, let's look at an example:
  • Firstly, we created 3 buttons using <button class="btn btn-primary">
  • This was then enclosed in a div of class btn-group. Take care to use "btn-group", not "button-group"
  • Additional: In Bootstrap, there's the role="group" attribute is used on the parent element of a button group to indicate that the contained buttons are a group of related controls. This attribute is used to improve the accessibility of the button group by providing additional information to assistive technologies, such as screen readers: essentially by telling screen readers that we're dealing with a group of buttons!

    • Alerts

  • Alerts in Bootstrap are components used to display a message or notification to the user. They inform the user of a successful or unsuccessful action, provide validation feedback, or can display other important information.
  • They use the alert base class, and are often combined with other semantic elements, such as "alter-danger" or "alert-primary"
  • An example from a chess player:

    Oh No!

    My queen!
  • The code used looks something like this: 
                        
                        <div class="alert alert-danger">
                            <h4 class="alter-heading">Oh No!</h4>
                            My queen!
                        </div>
  • Dismissing alerts involves a little Javascript, and thus begins a little look at something new!

    • Don't Dismiss This

  • Many people use the following entity code (of the times symbol: <span aria-hidden="true">×</span>
  • aria-hidden is used to tell a screen reader that the screen-reader doesn't need to read out part of a code
  • In addition to this, we can make it so we can click on the × symbol and make it fade out!
  • Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how: 
                        
                        <div class="alert alert-warning alert-dismissible fade show" role="alert">
                            <h4 class="alert-heading">Can you...</h4>
                            ... make me disappear?
                            <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="alert">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
  • It ONLY works well if Javascript has been used!