Bootstrap 4 float-right inside .row

Question

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 :)

Answer 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.

Answer 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).