How to left align a container (Bootstrap 5)-CodePudding

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div >
  <div >
    <div >
      Col1
    </div>
    <div >
      Col2
    </div>
    <div >
      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?

CodePudding user response：

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;
}