Containers in Bootstrap with examples(3)

C++Server Side ProgrammingProgramming

As the name suggests, a container is used to hold or bind something likewise containers in bootstrap are used for storing or binding the content over a viewport. Containers add padding to the content by providing it margin from all the four sides of a viewport and it can also be altered depending upon the needs. Containers can also be nested inside one another.

Now, let us understand each of the class in detail

container

In bootstrap, the .container class creates a responsive container with a fixed width in a viewport.It sets the max-width of a container depending upon the size of a viewport.

Given below is the chart describing the max-width of a .container class depending upon the size of a viewport.


Extra SmallSmallMediumLargeExtra Large
max-width100%540px720px960px1140px

Example

Let’s take an example to understand it better

 Live Demo

<html>
<head>
<title>.Container Class</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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body style="border:5px solid Black;">
<br>
<div class="container bg-dark text-white" style>
<center>
<h1>tutorialspoint</h1>
<h6>SIMPLYEASYLEARNING</h6>
</center>
</div>
</body>
</html>

Output

Output for this code will be

container-fluid

In bootstrap, the .container-fluid class creates a responsive container with a fixed width of 100% in a viewport. It sets the max-width of a container to 100% irrespective of the size of a viewport.

Given below is the chart describing the max-width of a .container-fluid class.


Extra SmallSmallMediumLargeExtra Large
max-width100%100%100%100%100%

Example

Let’s take an example to understand it better

 Live Demo

<html>
<head>
<title>.Container Class</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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body style="border:5px solid Black;">
<br>
<div class="container-fluid bg-dark text-white">
<center>
<h1>tutorialspoint</h1>
<h6>SIMPLYEASYLEARNING</h6>
</center>
</div>
</body>
</html>

Output

Output for this code will be

raja
Published on 06-Jun-2020 11:34:58
Advertisements