How do I right align an element using twitter bootstrap?

Question

I have 3 elements and I am trying to align the button to the right side of the screen, but am having trouble doing so.

<div class="container">
  <div class="row-fluid">
    <h4>
      <img src="img.png" style="width:50px;">
      Title
      <a href="link_to_img.html" class="btn btn-success">Grab it!</a>
    </h4>
  </div>
</div>

score 64 · Accepted Answer · edited Jul 07 '14 at 01:59

64

Try the class 'pull-right'.

<div class="pull-right">...</div>

See http://getbootstrap.com/css/#helper-classes-floats

edited Jul 07 '14 at 01:59

Dhaust

5,470
9
54
80

answered Mar 14 '13 at 23:45

Stefan

832
8
10

4

Note: You must apply the 'pull-right' class to the element you want right aligned, not it's parent/container. – Dhaust Jul 07 '14 at 01:55
If you are using Bootstrap 4, you need to use `float-right`. Source: https://getbootstrap.com/docs/4.5/migration/#utilities – Julian Espinel Aug 16 '20 at 09:22

score 8 · Answer 2 · answered Mar 14 '13 at 23:46

8

try something like this

<a href = "link_to_img.html" class = 'btn btn-success pull-right'>Grab it!</a>

answered Mar 14 '13 at 23:46

trajce

1,480
3
23
38

score 0 · Answer 3 · answered Jun 01 '17 at 08:33

Utilise justify-content-end

From the bootstrap documentation, it says:

Bootstrap 3 used .navbar-left and .navbar-right for navbar alignment.

Bootstrap 4 uses the various helper classes.

(Alignment part) https://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_navbars.cfm

and here more info about the new alignment https://www.quackit.com/css/flexbox/tutorial/flexbox_alignment.cfm

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<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>

  <style>
    .wrapper {
      display: flex;
      align-items: center;
      background-color: beige;
      height: 100vh;
    }

    .wrapper > div {
      padding: 20px;
      font-size: 4vw;
      color: white;
    }

    .red {
      background: orangered;
    }

    .green {
      background: yellowgreen;
    }

    .blue {
      background: steelblue;
    }

    body {
      margin: 0;
    }
  </style>
  <div class="wrapper justify-content-end">
    <div class="red">1</div>
    <div class="green">2</div>
    <div class="blue">3</div>
  </div>
</body>

</html>

https://plnkr.co/edit/LtfW2fj9f3E9Ehj1M8jN?p=catalogue

score 0 · Answer 4 · answered Jun 14 '21 at 20:17

0

In Bootstrap v4:

<div class="float-right">Float right on all viewport sizes</div>

Bootstap v4 docs

In Bootstrap v5:

<div class="float-end">Float end on all viewport sizes</div>

Bootstrao v5 docs

answered Jun 14 '21 at 20:17

t2t

1,101
2
12
15

How do I right align an element using twitter bootstrap?

4 Answers4

Linked