1

So imagine a bootstrap column full of elements (divs, paragraphs, links.. ) how do I space those elements equally inside that column, like space-between alignment or space-around. I don't want margins or padding. I want elements to automatically equally space around the free space vertically inside a column.

In the documentation for flex everything seems to be focused on rows and what little there is for columns it's aligning elements inside a column horizontally.

Any ideas how I can get the desired effect?

1 Answer 1

5

The solution could be adding flex positioning to your column as well. So you can add those additional classes that are provided by bootstrap.

  <div class="container">
    <div class="row">
      <div class="col d-flex flex-column justify-content-between">
        <!-- Here comes your content -->
      </div>
    </div>
  </div>

Since you want to evenly space the element is the y axis, you need to add flex-column. Also remember you can nest any number of flex boxes inside another.

1
  • Thanks, works perfectly. I feel like this would be a great example for the docs. May 15, 2021 at 14:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.