Website’s layout using Layout of Bootstrap

Layout defines a website’s structure. Bootstrap provides containers and grid system to structure your components that makes your design adaptive and responsive.

If you’re new to Bootstrap or you don’t know what really it is.. I recommend you to go to my this article to get the entire basic idea of Bootstrap framework.

Containers

Containers are the most basic layout element in Bootstrap and are required when using our default grid system

Bootstrap comes with three different containers:

• .container, which sets a max-width at each responsive breakpoint
• .container-fluid, which is width: 100% at all breakpoints
• .container-{breakpoint}, which is width: 100% until the specified breakpoint

The table below illustrates how each container’s max-width compares to the original .container and .container-fluid across each breakpoint.

Example

• .container

<div class="container">
  <!-- Content here -->
</div>

• .container-fluid

<div class="container-fluid">
  <!-- Content here -->
</div>

• .container-{breakpoint}

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

Grid System

Bootstrap’s grid system is built with flexbox and allows up to 12 columns across the page.

If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:

Grid System is fully responsive.

Grid Classes

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)

Basic Example of Grid System

<!-- change .container to .container-fluid to be full width -->
<div class="container"> 
 <!-- Columns are always 50% wide, on mobile and desktop -->
 <div class="row">
   <div class="col-xs-6">.col-xs-6</div>
   <div class="col-xs-6">.col-xs-6</div>
 </div>
<!-- nested columns example -->
 <div class="row">
   <div class="col-xs-6">.col-xs-6</div>
   <div class="col-xs-6">.col-xs-6
     <div class="row">
       <div class="col-md-6">100% mobile 50% everywhere else</div>
       <div class="col-md-6">100% mobile 50% everywhere else</div>
     </div>
   </div>
 </div>
</div>

I hope you’ve found this piece of information helpful. I’d love to hear your feedback!

Thanks for reading! :)