Utilizing bootstrap 5, yet a bootstrap 4 demonstration may suffice.
Clearly, I can accomplish this design without employing bootstrap, however, that is not my current objective. I am curious if there is a feature within the bootstrap framework that I may be overlooking.
Initially, here is a snapshot of what I am aiming to achieve.
https://i.sstatic.net/gBvhE.png
Specifications of the layout:
- Container width: 1440px
- Grid gutter width: 32px
- 14 column layout
Each attempt poses its individual challenge:
1st attempt(refer to code below) and the issue: Orphans(last row) are centered instead of left-aligned.
2nd attempt(refer to code below): The parent (now the 12 column layout) is too narrow, hence the columns do not possess the required 370px width.
3rd attempt(refer to code below): Not suitable for wrapping columns(obviously).
1st attempt code:
<div class="container">
<div class="row justify-content-center">
<div class="col-14 col-md-7 col-lg-4"></div>
<div class="col-14 col-md-7 col-lg-4"></div>
<div class="col-14 col-md-7 col-lg-4"></div>
<div class="col-14 col-md-7 col-lg-4"></div>
</div>
</div>
2nd attempt code:
<div class="container">
<div class="row justify-content-center">
<div class="col-14 col-lg-12">
<div class="row">
<div class="col-14 col-md-7 col-lg-4"></div>
<div class="col-14 col-md-7 col-lg-4"></div>
<div class="col-14 col-md-7 col-lg-4"></div>
</div>
</div>
</div>
</div>
3rd attempt code:
<div class="container">
<div class="row justify-content-center">
<div class="col-14 d-none d-xl-block col-xl-1"></div>
<div class="col-14 col-md-7 col-lg-4"></div>
<div class="col-14 col-md-7 col-lg-4"></div>
<div class="col-14 col-md-7 col-lg-4"></div>
<div class="col-14 col-md-7 col-lg-4"></div>
<div class="col-14 d-none d-xl-block col-xl-1"></div>
</div>
</div>
Once again, solely seeking bootstrap solutions. I am capable of achieving this without bootstrap, but I am exploring potential overlooked features.