Tech in T: depth + breadth‎ > ‎Tools - Business‎ > ‎HTML‎ > ‎CSS‎ > ‎

Bootstrap



Bootstrap is based on Flexbox.
- When we describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column. 
- This can be contrasted with the two-dimensional model of CSS Grid Layout, which controls columns and rows together.
- we have .container and .item
.container {
  display: flex; /* or inline-flex */
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
}
Grid system
mobile-first flexbox grid

twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

containers, rows, and columns
<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>
Breakpoints
customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.
apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices.
sm, md, lg, xl, xxl
The breakpoint sizes are customizable
    

The Bootstrap 4 grid system has five classes:

  • .col- (extra small devices - screen width less than 576px)
  • .col-sm- (small devices - screen width equal to or greater than 576px)
  • .col-md- (medium devices - screen width equal to or greater than 768px)
  • .col-lg- (large devices - screen width equal to or greater than 992px)
  • .col-xl- (xlarge devices - screen width equal to or greater than 1200px)

The classes above can be combined to create more dynamic and flexible layouts.

Tip: Each class scales up, so if you wish to set the same widths for sm and md, you only need to specify sm.

.col-*-* class: The first star (*) represents the responsiveness: sm, md, lg or xl, while the second star represents a number, which should add up to 12 for each row.











Comments