1: Introduction to Bootstrap


What is Bootstrap?

As the most popular CSS framework available, Bootstrap offers design templates for typography, forms, buttons, navigation, and other helpful components used in HTML documents. Freelance developers commonly use Bootstrap to rapidly build websites, however large tech companies such as Spotify, Twitter, and Lyft all use the framework as well. Bootstrap is also responsive, meaning it has built-in features to make websites mobile-friendly.

Free and open-source, this CSS framework can be downloaded into your project or easily added to the head element of an HTML document, just like adding your own custom CSS stylesheet. For this lesson, we will go over how to add and implement Bootstrap in a project for later usage.

 

How do I use Bootstrap?

adding Bootstrap to your project

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Given the Bootstrap CSS framework is actually a large stylesheet containing CSS declarations, we can add Bootstrap via a link in the head element of our HTML document.  This link will connect to a network of servers containing the CSS code.  Together, this network of servers is called a CDN or content delivery network. Like a link to any other stylesheet, a href to the location of the stylesheet is required. The integrity attribute prevents the CDN from delivering any additional content created by a third-party attacker while the crossorigin attribute allows connecting to the CDN without exchanging user credentials. This link can also be found on the official Bootstrap website: https://getbootstrap.com/.

Using Bootstrap



Below is the Bootstrap start template. The meta tags located in the head element are default Bootstrap settings and help internet browsers properly display web pages.

  • meta charset="utf-8" determines the character set of the HTML document and allows most characters, punctuation marks and symbols to render properly
  • meta name="viewport" provides the browser with instructions on resizing the web page content for different sized devices

  • the division elements have class attributes with some basic Bootstrap examples that we will go over

The optional Javascript (JS) is in the body element and currently commented out. The three JS CDNs are not required for stylistic components but the scripts do add functionality to dynamic (moving) Bootstrap components.








2: Bootstrap layout


Bootstrap simplifies rendering a dynamic web page with custom grid and container systems. HTML elements are nested in Bootstrap division containers, rows, and columns to create an instantly responsive design.

 

Containers

container

<!DOCTYPE html>
<html>
    <body>
      <div class="container">
         <h3>About Us</h3>
         <p>Our team specializes in providing you with the best tools and services available.</p>
      </div>
    </body>
</html>

Bootstrap container is added to the division tag class attribute to automatically align, pad, and shift the content within them. They are essentially create improved division elements that section off the different parts of an HTML document. Headings, paragraphs, images, and any other content are placed in containers.

 

container-fluid

<!DOCTYPE html>
<html>
    <body>
      <div class="container-fluid" style=“background-color:gray”>
         <h3>About Us</h3>
         <p>Our team specializes in providing you with the best tools and services available.</p>
      </div>
    </body>
</html>

Bootstrap has another container class called container-fluid that stretches the entire width of the screen or width of the parent element holding it. This container is great for adding a background color to a particular part of the website. Specify add the background color as an inline CSS declaration after the container-fluid class attribute.

 

Grid system

Bootstrap 12 column grid system

1

2

3

4

5

6

7

8

9

10

11

12

Bootstrap operates on a responsive 12 column grid system. Each HTML element can occupy anywhere from 1 to 12 columns. This design allows elements to be placed in the same row and dynamically move based on their column sizes.

 

rows and columns

<div class="container">
     <div class="row">
          <div class="col-6">
             <h4>Column 1<h4>
             <p>This column takes up half of the 12 columns in Bootstrap. Text, images and other Bootstrap components can be placed within the column.<p>
          </div>
          <div class="col-6">
             <h4>Column 2<h4>
             <p>This column takes up the other half of the 12 columns in Bootstrap. Text, images and other Bootstrap components can also be placed within the column.<p>
          </div>
     </div>
</div>

Column 1

This column takes up half of the 12 columns in Bootstrap. Text, images and other Bootstrap components can be placed within the column.

Column 2

This column takes up the other half of the 12 columns in Bootstrap. Text, images and other Bootstrap components can also be placed within the column.

6 of 12

6 of 12

