Bootstrap is an external library that has a 'mobile first' approach to help make websites mobile responsive by using a mixture of HTML, CSS and JS.
To use bootstrap on your website you first have to link the external CSS style sheet and JS script page.
The needed links can be found on the bootstrap website.
The link tags are placed within your head element so that the user cannot see them and they are loaded first.
The script tags are placed before the end of your body element (/body).
Below are some examples of bootstrap that I find most useful and how they work. To find out more click the link in the footer to take you to the official website.
Bootstrap uses its unique 'grid system' to make the website mobile responsive.
A combination of rows, columns and containers help with the websites layout and alignment.
The grid has 12 columns that the row is a wrapper for, by defining the size of the columns in the classes you are able to make it mobile responsive
The image shows an example of a grid with one row and three columns. The first div/column takes up 2/12, the second div/column takes up 6/12 and the last div/column takes up 4/12.
Bootstrap has different breaking points for different view port widths, that alter how its looks for each device.
.col - the postioning will the the same for any device
.col-sm - for viewports >= 576px.
.col-md - for viewports >=768px
.col-lg - for viewports >= 992px
.col-xl - for viewports >= 1200px
col-md-3
col-md-5
col-md-4
This example shows a grid with a '.col-md' breaking point. When the viewport is 768px or larger, the grid will stay on the one line, when the viewport is made smaller than 768px the three columns get pushed onto seperate lines.
I have used css to style the grid, there would not usually be the margin in the smaller viewports.
This whole wesbite is made using grids with differnt viewport breaking points and nested grids within those grids. The best way to learn is trial and error, one day it will just click.
Bootstrap Navigations bars:
They are a simple and easy to use mobile responsive nav bar. As with grid, the developer can set the breaking point for when the navbar collapses. NavBar comes with a bunch of components, it is just a case of deciding what you want, finding it on bootstrap and externally styling on your CSS file to match the website you are builing.
The 'Navbar Example' shows a nav bar that collapses at the md i.e. 768px breaking point and shows a toggler button. The code is copied off the bootstrap webiste and can then be styled however you like. Try it out, all the links work!
