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 |
--------------

have you tried to override `.col-md-2` with `float: right` ? — Evgeniy, Aug 26 '14 at 07:51
Tried adding float: right; but it causes the whole row to get out of it's container from the right side. — Idan, Aug 26 '14 at 08:02
is this close to your expectation - http://jsfiddle.net/okkf3kjh/ ? — Evgeniy, Aug 26 '14 at 08:21
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! — Idan, Aug 26 '14 at 08:48

score 22 · Accepted Answer · answered Aug 26 '14 at 09:05

22

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

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

DEMO

answered Aug 26 '14 at 09:05

Evgeniy

2,915
3
21
35

4

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. – Mohammad Jul 15 '15 at 06:30
u can add into bootstrap.css `.row>div{ float: right !important; }` to apply it to all columns. – Anouar khaldi Aug 28 '19 at 12:49

score 5 · Answer 2 · answered Jun 13 '19 at 20:57

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>

score 1 · Answer 3 · answered Mar 13 '20 at 08:18

1

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

answered Mar 13 '20 at 08:18

Gennadiy Utkin

21
1
5

score 1 · Answer 4 · answered Jul 30 '20 at 09:57

1

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>

answered Jul 30 '20 at 09:57

Mohammad Faisal

573
5
13

Is that available in Bootstrap 3? – Anthony Aug 31 '20 at 03:46
@Anthony If I am not wrong Boostrap3 uses floats unlike Boostrap4 which uses flexbox. checkout this thread for BS3 https://stackoverflow.com/questions/20533969/bootstrap-3-offset-on-right-not-left/20536713 – Mohammad Faisal Aug 31 '20 at 06:12

score 0 · Answer 5 · answered Aug 26 '14 at 08:13

0

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.

answered Aug 26 '14 at 08:13

Pepelius

1,576
20
34

It is a kind of image gallery.. something like facebook post with a sub image gallery.. – Idan Aug 26 '14 at 08:16
Ah, then this answer is not in any way useful. – Pepelius Aug 26 '14 at 08:22

score 0 · Answer 6 · answered Oct 29 '20 at 19:11

0

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"

answered Oct 29 '20 at 19:11

Maihan Nijat

9,054
11
62
110

score -1 · Answer 7 · edited Aug 26 '14 at 08:16

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

Right to left columns using Bootstrap

7 Answers7