Bootstrap Float & Clearfix Related Classes
Notes:
Bootstrap - Float & Clearfix related classes
float-*-left:
- floats the element to the front and to the left in its parent
float-*-right:
- floats the element to the front and to the right in its parent
clearfix:
- removes the floating effect on the parent
* = sm, md, lg, xl
Example Code:
<div class="border border-dark clearfix">
<div style="width:100px; height:100px;" class="bg-primary float-left">
</div>
<div style="width:100px; height:100px;" class="bg-secondary float-left">
</div>
<div style="width:100px; height:100px;" class="bg-success float-left">
</div>
</div>
<div class="border border-dark clearfix">
<div style="width:100px; height:100px;" class="bg-primary float-right">
</div>
<div style="width:100px; height:100px;" class="bg-secondary float-right">
</div>
<div style="width:100px; height:100px;" class="bg-success float-right">
</div>
</div>
<div class="border border-dark clearfix">
<div style="width:100px; height:100px;" class="bg-primary float-left">
</div>
<div style="width:100px; height:100px;" class="bg-secondary float-left">
</div>
<div style="width:100px; height:100px;" class="bg-success float-right">
</div>
<div style="width:100px; height:100px;" class="bg-info float-right">
</div>
</div>
<div class="border border-dark clearfix">
<div class="bg-primary float-lg-left float-sm-right" style="width:100px;height:100px;">
</div>
<div class="bg-secondary float-lg-left float-sm-right" style="width:100px;height:100px;">
</div>
<div class="bg-success float-lg-left float-sm-right" style="width:100px;height:100px;">
</div>
</div>
Interview Questions:
