- Bootstrap is a front end framework used to quickly design, organize and beautify a modern website. It generates css fast for common front end patterns and UI elements
- Each UI element or group of elements is called a component
- Horizontal containers are called row s
- Vertical containers are called col s , short for column, can be used in designing grid system
- Bootstrap allows you to focus more on the html file rather than CSS file, write a bit less CSS
- And no need to reinvent the wheel : writing common UIs and interactions from scratch
- Concept : bootstrap requires using specific class names to generate desired design
- Pro tip: use margin to organize layout, example: can do margin left auto to push things all the way to the right mt-3 margin top 3
- Pro tip : use chrome inspector on Bootstrap sample and tutorial page to see what class, and configurations are used.
Make the website responsive
Bootstrap can detect screen size and label it as lg for large, sm for small. If we use the lg and sm parameter in the class of the html element, we can specify how much space a grid column will take if the screen is small versus large (based on screen size).
<div class="col-lg-3 col-sm-6"> This is a section.
<div class="col-lg-3 col-sm-6"> This is another section.
<div class="col-lg-3 col-sm-6"> This is a third section.
<div class="col-19-3 col-sm-6"> This is a fourth section.