By default, HTML elements are arranged in two ways:
Block elements always start on a new line. Examples of block elements are
Inline Elements are displayed in a line. Examples of inline elements are
However, these two options are not enough to create a proper layout for a web page.
Most websites either have a layout with two columns ...
... or they have a layout with three columns.
To create a layout like this without a CSS framework like Bootstrap would be quite a challenge. With Bootstrap it gets much easier.
In addition, the layout in Bootstrap is automatically adjusted to the screen size (so-called Responsive Layout). For example, we can specify that the columns should be displayed below each other on small screens, because they would not fit if displayed horizontally.
The Bootstrap Grid
Bootstrap contains a 12-column grid system for the layout (see documentation of the Bootstrap grid). A grid can be thought of as an invisible table with twelve columns.
We can define our own columns by specifying how many wide they should be inside the Bootstrap grid.
Example for a Two-Column Layout
In this example, we define a left column with a width of 4 and a right column with a width of 8. On the left we could have a navigation while on the right we would put the page's content.
In the HTML code of this layout would look like the following:
<div class="container"> <div class="row"> <div class="col-sm-4"> Content of the left column. </div> <div class="col-sm-8"> Content of the right column. </div> </div> </div>
- The grid should always be in a
containerclass. (To use a full width container, spanning the entire width of the viewport use the
- Inside the container is a
row. We this we define a row in the grid.
- Inside a row we define the columns with the various
Every Bootstrap column class contains an indication of the screen size. There are four scree sizes:
col-xs- Column for extra small devices (smartphones, lower than 768px)
col-sm- Column for small devices (tablets, 768px and up)
col-md- Column for medium devices (desktops, 992px and up)
col-lg- Column for large devices (large desktops, 1200px and up)
col-sm-4 in our example above thus means, that a column of width 4 will be displayed on screens that have at least the size of a tablet.
On all screens that are smaller all columns will automatically be stacked vertically.
This is how our example for a two-column layout would look like on a smartphone:
Example for a Three-Column Layout
In this example, we define three columns.
In HTML code this layout would look like this:
<div class="container"> <div class="row"> <div class="col-sm-3"> Content of the left column. </div> <div class="col-sm-6"> Content of the middle column. </div> <div class="col-sm-3"> Content of the right column. </div> </div> </div>
Applying it to our Portfolio Blog
In the HTML & CSS Tutorial we developed a portfolio with a blog page. The following example shows a two-column layout for the blog page. The left column contains the list of blog entries. In the right column, we now have some space for things like a list of links.
<div class="container"> <h1 class="title">Blog</h1> <p>I write about things I encounter while learning web programming.</p> <div class="row"> <div class="col-sm-8"> <h2>Blog Entries</h2> <ul> <li>More entries will follow...</li> <li><a href="second-entry/">Second Entry</a></li> <li><a href="first-entry/">First Entry</a></li> </ul> </div> <div class="col-sm-3 col-sm-offset-1"> <h3>Links</h3> <p> Have a look at the following blogs of my friends: </p> <ul class="list-unstyled"> <li><a href="#">Blog 1</a></li> <li><a href="#">Blog 2</a></li> <li><a href="#">Blog 3</a></li> <li><a href="#">Blog 4</a></li> </ul> </div> </div> </div>
- In the right column I've added a second CSS class called
col-sm-offset-1. This causes that the right to be moved one position to the right. Thus we get a slightly larger distance between the two columns.
- Test the layout by resizing your browser window.
- The class
list-unstyledremoves the bullet points of the list items (see Bootstrap Lists).
More Infos on Bootstrap Layout
Read the section about the Grid System in the Bootstrap documentation.
An extensive and very good explanation about how the Bootstrap grid system works can be found in The Subtle Magic Behind Why the Bootstrap 3 Grid Works.