The Bootstrap 3 mobile-first grid system allows you to easily control how your website layout will be displayed on different types of devices.
This diagram provides an illustration of how the grid system works.
The grid system is a series of up-to 12 columns - that scale, contract, and re-position themselves based on the size of the devices screen or viewport.
The purpose of the grid based system is to layout the content of a web page for optimal viewing on any device.
Since the bootstrap grid system allows up to a maximum of 12 columns across the page, the sum of the grid column numbers must equate to 12. You will see an example of this in a moment.
Let's take a look at a two column layout to start with.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="col-lg-6 bg1">Sample Paragraph 1.</div>
<div class="col-lg-6 bg2">Sample Paragraph 2.</div>
First, we need to create a row that will contain our two columns.
Next we will create our columns:
The col-lg-6 refers to the type of column we want to apply.
Since we have two columns, each will need to span six columns across the 12 that are available in the Bootstrap grid system. For this reason we see the value six displayed after lg for each
Enter some text into each column.
Text: Sample Paragraph 1
Text: Sample Paragraph 2
Now that we have the columns setup, let's preview this file in our browser. As you can tell, we cannot see the columns, because the background color is transparent.
Let's create a background class to apply to both columns, so we can see the columns on the page.
Create a style sheet and input the following two classes:
Apply the classes to the columns.
Save the page and refresh your browser to see the columns.
With our columns clearly visible, we can see both are displayed in a single line, because our screen size accommodates it.
As we shrink our browser, you will notice that the right column is automatically pushed below the left column. Also, at smaller sizes, the columns stretch to the full width of the viewport.
This example illustrates how the grid system works to accommodate smaller screen sizes.