[Bootstrap] Bootstrap - Basics
Start Bootstrap and More!
In last Blog, you were able to learn about background, history, and basic idea of Bootstrap. In this blog, we will learn about how to start Bootstrap and basic functions of Bootstrap.
Start Bootstrap
To start Bootstrap, there is two choice to start:
- Start from the scratch
- Start with the free templates
Start from scratch:
Download Bootstrap from the website www.getbootstrap.com . They are simply providing pre-defined CSS and JavaScript, so you can create your own HTML5 file and use id and classes to add styles. Picture below is showing the tags that you must use to call CSS and JavaScript to your HTML5.
<link> tag for loading the CSS (Bootstrap Styling), <script> to load additional JavaScript capabilities, and <meta> tag for smaller devices which have a viewport.
To use each pre-defined elements from CSS, you need to look through CSS file that which id and/or classes were used to define the element.
Start with the free templates:
As mentioned in last blog, you can get free Bootstrap templates online (More like, “IT’S EVERYWHERE!!!”). Those templates are more advanced with their own additional CSS, JavaScript, already written and functioning HTML5 files, and/or with jQuery.
Once you start Bootstrap with either way, now you need to know basic functions to utilize Bootstrap.
Basic Function: Grid System
Grid system is the key element for the responsive web. Grid system controls the size of content depending on the size of the screen.
Columns
Bootstrap provides 12 columns in one row maximum. If there is more than 12 columns in one row, the excess column belongs to next row. 12 column can be made with any combination. Such as:
Or Something like this:
All you need to remember is to make 12 columns total in one row with any combination.
Classes
There are 4 different classes (lg, md, sm, xs) in Bootstrap’s grid system. This classes are responsible for the size of column in different screen size. “Lg“ class is for the screen size of 1170 pixels, “md” for 970 pixels, “sm” for 750 pixels, and “xs” for smaller than 750 pixels.
To easier way to remember, “lg” and “md” for desktop and laptop computer screen, “sm” for tablet, and “xs” for smartphones. And these classes will enable you to control grid behavior on different devices.
Examples
Using grid system with the code will look like something like this:
In example, first content will have size of 8 column in desktop or laptop screen and 12 column in smartphone screen. Second content will have size of 4 columns in desktop or laptop screen and 12 columns in smartphone screen.
One thing you should remember in this example is, they will be in one row in desktop size screen, but since both contents are defined to have 12 column size in smartphone screen (col-xs-12), there will be total of two row (each content will have one row) when they are in smartphone size of screen.
Good Website to Know
Simple Bootstrap Example — https://startbootstrap.com/
Grid system code generator — http://shoelace.io/