The grid system uses columns in rows. First a division element with a container class is created. Then a new division element with a class attribute called row is nested in the container division. Finally, individual columns, col, are nested within the row division.

 

columns and breakpoints

<div class="container">
     <div class="row">
          <div class="col-sm-12 col-md-12 col-lg-4">
                <h4>Column 1<h4>
                <p>This is a responsive column.<p>
          </div>
          <div class="col-sm-12 col-md-12 col-lg-4">
                <h4>Column 2<h4>
                <p>This is also a responsive column.<p>
          </div>
          <div class="col-sm-12 col-md-12 col-lg-4">
                <h4>Column 3<h4>
                <p>This is another responsive column.<p>
          </div>
     </div>
</div>

Column 1

This is a responsive column it only occupies 4 of 12 Bootstrap columns in a large screen. But in a medium or small screen, it takes up an entire row or all 12 columns.

Column 2

This is also a responsive column and it only occupies 4 of 12 Bootstrap columns in a large screen. But in a medium or small screen, it takes up an entire row or all 12 columns.

Column 3

This is another responsive column and it occupies the remaining 4 of 12 Bootstrap columns in a large screen. In a medium or small screen, it takes up an entire row or all 12 columns.

4 of 12 (col-lg)
12 of 12 (col-md)(col-sm)

4 of 12 (col-lg)
12 of 12 (col-md)(col-sm)

4 of 12 (col-lg)
12 of 12 (col-md)(col-sm)

Bootstrap column sizes can shift at different viewpoints. At a smaller viewpoint, the columns can be stacked on top of one another instead of keeping them side-by-side. Breakpoints can be specified for small (col-sm), medium (col-md), and large viewpoints (col-lg) followed by the number of columns it will occupy in that view. Change the size of your browser window to see it in action.



Time to practice using Bootstrap containers.

  • add container to the class attribute of the division element in the About Section
  • add container-fluid to the class attribute of the division element in the Contact Section
  • add style="background-color:#343A40; color:#F8F9FA" to the division element after the class attribute in the Contact Section



Check code

Now let's add some rows and columns to a container. 

  • find the 1st division element and add a container to the class attribute
  • find the 2nd division element and place a row in the class attribute
  • find the division element containing the About Section and add col-6 to the class attribute
  • find the division element containing the Contact Section and add col-6 to the class attribute



Check code





3: Bootstrap utilities


Bootstrap utilities are class attributes used to quickly style and position HTML elements. Text formatting, color, background color, and even padding and margins can be handled using these custom utilities.

 

Using Bootstrap utilities

contextual text class

<p class="text-primary">Blue text</p>
<p class="text-secondary">Gray text</p>
<p class="text-success">Green text</p>
<p class="text-danger">Red text</p>
<p class="text-warning">Yellow text</p>
<p class="text-info">Teal text</p>
<p class="text-light bg-dark">Light text</p>
<p class="text-dark">Dark text</p>
<p class="text-muted">Muted text</p>
<p class="text-white bg-dark">White text</p>

Blue text

Gray text

Green text

Red text

Yellow text

Teal text

Light text

Dark text

Muted text

White text

There are ten contextual text classes, each with their own unique color specified within the class attribute.

 

background color class

<div class="bg-primary text-white">Blue background</div>
<div class="bg-secondary text-white">Gray background</div>
<div class="bg-success text-white">Green background</div>
<div class="bg-danger text-white">Red background</div>
<div class="bg-warning text-dark">Yellow background</div>
<div class="bg-info text-white">Teal background</div>
<div class="bg-light text-dark">Light background</div>
<div class="bg-dark text-white">Dark background</div>
<div class="bg-white text-dark">White background</div>
Blue background
Gray background
Green background
Red background
Yellow background
Teal background
Light background
Dark background
White background

The same ten colors used for contextual text can also be applied as background colors.

 

text alignment

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

Left aligned text.

Center aligned text.

Right aligned text.

Bootstrap also has preset text alignment classes. Text can be aligned to the left, right or center.

 

text alignment at different viewpoints

<p class="text-center text-md-left">Left aligned text on viewpoints larger than medium (md). Centered text on all smaller viewpoints. </p>

