Building with Bootstrap
Lesson 1 of 1
  1. 1

    Bootstrap is a popular CSS framework with prewritten CSS rules designed to help you build webpages faster.

  2. 2

    Before Bootstrap can work for us, we need to link to it. In earlier lessons, we linked only to main.css. Now, in addition to main.css, we will link to a URL that hosts Bootstrap. The HT…

  3. 3

    One of the reasons Bootstrap and frameworks like it are so popular is because they offer grids. A grid makes it possible to organize HTML elements using preconfigured columns. Using a grid, you…

  4. 4

    Let’s use Bootstrap’s grid to create a simple header with navbar. In the example code below, an HTML header element with Bootstrap’s predefined […] class is used: […] Inside the …

  5. 5

    In addition to a header/navigation, many websites have a large showcase area featuring important content. Bootstrap refers to this as a jumbotron. Below is an example implementation of a jumbotro…

  6. 6

    Many websites have a supporting content area. Supporting content can be arranged using Bootstrap’s grid. Below is an example implementation of a supporting content area. First, an HTML section el…

  7. 7

    Congratulations! You’ve made it to the bottom of the webpage: the footer! Footers display copyright information, social media links, and sometimes, site navigation. Below is one possible …

  8. 8

    You just built an impressive webpage using the Bootstrap CSS framework. Nice work! Let’s take a moment to review the core concepts learned in this lesson:

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo