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