Bootstrap 4 uses wrapper classes to wrap the page content. It contains two types of containers:


  • .container - Represents a fixed width container.
  • .container-fluid -¬†Represents a full-width container.

Container

The .container class is used to wrap the page content with a fixed width and the content can be placed in the center easily using the .container class as shown below.

<div class = "container">
   ...
</div>

The following example specifies a simple web page with a fixed-width container:

#example.html


<!DOCTYPE html>
<html>
    <head>
        <title></title>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    </head>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col">
                <div class="text-center">
                    <h2>Fixed Width Container</h2>
                    This is a simple web page with fixed width container by using .container class
                </div>
            </div>
        </div>
    </div>

    <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.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Note: .text-center make the text to center, not container class make the content center. 

Output: 




Fluid container

You can create a full-width container using the .container-fluid class as shown below.

<div class = "container-fluid">
   ...
</div>

The following example specifies a simple web page with a full-width container:

#example.html


<!DOCTYPE html>
<html>
    <head>
        <title></title>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    </head>
</head>
<body>

    <div class="container-fluid">
        <div class="row">
            <div class="col">
                    <h2>Fixed Width .container-fluid</h2>
                    This is a simple web page with fixed width container by using .container-fluid class
            </div>
        </div>
    </div>


    <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.5.2/js/bootstrap.min.js"></script>
</body>
</html>


output: