title: How do I center and limit page content with Bootstrap?
body: <p>In Bootstrap5, I want to achieve (mostly) the same effect as:</p>
  <pre class="lang-css prettyprint-override"><code>margin: 0 auto;
  width:60%;
  </code></pre>
  <p>in CSS. The code above doesn't work in Bootstrap - it aligns items to the left of the page.<br />
  How do I limit the width to the middle 60% and then make content take up that 60% in 2 columns?</p>
  <p>Edit: HTML code <em>(style.css only contains text-align and colors)</em>:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  
      &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;
          integrity=&quot;sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We&quot; crossorigin=&quot;anonymous&quot;&gt;
  
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  
      &lt;title&gt;Bootstrap&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
          &lt;header class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-12&quot; id=&quot;header_id&quot;&gt;&lt;/div&gt; &lt;!--header_id is just for a background image--&gt;
          &lt;/header&gt;
          &lt;section class=&quot;row&quot;&gt;
                  &lt;article class=&quot;col-4&quot;&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates animi ratione esse, aut
                      vel iusto voluptas voluptatum illo suscipit veniam, laudantium qui, quidem nihil eaque repellendus
                      ducimus facilis velit sequi.&lt;/article&gt;
                  &lt;article class=&quot;col-4&quot;&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates animi ratione esse, aut
                      vel iusto voluptas voluptatum illo suscipit veniam, laudantium qui, quidem nihil eaque repellendus
                      ducimus facilis velit sequi.&lt;/article&gt;
                  &lt;article class=&quot;col-4&quot;&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates animi ratione esse, aut
                      vel iusto voluptas voluptatum illo suscipit veniam, laudantium qui, quidem nihil eaque repellendus
                      ducimus facilis velit sequi.&lt;/article&gt;
                  &lt;article class=&quot;col-4&quot;&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates animi ratione esse, aut
                      vel iusto voluptas voluptatum illo suscipit veniam, laudantium qui, quidem nihil eaque repellendus
                      ducimus facilis velit sequi.&lt;/article&gt;
                  &lt;article class=&quot;col-4&quot;&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates animi ratione esse, aut
                      vel iusto voluptas voluptatum illo suscipit veniam, laudantium qui, quidem nihil eaque repellendus
                      ducimus facilis velit sequi.&lt;/article&gt;
          &lt;/section&gt;
          &lt;footer class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-12 align-center static-bottom&quot;&gt;LICENCE&lt;/div&gt; &lt;!-- align-center is just for aligning text --&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
  
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js&quot;
          integrity=&quot;sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp&quot;
          crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js&quot;
          integrity=&quot;sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/&quot;
          crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>