Bootstrap Float and Clearfix Classes - Bootstrap5 Tutorial 23

Notes for You:: Bootstrap Float and Clearfix Classes.

float[-*]-start:
- allows us to float child HTML elements to the left in their parent.

float[-*]-end:
- allows us to float child HTML elements to the right in their parent.

clearfix:
- allows us to remove the floating effect on the parent.

* = sm, md, lg, xl



Example Code:

﹤div class="bg-warning clearfix"﹥
﹤div style="width:100px; height:100px;" class="bg-primary float-start"﹥
﹤/div﹥
﹤div style="width:100px; height:100px;" class="bg-secondary float-start"﹥
﹤/div﹥
﹤div style="width:100px; height:100px;" class="bg-success float-start"﹥
﹤/div﹥
﹤/div﹥
﹤br/﹥
﹤div class="bg-warning clearfix"﹥
﹤div style="width:100px; height:100px;" class="bg-primary float-end"﹥
﹤/div﹥
﹤div style="width:100px; height:100px;" class="bg-secondary float-end"﹥
﹤/div﹥
﹤div style="width:100px; height:100px;" class="bg-success float-end"﹥
﹤/div﹥
﹤/div﹥
﹤br/﹥
﹤div class="bg-warning clearfix"﹥
﹤div style="width:100px; height:100px;" class="bg-primary float-start"﹥
﹤/div﹥
﹤div style="width:100px; height:100px;" class="bg-secondary float-start"﹥
﹤/div﹥
﹤div style="width:100px; height:100px;" class="bg-success float-end"﹥
﹤/div﹥
﹤div style="width:100px; height:100px;" class="bg-info float-end"﹥
﹤/div﹥
﹤/div﹥

﹤br/﹥
﹤div class="bg-warning clearfix"﹥
﹤div style="width:100px; height:100px;" class="bg-primary float-lg-start float-sm-end"﹥
﹤/div﹥
﹤div style="width:100px; height:100px;" class="bg-secondary float-lg-start float-sm-end"﹥
﹤/div﹥
﹤/div﹥


Complete Code:
﹤!doctype html﹥
﹤html lang="en"﹥
﹤head﹥
﹤meta charset="utf-8"﹥
﹤title﹥Bootstrap Demo﹤/title﹥
﹤meta name="viewport" content="width=device-width, initial-scale=1"﹥
﹤link href="bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"﹥
﹤/head﹥
﹤body﹥

﹤div class="bg-warning clearfix"﹥
﹤div style="width:100px; height:100px;" class="bg-primary float-start"﹥
﹤/div﹥
﹤div style="width:100px; height:100px;" class="bg-secondary float-start"﹥
﹤/div﹥
﹤div style="width:100px; height:100px;" class="bg-success float-start"﹥
﹤/div﹥
﹤/div﹥
﹤br/﹥
﹤div class="bg-warning clearfix"﹥
﹤div style="width:100px; height:100px;" class="bg-primary float-end"﹥
﹤/div﹥
﹤div style="width:100px; height:100px;" class="bg-secondary float-end"﹥
﹤/div﹥
﹤div style="width:100px; height:100px;" class="bg-success float-end"﹥
﹤/div﹥
﹤/div﹥
﹤br/﹥
﹤div class="bg-warning clearfix"﹥
﹤div style="width:100px; height:100px;" class="bg-primary float-start"﹥
﹤/div﹥
﹤div style="width:100px; height:100px;" class="bg-secondary float-start"﹥
﹤/div﹥
﹤div style="width:100px; height:100px;" class="bg-success float-end"﹥
﹤/div﹥
﹤div style="width:100px; height:100px;" class="bg-info float-end"﹥
﹤/div﹥
﹤/div﹥

﹤br/﹥
﹤div class="bg-warning clearfix"﹥
﹤div style="width:100px; height:100px;" class="bg-primary float-lg-start float-sm-end"﹥
﹤/div﹥
﹤div style="width:100px; height:100px;" class="bg-secondary float-lg-start float-sm-end"﹥
﹤/div﹥
﹤/div﹥


﹤script src="jquery/jquery.min.js" type="text/javascript"﹥﹤/script﹥
﹤script src="popper/popper.min.js" type="text/javascript"﹥﹤/script﹥
﹤script src="bootstrap/js/bootstrap.min.js" type="text/javascript"﹥﹤/script﹥
﹤/body﹥
﹤/html﹥


Note:
- replace ﹤ with less-than symbol.
- replace ﹥ with greater-than symbol.

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

Follow the link for next video:
https://youtu.be/LTIqVVMURJs

Follow the link for previous video:
https://youtu.be/tp7ccW3tIDg

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

Bootstrap5 Tutorials Playlist:
https://www.youtube.com/playlist?list=PLdE8ESr9Th_tgGKttdOp9YWporo2zEr5Q

Bootstrap4 Tutorials Playlist:-
https://www.youtube.com/playlist?list=PLdE8ESr9Th_vnCOUPx1fhQLRZGENyfuMG

=========================================
Watch my other useful tutorials:-

Dreamweaver Tutorials Playlist:-
https://www.youtube.com/playlist?list=PLdE8ESr9Th_sGP0m9D68jHqZQr_qRzDXk

PHP Tutorials Playlist:-
https://www.youtube.com/playlist?list=PLdE8ESr9Th_s8zash4d8He_49QS_VVmAG

MySQL Tutorials Playlist:-
https://www.youtube.com/playlist?list=PLdE8ESr9Th_tvPGAlbOEc-0_qleTOBgmU

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

Subscribe to our YouTube channel:-
https://www.youtube.com/chidrestechtutorials

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