Open In App

Bootstrap 5 Containers Default Container

Improve
Improve
Like Article
Like
Save
Share
Report

Containers are the most fundamental layout component in Bootstrap, which is necessary if you want to use the pre-installed grid system. The purpose of containers is to hold, center(at times), and occasionally add some padding to the content they hold. Although containers can be nested, most layouts don’t call for them. 

The Default Container is the most simple one with all the basic necessities. It is a responsive container and has a fixed width for every breakpoint or screen size like small, medium, large, and so on.

Default Container used Classes:

  • .container: This class is used to make the div responsive. It is a max-width container that size changes at every breakpoint. 

 

Syntax:

<div class="container">
      <!-- Code Here -->
</div>

Example 1: The code below shows how the container class brings a difference in a div element:

HTML




<!doctype html>
<html lang="en">
  
<head>
    <link href=
          rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>
  
<body>
    <h1 class="text-success" 
        class="mt-3">
        GeeksforGeeks
    </h1>
    <h4>Bootstrap 5 Containers 
        Default container
    </h4>
    <pre class="m-4 text-center">
        Non-container Div Element
    </pre>
    <div class="demo bg-success p-4">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
        </nav>
    </div>
    <pre class="m-4 text-center">Container 
        Div Element
    </pre>
    <div class="container bg-success p-4">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
        </nav>
    </div>
</body>
</html>


Output:

 

Example 2: The code below illustrates how nested default containers work and interact:

HTML




<!doctype html>
<html lang="en">
  
<head>
    <link href=
          rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>
  
<body>
    <h1 class="text-success" 
        class="mt-3">
        GeeksforGeeks
    </h1>
    <h4>Bootstrap 5 Containers 
        Default container
    </h4>
    <pre class="m-4 text-center fs-3">
        Nested Default container
    </pre>
    <div class="container bg-secondary p-4">
        <div class="container bg-primary p-4">
            <div class="container bg-warning p-4">
                <div class="container bg-success p-4">
                    <nav class="navbar navbar-expand-lg 
                        navbar-light bg-light">
                        <a class="navbar-brand" href="#">
                            Navbar
                        </a>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/layout/containers/#default-container 



Last Updated : 22 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads