Align button to the right

Question

I know this must be really simple but I m trying to set a button to the right of the window using only bootstrap 4 classes  It must be in the same row as the text    lt html gt   lt head gt   lt  head gt       lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 css bootstrap min css  integrity  sha384-rwoIResjU2yc3z8GV NPeZWAv56rSmLldC3R AZzGRnGxQQKnKkoFVhFQhNUwEyJ  crossorigin  anonymous  gt       lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 js bootstrap min js  integrity  sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk 02D9phzyeVkE jo0ieGizqPLForn  crossorigin  anonymous  gt  lt  script gt       lt body gt           lt div class  row  gt               lt h3 class  one  gt Text lt  h3 gt               lt button class  btn btn-secondary pull-right  gt Button lt  button gt           lt  div gt       lt  body gt   lt  html gt    The code is in here

User · Answer

If you don t want to use float  the easiest and cleanest way to do it is by using an auto width column      lt div class  row  gt     lt div class  col  gt       lt h3 class  one  gt Text lt  h3 gt     lt  div gt     lt div class  col-auto  gt       lt button class  btn btn-secondary pull-right  gt Button lt  button gt     lt  div gt   lt  div gt

User · Answer

Maybe you can use float right     x000D   x000D   one   x000D    padding-left  1em  x000D    text-color  white  x000D     display inline   x000D    x000D   two   x000D    background-color   00ffff  x000D    x000D   pull-right  x000D    float right  x000D    x000D   lt html gt  x000D   lt head gt  x000D    x000D     lt  head gt  x000D     lt body gt  x000D         lt div class  row  gt  x000D          lt h3 class  one  gt Text lt  h3 gt  x000D          lt button class  btn btn-secondary pull-right  gt Button lt  button gt  x000D       lt  div gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Bootstrap 4 uses  float-right as opposed to  pull-right in Bootstrap 3  Also  don t forget to properly nest your rows with columns    lt div class  row  gt       lt div class  col-lg-12  gt           lt h3 class  one  gt Text lt  h3 gt           lt button class  btn btn-secondary float-right  gt Button lt  button gt       lt  div gt   lt  div gt

User · Answer

You can also use like below code    lt button style  position  absolute  right  0   gt Button lt  button gt

User · Answer

try to put your script and link on the head like this    lt html gt     lt head gt        lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 css bootstrap min css  integrity  sha384-rwoIResjU2yc3z8GV NPeZWAv56rSmLldC3R AZzGRnGxQQKnKkoFVhFQhNUwEyJ  crossorigin  anonymous  gt        lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 js bootstrap min js  integrity  sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk 02D9phzyeVkE jo0ieGizqPLForn  crossorigin  anonymous  gt         lt  script gt     lt  head gt     lt body gt        lt div class  row  gt           lt h3 class  one  gt Text lt  h3 gt           lt button class  btn btn-secondary pull-right  gt Button lt  button gt        lt  div gt     lt  body gt   lt  html gt

User · Answer

The bootstrap 4 0 0 file you are getting from cdn doesn t have a pull-right  or pull-left  class  The v4 is in alpha  so there are many issues like that    There are 2 options   1  Reverse to bootstrap 3 3 7  2  Write your own CSS

User · Answer

lt div class  container-fluid  gt     lt div class  row  gt       lt h3 class  one  gt Text lt  h3 gt       lt button class  btn btn-secondary ml-auto  gt Button lt  button gt     lt  div gt   lt  div gt     ml-auto is Bootstraph 4 s non-flexbox way of aligning things

[css] Align button to the right

Examples related to css

Examples related to bootstrap-4