Right to Left Using Bootstrap

Question

I have a row with a dynamic number of columns that is generated in JADE based on the data received from the database. Elements are an image, and their number may be 0 and may be a large number (max. 100).

. Inside the frame is inside, and I want to be able to fill the images in order from right to left. Meaning, the first image is in the upper right corner, the second is to the left of the first. each image uses col-md-2, so after 6 images the 7th should be under the first.

Right now, when generating the columns, the first one is in the upper left corner .. since it is the default.

Any way to change this?

Tried to use col-md-offset-X and it only executed the first line of images (because it is one line)

Current: -------------- | xxxx | | xx | -------------- How it should be: -------------- | xxxx | | xx | -------------- 

Answer 1

To achieve your goal, you need to change the swimming to .col-md-2 . Use !important if necessary.

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

Demo

Answer 2

I'm not sure about the download, but here is a general approach to solving 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

Answer 3

I don’t know how your system is automated in this case, the question doesn’t really tell me if you use some kind of image gallery, but if it’s not, if all this is manually added to the content, why don’t you create empty columns so that justify the last elements.

Always have a full line, but just use something like   in the very first ones that you leave empty.

Answer 4

In bootstrap 4, if you want the columns of a row to start from right to left, and you specify several column classes in a div, I suggest a simple solution by adding justify-content-end to the row containing 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>