Bootstrap 4 float-right inside .row

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="" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="row ml-1">
     Hello from left
  <div class="ml-auto mr-3">
     Hello from right

Here’s the official docuemtation link and example:

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