[  Bootstrap v.5  ][  Bootstrap v.4.4  ][  Grid & Breakpoints  ]

Bootstrap v.5

Start a new Bootstrap project from scratch: https://github.com/twbs/bootstrap-npm-starter#usage

1. Documentation : https://getbootstrap.com/docs/5.1/
2. File structure : https://getbootstrap.com/docs/5.1/customize/sass/#file-structure
3. Grid breakpoints : https://getbootstrap.com/docs/5.1/layout/breakpoints
4. Grid breakpoints medias queries : https://getbootstrap.com/docs/5.1/layout/breakpoints/#media-queries

Whats new and worth mentioning

One more default breakpoints

Available breakpoints values now includes a xxl sets to 1400px by default for those who loads the compiled CSS from the CDN.

CSS variables

https://getbootstrap.com/docs/5.1/customize/css-variables/

Starting from v5 all Bootstrap custom properties are prefixed with bs- to avoid conflicts with third party CSS.

var(--bs-primary), var(--bs-secondary), var(--bs-danger), var(--bs-info), var(--bs-success), var(--bs-warning), var(--bs-white), var(--bs-light), var(--bs-gray), var(--bs-gray-dark), var(--bs-dark), var(--bs-blue), var(--bs-indigo), var(--bs-purple), var(--bs-pink), var(--bs-red), var(--bs-orange), var(--bs-yellow), var(--bs-green), var(--bs-teal), var(--bs-cyan).

Utility classes

https://getbootstrap.com/docs/5.1/utilities/

1. Background
2. Borders
3. Colors
4. Display
5. Flex
   1. d-flex, d-md-flex, d-inline-flex.
   2. flex-row, flex-row-reverse, flex-column, flex-md-column.
   3. justify-content-center, justify-content-md-start.
   4. align-content-around, align-content-stretch.
   5. align-items-center, align-items-stretch.
   6. align-self-stretch.
   7. flex-fill.
   8. flex-grow-0, flex-md-shrink-1.
   9. flex-nowrap, flex-wrap-reverse.
   10. order-first, order-md-last, order-xl-0.
6. Float
7. Interactions
8. Opacity
9. Overflow
10. Position
11. Shadows
12. Sizing
13. Spacing
14. Text
15. Vertical-align
16. Visibility