Bootstrap Sizing Classes - Bootstrap Tutorial 22

Показать описание

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

Follow the link for previous video:
Bootstrap Tutorial 21 - Bootstrap Form Related Classes | Bootstrap Forms

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

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