Bootstrap 5 Containers Default Container

Last Updated : 31 Jul, 2024

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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          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

Bootstrap 5 Containers Responsive Containers

priyanshuchatterjee01

Improve

Article Tags :

Bootstrap 5 Containers Default Container

Similar Reads

Breakepoints Layout

Containers Layout

Grid system Layout

Columns Layout

Gutters Layout

Utilities for layout

Thank You!

What kind of Experience do you want to share?