Building with Bootstrap

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

Start

Lesson 1 of 1

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