Bootstrap Float and Clearfix Classes - Bootstrap Tutorial 26

Опубликовано: 05 Август 2026
на канале: ChidresTechTutorials

1,460

Notes for You:: Bootstrap Float and Clearfix Classes - Bootstrap Tutorial 26

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>

Note:
replace < with less-than symbol.
replace > with greater-than symbol.
=========================================

Follow the link for previous video:
Bootstrap Tutorial 25 - Bootstrap Rounded Corners Related Classes | Bootstrap Rounded Corners
   • Bootstrap Rounded Corner Classes - Bootstr...

=========================================

Bootstrap Tutorials Playlist:-
   • Bootstrap4 Tutorials

=========================================
Watch My Other Useful Tutorials:-

Dreamweaver Tutorials Playlist:-
   • Dreamweaver Tutorials - The Ultimate Course

PHP Tutorials Playlist:-
   • PHP Tutorials - The Ultimate Course

MySQL Tutorials Playlist:-
   • MySQL Tutorials - The Ultimate Course

=========================================

► Subscribe to our YouTube channel:
   / chidrestechtutorials

► Visit our Website:
https://www.chidrestechtutorials.com

=========================================
Hash Tags:-
#ChidresTechTutorials #Bootstrap #BootstrapTutorial