Bootstrap Sizing Classes - Bootstrap Tutorial 22

YouTube Excerpt: Notes for You:: Bootstrap Sizing Classes - Bootstrap Tutorial 22 w-25: sets the width of an element to 25% of its parent width w-50: sets the width of an element to 50% of its parent width w-75: sets the width of an element to 75% of its parent width w-100: sets the width of an element to 100% of its parent width <div style="border:1px solid black;"> <div class="bg-primary w-25">Some Text</div> <div class="bg-secondary w-50">Some Text</div> <div class="bg-success w-75">Some Text</div> <div class="bg-warning w-100">Some Text</div> <div class="bg-info" style="width:65%;">Some Text</div> </div> h-25: sets the height of an element to 25% of its parent height h-50: sets the height of an element to 50% of its parent height h-75: sets the height of an element to 75% of its parent height h-100: sets the height of an element to 100% of its parent height <div style="border:1px solid black; height:100px;"> <div class="bg-primary h-25">Some Text</div> </div> <br/> <div style="border:1px solid black; height:100px;"> <div class="bg-secondary h-50">Some Text</div> </div> <br/> <div style="border:1px solid black; height:100px;"> <div class="bg-success h-75">Some Text</div> </div> <br/> <div style="border:1px solid black; height:100px;"> <div class="bg-warning h-100">Some Text</div> </div> <br/> <div style="border:1px solid black; height:100px;"> <div class="bg-info" style="height:65%;">Some Text</div> </div> Aligning the element horizontally and vertically center: using Bootstrap flex classes <div style="border:1px solid black; height:400px;" class="bg-primary d-flex justify-content-center"> <div class=" bg-danger w-50 h-50 align-self-center"> Chidre's Tech Tutorials </div> </div> Note: - replace < with less-than symbol. - repalce > with greater-than symbol. ========================================= Follow the link for next video: Bootstrap Tutorial 23 - Bootstrap Margin & Padding Related Classes | Bootstrap Spacing https://youtu.be/04gP_FVUbSg Follow the link for previous video: Bootstrap Tutorial 21 - Bootstrap Form Related Classes | Bootstrap Forms https://youtu.be/-AgvHoBKQRI ========================================= Bootstrap 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 ► Visit our Website: https://www.chidrestechtutorials.com ========================================= Hash Tags:- #ChidresTechTutorials #Bootstrap #BootstrapTutorial

Notes for You:: Bootstrap Sizing Classes - Bootstrap Tutorial 22 w-25: sets the width of an element to 25% of its parent width w-50: sets the...

Read Full Article 🔍

Curious about Bootstrap Sizing Classes - Bootstrap Tutorial 22's Color? Explore detailed estimates, salary breakdowns, and financial insights that reveal the full picture of their profile.

Source ID: z2BdIVbozWk

Category: color style guide