Container Class:

There are two classes of Container:
  • .container:
                    It centers the page with auto margin from left and right. its max-width is 1140px
  • .container-fluid:
                    It takes 100% width of the page.

Container Class with Different Breakpoints:


Break Points & Classes Max width Container Width
Extra Large(.container-xxl) >=1200px 1140px
Large(.container-xl) >=992px 960px
Medium(.container-md) >=768px 720px
Small(.container-sm) >=576px 540px
Extra Small(.container) less than 576pxAuto

Default Container:



<div class="container">
...
</div>

Container Fluid:



<div class="container-fluid">
...
</div>

Bootstrap Layout Sequence:


Row Class:

Row class comes below container class. It is used for horizontal partition in the container class of the web application. The bootstrap row class is used to make a horizontal layout to contain the column class on the web page.



<div class="container">
<div class="row">Row1</div>
<div class="row">Row1</div>
</div>

output:


Col Class:

Col class comes below Row class. These Columns are of equal width.


<div class="container">
<div class="row">
<div class="col">Col1</div>
<div class="col">Col2</div>
</div>
<div class="row">
<div class="col">Col3</div>
<div class="col">Col4</div>
<div class="col">Col5</div>
</div>
</div>

output:



Col class with 100% width:

w-100 class is used to break the space and shift the next columns to next line.

<div class="container">
<div class="row">
<div class="w-100">Col1</div>
</div>
</div>


if we want to make a permanent no of column in every line then we can use this method but remember, they will remain same throughout responsive layout 

<div class="container">
<div class="row row-col-2">
<div class="col">Col1</div>
<div class="col">Col2</div>
<div class="col">Col3</div>
<div class="col">Col4</div>
</div>
</div>

Col class for different Break Points

Break points Classes
Extra Large .col-xl
Large .col-lg
Medium .col-md
Small .col-sm