Search code examples
htmlcssbootstrap-4layoutgrid

Bootstrap : Is it possible to have rows in columns like this?

with Bootstrap and its layout system is it possible to have rows in columns to produce this type of result :

enter image description here

I tried this but without success :

<div className="col-lg-3 col-12">
    <div className="row">
        <displaySquare  />
    </div>
    <div className="row">
        <displaySquare  />
    </div>
    <div className="row">
        <displaySquare  />
    </div>
</div>

<div className="col-lg-9 col-12">
    <div className="row">
        <displayBigSquare   />
    </div>
    <div className="row">
        <displaySquare  />
        <displaySquare  />
    </div>
</div>

ty

UPDATE (23/08/2021): it's actually better with grid. I dropped bootstrap and I use GRID instead which allows to define all the properties related to CSS grids (GRID explanations on https://developer.mozilla.org/fr/docs/Web/CSS/grid).

HTML code:

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Griiiiid!</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <h1 class="centre">Welcome</h1>
    <div class="container">
      <div class="items item1">1</div>
      <div class="items item2">2</div>
      <div class="items item3">3</div>
      <div class="items item4">4</div>
      <div class="items item5">5</div>
      <div class="items item6">6</div>
    </div>
  </body>
</html>

CSS code:

*,
::before,
::after {
  box-sizing: border-box;
}
body {
  background-color: #333;
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
}
h1 {
  color: salmon;
}

.centre {
  text-align: center;
}

.container {
  padding: 30px ;
  width: 100%;
  background-color: #eee;
  margin: 30px auto;

  display: grid;
  grid-template-rows: 150px;
  grid-template-columns: repeat (3, 150px);

  grid-auto-rows: 150px;

  gap: 30px;
}

.items {
  padding: 20px;
  font-size: 30px;
  font-family: sans-serif;
}

.item1 {
  background-color: lightcoral;
}
.item2 {
  grid-row: 1/3;
  grid-column: 2/4;
  background-color: lightgreen;
}
.item3 {
  background-color: lime;
}
.item4 {
  background-color: chocolate;
}
.item5 {
  background-color: darkgoldenrod;
}
.item6 {
  background-color: darkseagreen;
}

Result: enter image description here

Solution

  • As of Bootstrap v5.0.2, the answer is no. The issue is that in order to have the orange rectangle in your example span multiple "rows", you need to use CSS Grid styling, and that is not yet part of Bootstrap.

    However, very soon in v5.1.0, they are including an opt-in option to replace the flexbox-based grid system they currently use with a CSS Grid-based one instead. It will probably have some growing pains, and I'm not sure that they have support for doing what you're trying to do here just yet, but at least CSS Grid will be there to try out. There will be documentation added for how to enable the option and how to use it once that version goes live, but you can read through the feature's PR in the meantime.