Bootstrap Sizing Related Classes
Notes:
Bootstrap - Sizing - Width & Height related classes:
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
Example Code:
<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
Example Code:
<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
Example Code:
<div style="height:400px;" class="bg-primary d-flex justify-content-center">
<div class="w-50 h-50 bg-danger align-self-center"> Chidre's Tech Tutorials </div>
</div>
Interview Questions:
