A day in the life of a Junior Web Designer
Grid Layout
Both the components we've used so far stretch the full width of the page. This isn't always what you want - text that spans a full width of a page can be difficult to read on screen.
To solve this, we're going to use Bootstrap's grid.
Bootstrap pages are based on a 12 column grid.
Columns are holders for the components.
The number of columns an item covers is defined by a class: col-md-x where x is the number of columns.
Adjust the slider below to update the class name and see how that affects the item width.
1 12
<div class="col-md-1"></div>
Each row of columns needs to be wrapped in a div with the class 'row' (i.e. an opening <div class="row"> is needed before you set your columns and a closing </div> is needed when all of your columns have been defined). This stops your layout from re-flowing incorrectly if the columns covered don't add up to 12 (the 12 column grid is not full).
We want our text to cover two thirds of the page. Change the column class below to the cover the correct number of columns (col-md-?) and preview it.
Don't forget that a Bootstrap webpage is made up of 12 columns. If 6 columns covers half a page, how many columns will cover two-thirds of the page?
Something's not quite right. Try again.
Two thirds of 12 is 8, so you need to set your column class to 8. Your code should look like this:
The text is the now the right width but it would look better centred in the window.
Fortunately, Bootstrap can do this for us using an 'offset' class which takes this format: col-md-offset-x, where x is the number of columns you wish to offset by. To centre the column there is a simple formula: ([Number of columns in grid] - [Number of columns of thing we wish to centre])/2. So in this instance: (12-8)/2.
The offset class is used alongside the column class in this pattern: class="[number of columns class] [offset class]". For example: class="col-md-4 col-md-offset-4".
Use the slider below to set the right offset class to centre the column.
0 4
<div class="col-md-8 col-md-offset-0"></div>
Something's not quite right. Try again.
The calculation you need is ([Number of columns in grid] - [Number of columns of thing we wish to centre])/2.
There are 12 columns in the grid and we wish to centre 8, so the calculation is:
(12 - 8) ÷ 2 which is the same as 4 ÷ 2.
Outstanding. On to the next task.