Bootstrap

champak
Bootstrap
₹2,000.00 ₹300.00
  • 23 students
  • 13 lessons
  • 0 quizzes
  • 10 week duration

Bootstrap

The Bootstrap Grid System

The Bootstrap Grid System begins with the two container classes

.container (fixed-width) or .container-fluid (full-width).

Let us observe an example.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Fixed Width</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.2.1/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.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container bg-dark">
<h1>Container class</h1>

<p>This is a fixed width container</p>
</div>

</body>
</html>

The page opened in a browser.

 

Full Width Example


<!DOCTYPE html>
<html lang="en">
<head>
<title>Fluid Width Example</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.2.1/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.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid bg-dark">
<br/>
<br/>
<p>The .container-fluid class provides a full width container.</p>
</div>

</body>
</html>

 

 

 

The Bootstrap grid system works by placing rows inside containers or fluid containers. Then we have columns inside rows. Every row shall have 12 columns.

The Bootstrap grid system has four classes for columns.

.col-xs (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 xs and sm, you only need to specify xs.

Consider this example


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h1>Grid</h1>

<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-xs-6 bg-primary" >
One
</div>
<div class="col-xs-6 bg-success">
Two
</div>
</div>
</div>

</body>
</html>

We have created two columns of xs. The smallest size.
Here are two screenshots. One at full screen and the other at the smallest possible.

 

The columns were not resized as you can see.

Niow, we will change the classes to sm.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h1>Grid</h1>

<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6 bg-primary" >
One
</div>
<div class="col-sm-6 bg-success">
Two
</div>
</div>
</div>

</body>
</html>

 

I am attaching two screenshots again.
Full screen

Small screen

So, this is the concept.

The classes stacking from small to large are

xs(eXtraSmall)<sm(SMall)<md(MeDium)<lg(LarGe.

if you define a grid in a bigger class then it will expand to full screen in a smaller screen.

Try this example.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h1>Grid</h1>

<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6 bg-primary" >
One
</div>
<div class="col-sm-4 bg-success">
Two
</div>
<div class="col-sm-2 bg-danger">
Three
</div>
</div>
</div>

</body>
</html>

And in case you want a full screen.

change container to container-fluid


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h1>Grid</h1>

<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6 bg-primary" >
One
</div>
<div class="col-sm-4 bg-success">
Two
</div>
<div class="col-sm-2 bg-danger">
Three
</div>
</div>
</div>

</body>
</html>

 

 

 

One thought on “The Bootstrap Grid System

Leave a Reply

Your email address will not be published. Required fields are marked *