Building with Bootstrap
Lesson 1 of 1
  1. 1
    CSS Frameworks
    Bootstrap is a popular CSS framework with prewritten CSS rules designed to help you build webpages faster.
    Start
  2. 2
    Connecting to Bootstrap
    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…
    Start
  3. 3
    On the Grid
    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…
    Start
  4. 4
    Header/Navigation
    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…
    Start
  5. 5
    The Jumbotron
    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…
    Start
  6. 6
    Supporting Content
    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…
    Start
  7. 7
    Footers
    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 …
    Start
  8. 8
    Bootstrap Generalizations
    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:
    Start

What you'll create

Portfolio projects that showcase your new skills

How you'll master it

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