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 container class is used: … Inside…
  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