The bootstrap three 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 reposition themselves based
on the size of the devices screen or viewport.
We can see in Figure 1 the viewpoint the viewport size is large.
It accommodates for large columns in a single row in figure to the screen is small it accommodates three
of the columns in a single row bigger three and four are mobile devices the tablets in figure 3 can
accommodate two columns and the phone in figure 4 can accommodate a single column in one row.
The purpose of the grid based system is to lay out 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
great column numbers must equate to 12.
You'll see an example of this in a moment.
Let's take a look at a two column layout to start with.
First we need to create a row that will contain our two columns.
This row will be nested within our container
next will create our columns
so there's a first call them or copy and paste the second
here.
The call dash LG dash 6 refers to the type of column we want to apply the seal L is an abbreviation
for column.
LG is the column size.
This value depends on the device your web page will be viewed on.
LG is used for large desktop screens M.D. is for smaller computer screens such as laptops as M is best
suited for handheld devices such as tablets and phones
since we have two columns each will need to spend six columns across the twelve better available in
the bootstrap grid system.
For this reason we see the value 6 displayed after LG for each div now enter some text into each column
now that we have the columns set up with text content.
Let's preview this file in our web browser.
As you can tell we can't 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.
So go ahead and create a style sheet in your head take
called the First Class B
and give it a background of cyan
Sorry we'll just change the BJP to BJP one and give the second class the name of BJP to
the background of yellow
now apply these classes to our columns.
So column one will have the science background in column two will have the yellow background
now save the file and refresh your browser
now are columns are visible.
You can see the first one with cyan and the second with yellow
we can see that both are displayed in a single line because our screen size accommodates it.
Let's see what happens is we shrink our browser so if we were on any other device a mobile handheld
tablet our screen size would be a lot smaller just observe what's happening to the right column when
the viewport gets to as we shrink the size of the viewport the right column is force is forced to the
to the bottom of the left column and this is an example of how the grid system works to accommodate
smaller screen sizes
in the next lesson we'll be working with three column layouts.