Bootstrap 4 Layout

Containers

Containers are the essential elements of the bootstrap layout. It is required when we are using a bootstrap grid system. Containers can also be nested, but most layouts do not need nested containers.

Bootstrap has two classes of containers

  • .container
  • .container-fluid

.container class – This class is used to create a responsive and fixed-width container. There is a fixed margin in the left and right of this class, and it does not completely cover its parent, screen, or Viewport.

Bootstrap 4 Layout

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Container 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.4.1/css/bootstrap.min.css"> 
 </head>
 <body>
   <div class="container" style="background-color: #c7c7c7">
   <h1>Hello World</h1>
   <p>This is the example of .container class</p>
   <p>This part is inside a .container class.</p>  
 </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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>
 </body>
 </html> 

Output

Bootstrap 4 Layout

.container-fluid class – Container-fluid class covers the full width of the screen.

Bootstrap 4 Layout

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Container-fluid 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.4.1/css/bootstrap.min.css">
 </head> 
 <body>
 <div class="container-fluid" style="background-color: #c7c7c7">
   <h1>Hello World</h1>
   <p>This is the example of .container-fluid class.</p>
   <p>This part is inside a .container-fluid class.</p> 
 </div> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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>
 </body>
 </html> 

Output

Bootstrap 4 Layout

Responsive Containers

The responsive containers automatically adjust themselves (in terms of height and width) according to their parent element.  The max-width of the container varies at different scream size.

  Extra small <576px Small >=576px Medium >=768px Large >=992px Extra-large >=1200px
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%



ADVERTISEMENT
ADVERTISEMENT