Bootstrap is the most popular front-end framework for faster and easier web development. It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins. Bootstrap also gives you the ability to easily create responsive designs that automatically adjust themselves to look good on all devices, from small phones to large desktops.
Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype so you need to include the HTML5 doctype at the beginning of the page along with the correct character set.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head>
Bootstrap is designed to be responsive to mobile devices. To ensure proper rendering and touch zooming, add the following tag inside the HTML head element.
<meta name="viewport" content="width=device-width, initial-scale=1">
Bootstrap has it's own wrapper to wrap site contents.
The container class provides a responsive fixed width container
The container-fluid class provides a full width container spanning the entire width of the viewport.
You cannot put a container inside another container.
Bootstrap's grid system divides the total width of the page into 12 equal columns. You can group the columns together to create wider columns or use them individually. This grid system is responsive and the columns will re-arrange automatically depending upon the screen size.
| col 1 | col 1 | col 1 | col 1 | col 1 | col 1 | col 1 | col 1 | col 1 | col 1 | col 1 | col 1 |
| col 2 | col 2 | col 2 | col 2 | col 2 | col 2 | ||||||
| col 3 | col 3 | col 3 | col 3 | ||||||||
| col 4 | col 4 | col 4 | |||||||||
| col 6 | col 6 | ||||||||||
| col 12 | |||||||||||
The Bootstrap grid system has four classes
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
The classes above can be combined to create more dynamic and flexible layouts.
1. Create a wrapper.
2. Create a row to nullify the padding property of the wrapper.
3. Create a div of xs or sm or md or lg as needed. Personally, I prefer md as it works best for all devices.
4. The total number of cols value inside each row must add up to 12.
<div class="container-fluid"> <div class="row"> <div class="col-*-*"> </div> </div> <div class="row"> <div class="col-md-3"> </div> <div class="col-md-7"> </div> <div class="col-md-2"> </div> </div> <div class="row">...</div> </div>
Leave a comment