Right to left columns using Bootstrap

Question

I have a row with a dynamic count of columns that is generated in JADE based on data fetched from the database. Items are image and the count of them can be 0 and can be a large number (max 100).

The .row is inside of a frame and I want to be able to populate the images in a right-to-left orders. Meaning, first image is at the top-right corner, second one is to the left of the first. each image uses col-md-2 so after 6 images the 7th should be under the first one.

Right now, when generating the columns the first one is at the top-left corner.. as it's the default.

Any way to change that?

Tried using col-md-offset-X and it's only effecting the first line of images (because it's a single row)

Current:
--------------
| x  x  x  x |
| x  x       |
--------------

How it should be:
--------------
| x  x  x  x |
|       x  x |
--------------

Tarpeia

hm, maybe you have some mockup how it should look like ? – Ileum

have you tried to override .col-md-2 with float: right ? – Ileum

@Ileum , Added a mockup. – Tarpeia

Tried adding float: right; but it causes the whole row to get out of it's container from the right side. – Tarpeia

is this close to your expectation - jsfiddle.net/okkf3kjh ? – Ileum

Exactly! Added pull-right the the div to make if float: right; and it looks good. The last comment effect was caused by a different issue. Thank you! – Tarpeia

Answer 1

To reach your goal you have to change floating in .col-md-2. If necessary use !important.

.col-md-2 {
    float: right !important;
}

DEMO

Ileum

you can either use 'pull-right' class name that does the same job but the problem is when you resize the screen, the elements still stick together instead of getting over each other. what I did is this in my style.css: /* define a class with empty properties */ .col-rtl{} /*then create a media query and put the float in there */ @media screen and (min-width: 992px){ .col-rtl{ float:right; } } Now when you resize the screen, the elements the follow instructions of bootstrap.css, only when the screen is 992px they float right. – Revelationist

u can add into bootstrap.css .row>div{ float: right !important; } to apply it to all columns. – Resurrection

Answer 2

In bootstrap 4, if you want the columns of a row to start from right to left and you set multiple column classes on a div, I suggest an easy solution by adding justify-content-end to the row enclosing the columns.

Here is an example:

<div class="row justify-content-end">
  <div class="col-md-6 col-lg-4 col-xl-3">
  First col text
  </div>
  <div class="col-md-6 col-lg-4 col-xl-3">
  First col text
  </div>
  <div class="col-md-6 col-lg-4 col-xl-3">
  Second col text
  </div>
  <div class="col-md-6 col-lg-4 col-xl-3">
  Third col text
  </div>
</div>

Daylong

Answer 3

You can use the flex component of bootstrap to achieve this.

<div class="d-flex flex-row-reverse">
  <div class="bg-info">Flex item 1</div>
  <div class="bg-info">Flex item 2</div>
  <div class="bg-info">Flex item 3</div>
</div>

Chaff

Is that available in Bootstrap 3? – Erlene

@Erlene If I am not wrong Boostrap3 uses floats unlike Boostrap4 which uses flexbox. checkout this thread for BS3 #20534469 – Chaff

Answer 4

In bootstrap 4 U can use flex-row-reverse class https://getbootstrap.com/docs/4.4/utilities/flex/

Discreet

Answer 5

I don't know how automated your system is in this case, the question doesn't really tell me if you're using some sort of a image gallery, but if it's not, if it's all manually added content, why not create empty columns to justify the last items.

Always have a full row, but just use something like   at the very first ones that you are leaving blank.

Barbital

It is a kind of image gallery.. something like facebook post with a sub image gallery.. – Tarpeia

Ah, then this answer is not in any way useful. – Barbital

Answer 6

You can set the flex-direction property for sorting the columns from right to left/ RTL.

Set it on the 'row` container:

flex-direction: row-reverse;

Or set Bootstrap class to a container:

class="flex-row-reverse"

Trochlear

Answer 7

I am not sure about the bootsrap, But here is the generic way of approach to solve your problem.

HTML

<div class="main">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
    <div>thirteen</div>
    <div>fourteen</div>
    <div>fifteen</div>
</div>

CSS

.main div {
    float: right;
    width: 70px;
}
.main div:nth-child(6n + 7) {
    clear: right;
}

FIDDLE DEMO

Cloverleaf