CODEWITHSUNDEEP
bootstrap-4
jstuardo
jstuardo

Reputation: 4405

Flex layout in Boostrap 4

I was trying to do a column layout that places each cell to the right of the other until it reachs the container width. Then, other following divs should continue rendering on the next line, and so on.

All examples I have seen so far, do something like this:

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Al examples uses a container whose class is "row", however, I don't need that, because I don't know before hand how many columns could fit in the container width.

Is there a way to make columns to be ordered automatically to the right.

for example, something like:

<div style="float: left">...</div>
<div style="float: left">...</div>
<div style="float: left">...</div>
<div style="float: left">...</div>

But using Boostrap 4. Each div contains form_groups with a label and an input field.

Upvotes: 0

Views: 86

Answers (1)

IvanS95
IvanS95

Reputation: 5742

You can get the desired output by adding a few classes to the basic row and col-*-* structure; to align every column to the right you can just add a justify-content-end class to the row, since rows have a display: flex property, you can apply all flex behaviors to rows; with this if there's space available, columns will be pushed to the right side;

Also if you would like to reverse the order of the columns, you can also add a class flex-row-reverse which, as the name implies, will render the columns in reverse order inside the row.

Working example https://codepen.io/IvanS95/pen/gQjOvN

Upvotes: 1

Related Questions