What happened to the pull-left and pull-right classes in Bootstrap 4

Question

In the newest version the pull-left and pull-right have been replaced by  pull- xs sm md lg xl - left right none   That means that instead of writing a simple class  pull-right   I will have now to write class  pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right   Is there a less tedious way to do it

User · Accepted Answer

Back in 2016 when this question was originally asked  the answer was       pull-right   addClass  pull-xs-right   removeClass  pull-right     But now the accepted answer should be Robert Went s

User · Answer

Update 2021  Bootstrap 5 In bootstrap 5 these classes have been renamed to  float-end and  float-start  Docs  https   getbootstrap com docs 5 0 utilities float  Example   lt div class  quot row quot  gt       lt div class  quot col-12 quot  gt          lt button class  quot btn btn-primary float-end quot  gt Login lt  div gt       lt  div gt   lt  div gt

User · Answer

Nothing else was working for me  This one did  This might help someone     lt div class  clearfix  gt     lt span class  float-left  gt Float left lt  span gt     lt span class  float-right  gt Float right lt  span gt   lt  div gt    Wrapping everything in clearfix div is the key

User · Answer

Changed to float-right float-left float-xx-left and float-xx-right

User · Answer

Update 2018  as of Bootstrap 4 1   Yes  pull-left and pull-right have been replaced with float-left and float-right in Bootstrap 4   However  floats will not work in all cases since Bootstrap 4 is now flexbox   To align flexbox children to the right  use auto-margins  ie  ml-auto  or the flexbox utils  ie  justify-content-end  align-self-end  etc      Examples  Navs    lt ul class  nav  gt      lt li gt  lt a href class  nav-link  gt Link lt  a gt  lt  li gt      lt li gt  lt a href class  nav-link  gt Link lt  a gt  lt  li gt      lt li class  ml-auto  gt  lt a href class  nav-link  gt Right lt  a gt  lt  li gt   lt  ul gt    Breadcrumbs    lt ul class  breadcrumb  gt       lt li gt  lt a href     gt Home lt  a gt  lt  li gt       lt li class  active  gt  lt a href     gt Link lt  a gt  lt  li gt       lt li class  ml-auto  gt  lt a href     gt Right lt  a gt  lt  li gt   lt  ul gt   https   www codeply com go 6ITgrV7pvL   Grid    lt div class  row  gt       lt div class  col-3  gt Left lt  div gt       lt div class  col-3 ml-auto  gt Right lt  div gt   lt  div gt

User · Answer

If you want to use those with columns in another work with col-  classes  you can use order-  classes    You can control the order of your columns with order classes  see more in Bootstrap 4 documentation  A simple from bootstrap docs    lt div class  container  gt     lt div class  row  gt       lt div class  col  gt        First  but unordered      lt  div gt       lt div class  col order-12  gt        Second  but last      lt  div gt       lt div class  col order-1  gt        Third  but first      lt  div gt     lt  div gt   lt  div gt

User · Answer

bootstrap-4 add class float-left or right for floating

User · Answer

For anyone else and just an addition to Robert  If your nav has flex display value  you can float the element that you need to the right  by adding this to its css         margin-left  auto

User · Answer

The classes are float-right float-sm-right etc   The media queries are mobile-first  so using float-sm-right would affect small screen sizes and anything wider  so there s no reason to add a class for each width  Just use the smallest screen you want to affect or float-right for all screen widths   Official Docs   Classes  https   getbootstrap com docs 4 4 utilities float   Updating  https   getbootstrap com docs 4 4 migration  utilities  If you are updating an existing project based on an earlier version of Bootstrap  you can use sass extend to apply the rules to the old class names    pull-right        extend  float-right     pull-left        extend  float-left

User · Answer

Thay are removed    Use float-left instead of pull-left   And float-right instead of pull-right   Check bootstrap Documentation here      Added  float- sm md lg xl - left right none  classes for responsive   floats and removed  pull-left and  pull-right since they   re redundant   to  float-left and  float-right

User · Answer

I was able to do this with the following classes in my project  d-flex justify-content-end   lt div class  col-lg-6 d-flex justify-content-end  gt

[bootstrap-4] What happened to the .pull-left and .pull-right classes in Bootstrap 4?

Examples related to bootstrap-4