Bootstrap 4 float-right inside .row

by

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.

Leave a Comment