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.

<html>
<head>
</head>
    <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">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <body>
        <div class="row">
            <h3 class="one">Text</h3>
            <button class="btn btn-secondary pull-right">Button</button>
        </div>
    </body>
</html>

The code is in here

score 130 · Accepted Answer · edited Nov 14 '17 at 22:51

130

Bootstrap 4 uses .float-right as opposed to .pull-right in Bootstrap 3. Also, don't forget to properly nest your rows with columns.

<div class="row">
    <div class="col-lg-12">
        <h3 class="one">Text</h3>
        <button class="btn btn-secondary float-right">Button</button>
    </div>
</div>

edited Nov 14 '17 at 22:51

Sebastian Brosch

42,106
15
72
87

answered Jan 27 '17 at 13:18

Serg Chernata

12,280
6
32
50

What anyone could do wrong is put them without placing them in a row and column properly. This one works nicely. – Sohan Arafat Nov 19 '21 at 13:28

score 18 · Answer 2 · answered Mar 31 '17 at 17:37

18

<div class="container-fluid">
  <div class="row">
    <h3 class="one">Text</h3>
    <button class="btn btn-secondary ml-auto">Button</button>
  </div>
</div>

.ml-auto is Bootstraph 4's non-flexbox way of aligning things.

answered Mar 31 '17 at 17:37

Killerpixler

4,200
11
42
82

1

Adding `ml-auto` to the button class works for me in Bootstrap 4 when many other things didn't (tried various things in the button class, nav class, and ul class) – James Jul 08 '19 at 15:30
"For Bootstrap-5 we have to use ms-auto instead of ml-auto", source: https://stackoverflow.com/a/65562241/1956540 – BatteryAcid Feb 02 '22 at 18:27

score 7 · Answer 3 · answered Jun 06 '18 at 07:21

7

You can also use like below code.

<button style="position: absolute; right: 0;">Button</button>

answered Jun 06 '18 at 07:21

Ankr

129
2
9

score 2 · Answer 4 · answered Oct 31 '17 at 17:24

If you don't want to use float, the easiest and cleanest way to do it is by using an auto width column:

<div class="row">
  <div class="col">
    <h3 class="one">Text</h3>
  </div>
  <div class="col-auto">
    <button class="btn btn-secondary pull-right">Button</button>
  </div>
</div>

score 2 · Answer 5 · answered Dec 27 '21 at 22:13

In my case I needed to align two or more buttons to the right, after several attempts this worked for me:

 <div class="float-right">
    <button type="button" class="btn btn-primary">First Button</button>
    <button type="button" class="btn btn-secondary">Second Button</button>
 </div>

score 0 · Answer 6 · answered May 07 '20 at 06:32

try to put your script and link on the head like this:

<html>
  <head>
     <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">
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"> 
     </script>
  </head>
  <body>
     <div class="row">
        <h3 class="one">Text</h3>
        <button class="btn btn-secondary pull-right">Button</button>
     </div>
  </body>
</html>

score -1 · Answer 7 · answered Jan 27 '17 at 13:18

-1

Maybe you can use float:right;:

.one {
  padding-left: 1em;
  text-color: white;
   display:inline; 
}
.two {
  background-color: #00ffff;
}
.pull-right{
  float:right;
}

<html>
<head>
 
  </head>
  <body>
      <div class="row">
       <h3 class="one">Text</h3>
       <button class="btn btn-secondary pull-right">Button</button>
    </div>
  </body>
</html>

answered Jan 27 '17 at 13:18

Alex

76
5

float:right; that's what i need XD – andres martinez Oct 22 '21 at 17:05

score -1 · Answer 8 · answered Feb 23 '22 at 06:19

-1

<v-btn class="float-right">  Download</v-btn>

answered Feb 23 '22 at 06:19

Asanka Sampath

545
4
12

Please read "[answer]". It helps more if you supply an explanation why this is the preferred solution and explain how it works. We want to educate, not just provide code. – the Tin Man Mar 11 '22 at 05:57

score -4 · Answer 9 · answered Jan 27 '17 at 13:20

-4

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.

answered Jan 27 '17 at 13:20

Roylyan Nikita

83
3

Was too fast with judging. Bootstrap 4 has a float-right (float-left) classes instead of pull-right (pull-left). Sorry. – Roylyan Nikita Jan 27 '17 at 13:21

Align button to the right

9 Answers9

Linked

Related