Here we disscuss rows & columns, they must be align and well order, here we see the example how we can use theme
Vertical alignment
To make column vertical align we use the align-*
Note: To see the output in following examples set the height of rows and border of columns
align-items-start
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
align-items-center
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
align-items-end
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
Horizontally Align
To make column horizontally align we use the justify-content-* property
justify-content-start
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
justify-content-between
<div class="container">
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
justify-content-end
<div class="container">
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Column wrapping
Since bootstrap divided the grid/column system in two 12 parts so sum of call column must be 12, if sum increase the 12 it comes to new line
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 So i will goes to new line.</div>
</div>
</div>
Column breaks
Bootstrap uses all devices break points in its column as col-*, col-sm-*, col-md-*, col-lg-*, col-xl-*, col-xxl-*
<div class="container">
<div class="row">
<!-- break at small devices -->
<div class="col-6 col-sm-3">.col-6 on extra samll devices .col-sm-3 on small and all large devices</div>
<!-- break at medium devices -->
<div class="col-6 col-sm-3">.col-6 on extra samll and small devices .col-md-3 on medium and all large devices</div>
</div>
</div>
Reordering
We can reorder bootstrap column on different devices. Bootstrap also support order break points as order-* order-sm*, order-md-*, order-lg-*, order-xl-*, order-xxl-*
* represent the number from 1 to 6.
you can also use order-first and order-last
<div class="container">
<div class="row">
<div class="col">
First DOM, no order applied
</div>
<div class="col order-2">
Second DOM, with a larger order <!-- it print after thrid dom -->
</div>
<div class="col order-1">
Third DOM, with an order of 1
</div>
</div>
</div>
Offsetting
Move columns to the right away using empty div/space
<div class="container">
<div class="row">
<div class="col-md-4">No space on left side</div>
<div class="col-md-4 offset-md-4">I will left the some white space on medium and large devices</div>
</div>
</div>
Margin utilities
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
</div>
<div class="row">
<div class="col-auto me-auto">.col-auto .me-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Explaination of Columns grid
<div class="container">
<div class="row">
<div class="col-3 bg-light p-3 border">
.col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: width of 75% above sm breakpoint
</div>
</div>
</div>
