Bootstrap remember

xs> 0px to 576px
sm> 576  to 768px
md> 768 to 992px
lg> 992 to 1200px
xl> 1200 to greater

1. Bootstrap uses 12 grids
2. Columns uses Or greater approach. That is, if you wish to set the same widths for xs and sm, you only need to specify xs.
3. Bootstrap uses Mobile first approach and default is xs.
4. Bootstrap uses min-width media query.
5. When you write media query with custom CSS, you should follow desktop first that is use max-width.
6. Always follow the sequence container>row>col.
7. hidden-xs class will hide on extra small device.

Learning BS

1. Go to w3schools.com Bootstrap page and just see each menu name and try to understand what is it.
2. Read bootstrap Utilities from w3schools
3. See video from youtube (not very good)

Some Bootstrap grid system rules:

• Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
• Use rows to create horizontal groups of columns
• Content should be placed within columns, and only columns may be immediate children of rows
• Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
• Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
• Column widths are in percentage, so they are always fluid and sized relative to their parent element

Guides to create BS website

1. Build the main frame or design using only bootstrap.
   1. Copy code from w3schools.com for each module and put these code inside col.
   2. Copy templates from https://bootsnipp.com
2. After building the design using BS, you have to write your CSS to customize the design.

Labels: Bootstrap, Web development