xs> 0px to 576px
sm> 576 to 768px
md> 768 to 992px
lg> 992 to 1200px
xl> 1200 to greater
Remember:
- Bootstrap uses 12 grids
- 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.
- Bootstrap uses Mobile first approach and default is xs.
- Bootstrap uses min-width media query.
- When you write media query with custom CSS, you should follow desktop first that is use max-width.
- Always follow the sequence container>row>col.
- hidden-xs class will hide on extra small device.
Learning BS
- Go to w3schools.com Bootstrap page and just see each menu name and try to understand what is it.
- Read bootstrap Utilities from w3schools
- 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
- Build the main frame or design using only bootstrap.
- Copy code from w3schools.com for each module and put these code inside col.
- Copy templates from https://bootsnipp.com
- After building the design using BS, you have to write your CSS to customize the design.
Labels: Bootstrap, Web development