Aug 10, 2015

When working with Bootstrap it is good practice to utilise the grid system for the positioning of your controls. This grid is 12 columns wide at any point in time doesn’t matter in what element you are; it will always divide the parent element in 12 equal columns. This grid is adaptable depending on the resolution of the screen.

To give you an example of the grid the following example creates all twelve columns in a div element. Note that this spans the width of the parent element, in this case the div element.

Please take note that in this example we used the class called “col-md-1”, this uses the column class from the bootstrap style and assigns it a width of one column. This is flexible to meet your requirements.

For the next example I will create 4 columns of equal size across the whole page, to do this you divide the 12 column grid with the amount of columns you want (12 /4 = 3). This then gives you the size of the columns you need to create.

Each element on your page will have the grid system within it. We have full control over these columns and can even nest the columns within a child column.

For example in the following code I have two equal columns spanning the page, I then take the column on the left and divide it into 6 equal columns.

You are not required to use the full grid; you can specify only the columns that you need. I can easily create columns that meet certain size requirement and still not fill in the whole element.

The following example creates columns on the right side of the page and has three columns nested within it containing different sizes.

There is a lot more flexibility not mentioned here, but you can start experimenting with combinations to see different outcomes and use the layout that fits your requirements.