Left aligned text on viewpoints larger than medium (md). Centered text on all smaller viewpoints.

Bootstrap even allows different text alignment classes to be called at different viewpoints (smmdlgxl). Dynamic text alignment can improve device compatibility and overall appearance on smaller devices. Change the side of your browser to see it in action.

 

font weight and italics

<p class="font-weight-bold">Bold text helps to emphasis key words or phrases on the page.</p>
<p class="font-weight-light">Light weight text helps separate paragraph text from title or subtitle paragraphs.</p>
<p class="font-italic">Italic text helps alert the user to a particular section of text.</p>

Bold text helps to emphasis key words or phrases on the page.

Light weight text helps separate paragraph text from title or subtitle paragraphs.

Italic text helps alert the user to a particular section of text.

Font weights and text formatting can also be changed using Bootstrap class attributes.

 

fixed top

<div class="fixed-top">...</div>

Bootstrap positioning class fixed-top places any element at the top of the page, from corner to corner. The element remains at the top of the page even after scrolling down. This class attribute works well for an always present navigation bar.

 

sticky top

<div class="sticky-top">...</div>

The class sticky-top keeps an element at the top of the viewport but only after you scroll past it. This class attribute works well for two navigation bars, as we will see later.

 

Using Bootstrap padding and margin

padding

<p style="p-1">This is padding on all sides.</p>

<p style="pt-1">This is padding-top.</p>
<p style="pb-1">This is padding-bottom.</p>
<p style="pr-1">This is padding-right.</p>
<p style="pl-1">This is padding-left.</p>

<p style="px-1">This is padding for the left and right.</p>
<p style="py-1">This is padding for the top and bottom.</p>

Bootstrap handles CSS padding with class attributes based on the abbreviation of the original CSS properties padding (p), padding-top (pt), padding-bottom (pb), padding-right (pr), and padding-left (pl). The class attribute px applies to padding-left and padding-right while py applies to padding-top and padding-bottom. The number following the abbreviation is based on rems with p-0 being no padding and p-5 being three times the original padding.

 

margins

<p style="m-1">This is a margin on all sides.</p>

<p style="mt-1">This is margin-top.</p>
<p style="mb-1">This is margin-bottom.</p>
<p style="mr-1">This is margin-right.</p>
<p style="ml-1">This is margin-left.</p>

<p style="mx-1">This is a margin for the left and right.</p>
<p style="my-1">This is a margin for the top and bottom.</p>

Bootstrap handles CSS margins the same way as padding. Margin (m), margin-top (mt), margin-bottom (mb), margin-right (mr), and margin-left (ml) are all handled with abbreviations. The class attribute mx applies to margin-left and margin-right while my applies to margin-top and margin-bottom. Margins are also sized based on rems but margin also as an auto size that automatically places even margins with the viewpoint.



Let's put the Bootstrap utilities to the test. 

  • add text-dark text-center to the h3 class attribute in the About Section
  • add text-muted font-weight-bold to the p class attribute in the About Section
  • add bg-dark text-light to the div class attribute containing the Contact Section
  • add text-center to the h3 class attribute in the Contact Section
  • add font-weight-light to the p class attribute in the Contact Section



Check code

Now let's use some of the Bootstrap margin and padding class attributes.

  • add mt-5 to both div elements
  • add pl-3 to both h3 elements
  • add p-3 to both p elements



Check code





4: Bootstrap components


Bootstrap components are made for the specific purpose of copying and pasting them into your HTML document. Just add a component code to the body element and you're done. The component code will take on the exact style and color of code specified in the documentation.

 

Using Bootstrap components

display headings

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Display 1

Display 2

Display 3

Display 4

The display heading class attributes are unique to Bootstrap and act as another way to define the headings of a web page. These headings are much larger than the traditional HTML headings and work well for welcome or call-to-action (CTA) text.

 

buttons

<a class="btn btn-primary" href="">Blue button</a>
<a class="btn btn-secondary" href="">Gray button</a>
<a class="btn btn-success" href="">Green button</a>
<a class="btn btn-danger" href="">Red button</a>
<a class="btn btn-warning" href="">Yellow button</a>
<a class="btn btn-info" href="">Teal button</a>
<a class="btn btn-light" href="">Light button</a>
<a class="btn btn-dark" href="">Dark button</a>

