When working with Bootstrap 4, the task is to customize the default grid system for desktop screens like this:
https://i.sstatic.net/ZoEem.png
specifically, setting the container and desktop breakpoint at 1280px.
The example attempted is :
body {
margin-top: 3rem;
}
.l-wrap {
max-width: 1280px;
margin-right: auto;
margin-left: auto;
}
.grid-item {
width: calc((100% - 50px * 11) / 12);
margin-top: 24px;
margin-right: 50px;
float: left;
}
/* For a 3-column grid */
.grid-item:nth-child(1n+12) {
margin-right: 0;
float: right;
}
/* Demo purposes */
.grid-item {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
text-align: center;
background: rgba(255, 0, 0, 0.25);
}<div class="l-wrap">
<div class="col-grid">
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
</div>
</div>While this approach works well, there is an attempt to achieve the same using Bootstrap.
The gutter width is 50px but it remains within the container.
This should result in a
column width of 61px, since the gutter calculation is50*11 = 550. So for a container width of 1280, (1280-550)/12 = 60.83.
By default, bootstrap includes gutters on either side.
Solutions that have been tried
An attempt was made to add padding left and right to the first and last columns respectively, resulting in uneven column widths (Issue)
Explored using
SCSSmixin to generate columns
@include media-breakpoint-up('lg', $breakpoints) {
@for $i from 1 through $columns {
.col#{$infix}-#{$i} {
padding-right: 0;
padding-left: 0;
@include make-col($i, $columns);
}
}
}
Attempts were made to remove padding from both sides and apply custom CSS to achieve the desired behavior, without successful results.
If anyone has guidance on how to accomplish this within Bootstrap, it would be greatly appreciated.