Bootstrap 4 Float


Basic Float

If you want to float an element on the right side in bootstrap, you need to use .float-right class and if you want to float an element on the left side, you need to use .float-left class. To clear the float, you need to apply the .clearfix class.



Left Float

Example Code

<div class="clearfix">
<button class="btn btn-outline-primary float-left">Float-Left</button>
</div>

Right Float

Example Code

<div class="clearfix">
<button class="btn btn-outline-primary float-right">Float-Right</button>
</div>

Float with image

Shadow with image

Example code

<div class="clearfix">
<img class="img-fluid shadow-lg float-right" height="100" width="300" alt="Shadow with image" src="./tajmahal.jpeg">
</div>

Responsive floats

Float an element to the left or to the right depending on screen width, with the responsive float classes (.float-*-left|right - where * is sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):

float right on small screen or wider

float right on medium screen or wider

float right on large screen or wider

float right on extra large screen or wider

Float none

Example code

<div class="clearfix">
<div class="float-sm-right">float right on small screen or wider</div><br>
<div class="float-md-right">float right on medium screen or wider</div><br>
<div class="float-lg-right">float right on large screen or wider</div><br>
<div class="float-xl-right">float right on extra large screen or wider</div><br>
<div class="float-none">Float none</div>
</div>