Bootstrap buttons are stylized links. There are eight different colors provided. Each button color has a designated class attribute name. The class attribute btn specifies the link a button and the btn-name determines the color of the button.

 

cards

<div class="card" style="width: 18rem;">
	<img src="https://d2gdtie5ivbdow.cloudfront.net/work.jpg" class="card-img-top" alt="work">
	<div class="card-body">
		<h5 class="card-title">Services</h5>
		<p class="card-text">This card can be used to display one of the multiple services your website or company provides. Add multiple cards in their own columns to create a dynamic set of cards.</p>
		<a href="" class="btn btn-primary">Learn more</a>
	</div>
</div>
work
Services

This card can be used to display one of the multiple services your website or company provides. Add multiple cards in their own columns to create a dynamic set of cards.

Learn more

Bootstrap has a card component that works well for separating small amounts of content into visible boxes. Cards are separated into three main sections: card-body, card-title, and card-text. Images and buttons can also be added to the cards.

 

navbar

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <a class="navbar-brand" href="">Company name</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="">About Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">Contact Us</a>
        </li>
      </ul>
    </div>
</nav>

 

Bootstrap also has a navigation bar that can be copied and pasted into your code. The navbar can display a company logo, company name, and a navigation menu all optimized for mobile compatibility. For mobile compatibility, the three optional Javascript CNDs are required.



Let's add some Bootstrap components.

  • uncomment the 3 Javascript CDNs at the bottom of the HTML document by deleting the <!-- --> marks
  • copy the code listed in the above navbar section of this lesson and paste it under the Navbar Section comment
  • add mt-5 to each div class attribute for the Welcome, Services and Contact Sections
  • add display-4 to the h1 class attribute in the Welcome Section
  • copy the code listed in the cards section of this lesson and paste it in the container under the Services Section



Check code





5: Customizing Bootstrap


Bootstrap CSS framework is so powerful that it may seem like learning traditional CSS was unnecessary; however, customizing Bootstrap to your preferred colors and styles requires a general understanding of CSS. Any Bootstrap component can be overridden by your own custom CSS. For example, Bootstrap buttons can be customized. As stated earlier, Bootstrap has only eight colors for buttons. So what if you want to make a custom colored button? This can be accomplished with some basic CSS.

 

Creating custom CSS using Bootstrap

custom Bootstrap button

 <a href="" class="btn btn-custom">Custom button</a>

This is an example of a custom Bootstrap button. The new button is called btn-custom.

 

custom Bootstrap button CSS

<style>
    .btn-custom, .btn-custom:active, .btn-custom:visited {
        background-color: #6626AA;
        border: #331058 1px solid;
        color: #FFFF;
        border-radius: 30px;
    }

    .btn-custom:hover {
        background-color:#331058;
    }
</style>

The button has a background color, border color, text color and the border radius. All of these are customizable. Add the custom class attribute btn-custom to the style element but also added btn-custom:active, btn-custom:visited, btn-custom:hover so the button color will change when it is visited, clicked or hovered over.

 

Moving forward with Bootstrap

We have just covered a very small portion of Bootstrap in this lesson. More features and customization can be added to all of the components listed above.  Look through the Bootstrap documentation to learn more about the features not mentioned in this tutorial.



Let's create a custom class attribute for a Bootstrap button.

  • add btn btn-orange to the anchor class attribute in the Welcome Section
  • then go down to the style element tag and add the following code:

.btn-orange {background-color: #F4511E; border: #F4511E; border-radius: 5px}

.btn-orange:active .btn-orange:visted {background-color: #F4511E; border: #F4511E; border-radius: 5px}

.btn-orange:hover {background-color: #D53B0A}



Check code



Quiz Questions


1. How many columns are in Bootstrap's grid system?


2. Which class attribute will change text color to green?


3. What is the purpose of the "container-fluid" attribute?


4. What does the "mx-3" attribute signify?


Next lesson


Check out the comments and debug buttons if you get stuck.