-2

I have read that the pull-right class has been removed and in its place there are classes such as .float-{sm,md,lg,xl}-{left,right,none} - as seen in this question too.

but i cant get it to work. I have setup a demo at https://jsfiddle.net/kneidels/x8Lhmajc/1/ you will see the word "menu" on the top left, which has a drop down attached. that is supposed to be floated to the right but as you can see its not working.

Filnor
  • 1,290
  • 2
  • 23
  • 28
kneidels
  • 956
  • 6
  • 29
  • 55

3 Answers3

4

I managed to make it work with your situation using classes col and float-right together. Here is plunker and in your fiddle. But usually, just float-right is enough. 

 <div class="col float-right">                
     <div class="dropdown actionButtons float-right">
     //your content
   </div>
</div>

And if you need to move only menu, wrap col-sm-12(md, lg what you need) and use float-right in example (see this fiddle).

 <div class="col-md-12"> </div>
halfer
  • 19,824
  • 17
  • 99
  • 186
alexKhymenko
  • 5,450
  • 23
  • 40
  • Thanks - but i need the menu icon at the *far* right - after all the other columns. even if i use `col-sm-12 float-right` instead of your `col float right` - i do get it at the far right, but all the other `col-*` elements then break onto the next line. maybe i can fix this with some negative margin, but it still sounds like a work-around rather than a clean solution. What do you suggest? – kneidels Sep 18 '17 at 14:31
  • it depends what is you next col-sm- value. For example if its col-sm-10 use not col-sm-12 but col-sm-2. 12-10 = 2 – alexKhymenko Sep 18 '17 at 14:39
  • It's bootsrap if you use col-sm-12 it will take the whole row. but if you use less it make them in one row – alexKhymenko Sep 18 '17 at 14:39
  • for example col-sm-12 and col-sm-12 will be 2 rows. but col-sm-6 and col-sm-6 will be one row – alexKhymenko Sep 18 '17 at 14:40
  • Understood, thanks. i had made a mistake getting up to 12 :) but this is what i have now: https://jsfiddle.net/kneidels/x8Lhmajc/4/ - still no float. – kneidels Sep 18 '17 at 14:55
2

Might be a little late but I did have a hard time also. Whenever i managed to place the columns under the "row" class, nothing would let me pull right. I guess this works and here is my solution;

<div class="row">
   <div class="col order-last">
      Whatever
   </div>
</div>
Sarp Koknar
  • 21
  • 1
1

the .row div is now in display:flex, that's why the float does not work correctly! you can

1) wrap the content in a <div class="col-sm-12></div> (that's the right way to use the grid: if you don't use the .col-something you'll end up with negative margins and part of your content is not visible)

2) use one of the flex utilities listed here https://getbootstrap.com/docs/4.0/utilities/flex/ like the class flex-row-reverse

Riccardo De Contardi
  • 2,128
  • 7
  • 17
  • Thank you! Questions: for your option `(1)` - do you mean to wrap the *menu* item in ` – kneidels Sep 18 '17 at 14:20
  • Your jsfiddle seems correct. you must always use `.col-something` inside `.row`, because the latter has negative margins (for the grid construction) – Riccardo De Contardi Sep 18 '17 at 15:16
  • https://jsfiddle.net/kneidels/x8Lhmajc/6/ is the updated one. the issue in this, is that the menu lands up being in its own row - whereas it should be part of the column structure – kneidels Sep 18 '17 at 18:18
  • you are trying to do something like this? https://codepen.io/erredeco/pen/aLdwpG I don't know what you are doing, but it seems to me that the data you are trying to display could be better displayed with a table – Riccardo De Contardi Sep 18 '17 at 20:02