'Fluid' alignment of Bootstrap 5 columns-CodePudding

I'm trying to get a result similar to what is described in the embedded image. Column widths should be the same if that makes any difference, but I'd like to use non-row based columns that fill the space vertically.

I couldn't find any code examples or any mention in the Bootstrap docs for this type of alignment.

CodePudding user response：

I am wondering if it would suit your website to use col-4 to make three main columns and then within each of those coulmns, all of your boxes in the image would be a Div of it's own within one of those columns.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="col-4 my-1" id="first-column">
  <div class="text-box mb-1">
    Text
  </div>
  <div class="text-box mb-1">
    Text
  </div>
</div>

<div class="col-4 my-1" id="second-column">
  <div class="text-box mb-1">
    Text
  </div>
  <div class="text-box mb-1">
    Text
  </div>
</div>

<div class="col-4 my-1" id="third-column">
  <div class="text-box mb-1">
    Text
  </div>
  <div class="text-box mb-1">
    Text
  </div>
</div>

Additionally as you know my-1 will add left and right margin to your columns or py-1 if you would prefer padding instead of margin and mb-1 adds a little margin to the bottom of all the text boxes so as to separate them a little.

There might be one downfall with this fix in mobile viewing. Column 1 will always be at the top. Items in column 2 and column 3 will always be further down the page.

CodePudding user response：

You can simply nest rows inside each primary column and set the inner columns to full width.

.col-12 {
  background: pink;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="row">
        <div class="col-12 my-1">Col 1A</div>
        <div class="col-12 my-1 py-4">Col 1B</div>
        <div class="col-12 my-1 py-3">Col 1C</div>
      </div>
    </div>

    <div class="col">
      <div class="row">
        <div class="col-12 my-1 py-3">Col 2A</div>
        <div class="col-12 my-1 py-4">Col 2B</div>
        <div class="col-12 my-1 py-2">Col 2C</div>
      </div>
    </div>

    <div class="col">
      <div class="row">
        <div class="col-12 my-1 py-4">Col 3A</div>
        <div class="col-12 my-1">Col 3B</div>
        <div class="col-12 my-1 py-2">Col 3C</div>
      </div>
    </div>
  </div>
</div>