What are Containers in Bootstrap?

How are Persistent volumes different from the Volumes used by containers (1)they are more Persistent (2)None of these (3)They ... than that of Pods (4)They do not have a lifecycle...

asked Sep 19, 2021 in Education by JackTerrance

JackTerrance · Answer 1 · 2021-04-04T10:18:38+0000

In Bootstrap we can contain elements to wrap site contents.

There are two Bootstrap Container classes,

The .container class used to provide a responsive fixed width container.
The .container-fluid class used to provide a full width container.

We have to note that we cannot put a container inside another container since it is not nestable.

Example 1

Using .container class (responsive fixed width container)

In this example we will create a simple Bootstrap page. Using ".container" class we will create a fixed width container that is responsive for different devices. In this we will write some text. We will have some space on the left and right side of the page by writing the following code.

<!DOCTYPE html>  
  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part2</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
</head>  
  
<body>  
    <div class="container">  
        <h1>This Is Bootstrap Page With Responsive Fixed Width Container</h1>  
        <p>This Container Show Output Of Using (.container) Class</p>  
    </div>  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html>  

Output

responsive fixed width container

Example 2

Using .container-fluid class (full width container)

In this example we will create a simple Bootstrap page like Example 1. Using ".container-fluid"class we will create a full width container. In this we will write some text. Now we will create a page by writing the following code.

<!DOCTYPE html>  
  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part2</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
</head>  
  
<body>  
    <div class="container-fluid">  
        <h1>This Is Bootstrap Page With Full Width Container</h1>  
        <p>This Container Show Output Of Using (.container-fluid) Class</p>  
    </div>  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html>  

Output

check output