36

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>

4 Answers 4

63

Try the class 'pull-right'.

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

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

2
8

try something like this

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.