<div class="container my-4">

    <p>

      <strong>You can easily adjust the width of the bootstrap grid by setting a <code>max-width</code> of the

        <code>.container</code>. See the examples below</strong>

    </p>

​

    <p>

      Detailed documentation and more examples you can find in our

      <a href="https://mdbootstrap.com/docs/standard/layout/containers/" target="_blank"><strong>Bootstrap Containers

          Docs</strong></a>

    </p>

​

    <hr />

​

    <p><strong>Basic example</strong></p>

​

    <p>Add this simple CSS to your project:</p>

​

    <pre class="code-toolbar bg-light"><code class="language-markup">

      .container-example {

        /* Set your width */

        max-width: 800px;

      }

    </code></pre>

​

    <p>It will set a maximum width to the container so it will not stretch too much on bigger screens, but it sill will be responsive on smaller screens and mobile.</p>

​

    <div class="border p-5">

      <!-- Copy this code to have a working example -->

      <div class="container container-example bg-danger py-5 text-white">

        Modified container with a max-width = 800px

      </div>

      <br>

      <div class="container bg-primary py-5 text-white">

        Regular container

      </div>

      <!--/ Copy this code to have a working example -->

    </div>

  </div>