Building with Bootstrap

Learn to create a webpage quickly using the Twitter Bootstrap library.

Lesson 1 of 1

1
Bootstrap is a popular CSS framework with prewritten CSS rules designed to help you build webpages faster.
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
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
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
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
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
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
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

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