Bootstrap Basics

• 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.

Grid system

Bootstrap organizes html contents into grids. Each row of the grid is called a row, each column a column. Each row has 12 columns. 

Make the website responsive

Use media query to query screen size and type. Specify the content parameter to change html content. 

Viewport is the visible area. Be sure to utilize the actual size of the phone, prevent rendering websites as desktop version on mobile device, not pretending it s desktop load. 

<meta name="viewport" content="width=Device-width, initial-scale=1.0">

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="row">
<div class="col-lg-3 col-sm-6"> This is a section.
</div>

<div class="col-lg-3 col-sm-6"> This is another section.
<div>
<div class="col-lg-3 col-sm-6"> This is a third section.
</div>
<div class="col-19-3 col-sm-6"> This is a fourth section.
</div>
</div>

CSS review

Pseudo class : 

selector:pseudo-class {

  property: value;

}

w3schools

example 

a:link {

  color: #FF0000;

}

but more importantly in modern css

::after

::before

are two important pseudo class

p::after { 

  content: " - add a foot note";

}