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