1.

Why Bootstrap has a Grid System?

Answer»

Bootstrap has a responsive, mobile first fluid grid system that APPROPRIATELY SCALES up to 12 columns as the DEVICE or viewport size increases. This states that FIRSTLY Bootstrap targets mobile devices and then expands to other devices such as tablet and desktop. The Bootstrap Grid System displays 12 columns in a PAGE. These columns will rearrange on its own, since the Grid system is responsive.

Bootstrap provides the following classes:

Class
DevicesExample
.col-
<576px i.e. Extra Small Devices<div class="col-3">Example</div>
.col-sm->=576px i.e. Small Devices<div class="col-sm-1> Example </div>
.col-md-
>=768px i.e. Medium Devices like iPad<div class="col-md-1> Example </div>
.col-lg-
>=992px i.e. Large Devices<div class="col-lg-1> Example </div>
.col-xl-
>=1200px i.e. Extra Large Devices<div class="col-xl-1> Example </div>

Let us now understand this using an example.

For four equal columns, use four .col-sm-3 classes like this:

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Demo</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid">   <h2>Grid System in Bootstrap</h2>   <p><strong>Note:</strong> Resize the browser window to see the effect. The columns stack on top of each other when the screen is &lt; 576px.</p>   <div class="row">     <div class="col-sm-3" style="background-color:green;color:white;">.col-sm-3</div>     <div class="col-sm-3" style="background-color:orange;color:gray">.col-sm-3</div>     <div class="col-sm-3" style="background-color:violet;color:white">.col-sm-3</div>     <div class="col-sm-3" style="background-color:black;color:white">.col-sm-3</div>   </div> </div> </body> </html>

The output when screen size is more than 576px:

The output when screen size is less than 576px. As you can see the columns stack on top of each other:


Discussion

No Comment Found

Related InterviewSolutions