Responsive layout containing boxes using bootstrap - html

Question

I'm using Bootstrap and I need to reproduce this layout:
Basically there is a div container (section-container) that contains some gray boxes (box-container).
The number of the boxedes is variable.
The layout, as you can see in the image, should be responsive and it must work on mobile, tablet and desktop.
The height of the box depends on its content, the width of the box depends on the section-container width.
What I tried was to use row and col and increase the "col width" when window size is smaller.
It doesn't work very well, I think I need to add a new breakpoint smaller that sm because the width of the boxes become too small sometimes (box width should always be >= 350px).
Apart from that, how can I set horizontal and vertical space between boxes?
I tried:
.box-container {
...
margin-left: 10px;
margin-right: 10px;
}
but it doesn't work as I expected.
Here a working example.
.section-container {
border: 1px solid black;
}
.box-container {
border-radius: 20px 0% 20px 0%;
background-color: lightgray;
border: 1px solid black;
/*margin-left: 10px;
margin-right: 10px;*/
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap-grid.css" integrity="sha512-Fxj/xUyzF1sPpG8bmkIT/Rh4tAHwPn3roK9DwsoBoglSt2tfNpYWF+vWiwVw0SVhXVEjxmdDwkCzD/wtFOIAUg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="section-container container py-3">
<div class="row">
<div class="box-container col-12 col-sm-4 px-3 py-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="box-container col-12 col-sm-4 px-3 py-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="box-container col-12 col-sm-4 px-3 py-4">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="box-container col-12 col-sm-4 px-3 py-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="box-container col-12 col-sm-4 px-3 py-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
Thanks a lot

Answer 1

With Bootstrap, the smallest breakpoint is not specifying a breakpoint, for example col-12.
Here I used col-12 col-md-6 col-lg-4 so the cols will take (12/12) = 100%, (6/12) = 50% and (4/12) = 33,33% of the row width.
Here I wrapped your content because if you add left and right margin, it will wrap the last element of the row (because it will take more than 100% of the width with the other elements). You could change the default Bootstrap values to avoid wrapping elements but it's the fastest way.
.section-container {
border: 1px solid black;
}
.box-container {
border-radius: 20px 0% 20px 0%;
background-color: lightgray;
border: 1px solid black;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap-grid.css" integrity="sha512-Fxj/xUyzF1sPpG8bmkIT/Rh4tAHwPn3roK9DwsoBoglSt2tfNpYWF+vWiwVw0SVhXVEjxmdDwkCzD/wtFOIAUg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="section-container container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4 my-2">
<div class="box-container p-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="col-12 col-md-6 col-lg-4 my-2">
<div class="box-container p-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="col-12 col-md-6 col-lg-4 my-2">
<div class="box-container p-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="col-12 col-md-6 col-lg-4 my-2">
<div class="box-container p-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="col-12 col-md-6 col-lg-4 my-2">
<div class="box-container p-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="col-12 col-md-6 col-lg-4 my-2">
<div class="box-container p-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="col-12 col-md-6 col-lg-4 my-2">
<div class="box-container p-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</div>
EDIT
Here is an example without wrapping elements :
:root {
--margin: 10px;
}
.section-container {
border: 1px solid black;
}
.section-container .box-container {
border-radius: 20px 0% 20px 0%;
background-color: lightgray;
border: 1px solid black;
margin: var(--margin);
}
.section-container .col-12 {
width: calc(100% - 2 * var(--margin));
}
#media (min-width: 768px) {
.section-container .col-md-6 {
width: calc(50% - 2 * var(--margin));
}
}
#media (min-width: 992px) {
.section-container .col-lg-4 {
width: calc(33.33333333% - 2 * var(--margin));
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap-grid.css" integrity="sha512-Fxj/xUyzF1sPpG8bmkIT/Rh4tAHwPn3roK9DwsoBoglSt2tfNpYWF+vWiwVw0SVhXVEjxmdDwkCzD/wtFOIAUg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="section-container container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4 box-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="col-12 col-md-6 col-lg-4 box-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="col-12 col-md-6 col-lg-4 box-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="col-12 col-md-6 col-lg-4 box-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="col-12 col-md-6 col-lg-4 box-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="col-12 col-md-6 col-lg-4 box-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="col-12 col-md-6 col-lg-4 box-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
Related : Bootstrap Breakpoints