'Bootstrap 4 float-right inside .row

I'm new to Bootstrap 4 and can't seem to get float-right on a col div working within a row. Here's my code: 

<div class="row" >
<div class="col-md-8 float-right" style="border: 1px solid red;">
<h3>Five grid tiers</h3>
<p>Hi</p>

</div>
</div>

Weirdly it works fine without the row as a parent div, but I'd like to use the row. Am I missing something?

Thanks :)

htmltwitter-bootstrapbootstrap-4


Solution 1:[1]

row is a flex container in bootstrap-4, to align content in flex-container you need to use ml-auto and mr-auto.

Here's the example:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="row ml-1">
  <div>
     Hello from left
  </div>
  <div class="ml-auto mr-3">
     Hello from right
  </div>
</div>

Here's the official docuemtation link and example: https://getbootstrap.com/docs/4.0/utilities/flex/#auto-margins

For cases like when flex container is not being used, you can use float-right which is equivalent of pull-right in previous versions.

There is also an utility Justify Content to change alignment of items in flex container.

Solution 2:[2]

Bootstrap 4 has incorporated Flexbox for their layouts. You can get your desired result by adding the class 'justify-content-end' to the parent container.

<div class="row justify-content-end" >
  <div class="col-md-8" style="border: 1px solid red;">
    <h3>Five grid tiers</h3>
    <p>Hi</p>
  </div>
</div>

If you want to learn the basics of Flexbox, I recommend checking out this quick and fun tutorial: http://flexboxfroggy.com/. It's a great system, though it is not supported in Legacy IE (IE 9 and earlier).

Solution 3:[3]

Standing to bootstrap documentation you should use ml-auto class on the col you want to be placed on the right.

In this way (look at the example) you can have only the item you want on the right, while all the other cols will still be on the natural flow (on the left).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
    <div class="col-3 border border-primary">
      One 
    </div>
    <div class="col-3 border border-primary">
      Two
    </div>
    <div class="col-3 border border-success ml-auto">
      Three
    </div>
  </div>
</div>

Solution 4:[4]

Soren is correct. Bootstrap 4 uses flex box. Floats stuck! Try to forget them! 

<div class="row justify-content-end">
  <div class="col-4"> One of two columns </div>
  <div class="col-4"> One of two columns </div>
</div>

Pull-right is a bootstrap 3 tag.

Solution 5:[5]

What you could try:

<div class="row float-right">
    <div class="col-md-8 float-right" style="border: 1px solid red;">
        <h3>Five grid tiers</h3>
        <p>Hi</p>
    </div>
</div>

If you are using bootstrap 3, you will have to use pull-right instead of float-right.

Solution 6:[6]

If all you want is to "pull" the column to the right, you can use an "offset". Since you use col-md-8, add offset-md-4.

<div class="row">
  <div class="col-md-8 offset-md-4" style="border: 1px solid red;">
    <h3>Five grid tiers</h3>
    <p>Hi</p>

  </div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

Solution 7:[7]

.right-searchbox-content {
     margin-left: auto !important;
}

.right-searchbox {
    float: right !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
<div class="row">
<div class="right-searchbox-content">
    <div class="right-searchbox">
        <div class="header">
            <span>my search:</span>
        </div>
        <div>
            <input class="form-control">
        </div>
    </div>
</div>

Solution 8:[8]

This code snippet helped me to position the Create Account button at the right.

<div class="row justify-content-end">
    <div class="col-md-2">
        <a asp-action="AddAccount" class="btn btn-secondary w-100">
        <i class="fas fa-backward"></i>Create Account</a>
    </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jainik
Solution 2 Soren Baird
Solution 3 GiuServ
Solution 4 Syscall
Solution 5 Nrzonline
Solution 6 Sébastien
Solution 7
Solution 8

Related Questions