htmlcsstwitter-bootstrapbootstrap-5

How to left align a container (Bootstrap 5)

I have a container (grid, Bootstrap 5) and I want to left align it on my page.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col border border-dark m-2">
      Col1
    </div>
    <div class="col border border-dark m-2">
      Col2
    </div>
    <div class="col border border-dark m-2">
      Col3
    </div>
  </div>
</div>

and I want to have all cols and row to be left aligned on my page. I could use position-absolute top-0 start-0 on the container div, but according to the docs the page would not be responsive anymore. How to fix that?

Solution

  • If you look at the CSS for the .container class, it has the left and right margins aligned at auto. This centers content on the page. Technically, your row/columns are left aligned in the container. If you want the container truly left-aligned, overwrite the CSS with

    .container {
  margin-left: 0!important;
  margin-right: 0!important;
}