The **`container-fluid`** class is one of the three types of container classes offered by Bootstrap.

> **Containers** are the most basic layout element in Bootstrap. They are used to contain, pad, and center the content within them.

The `container-fluid` class is used for a full-width container and spans the entire width of the viewport.

# Code

As an example, we have a `div` element with the `container-fluid` class. The children elements `h1` and `p` are nicely padded inside the parent `div`.

> This responsive container-fluid can be modified per display screen size.

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
  </head>
  <body>
    <div class="container-fluid" style="background-color: plum;">
      <h1>Bootstrap container-fluid example</h1>
      <p>
        The bootstrap container-fluid is used for the full-width container of
        the display screen. This responsive container-fluid can modify as per
        display screen size.
      </p>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </body>
</html>

What is Bootstrap container-fluid class?

Code