Bootstrap Float and Clearfix Classes - Bootstrap Tutorial 26

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 Tutorials Playlist:-

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

Dreamweaver Tutorials Playlist:-

PHP Tutorials Playlist:-

MySQL Tutorials Playlist:-

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

► Subscribe to our YouTube channel:

► Visit our Website:

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

[ChidresTechTutorials]

SUBSCRIBE, SHARE & SUPPORT:
VISIT & LEARN AT FREE OF COST:

[mdsoyebbhuiya]

Wonderful explanation, amazing, Thank you very much.

[AmitKumarem]

Just finished bootstrap series. it was so informative and useful. Easy to understand .

Sir, please create series on bootstrap grid system .

[prabhakarsingh-etxl]

Sir Ji, Kindly complete the series. many class seems pending. i have studied all your video and now curiosity is increased to know more but unfortunately there is no further video.