Bootstrap 4 Sizing, How To Learn Bootstrap 4 Sizing Tutorial

Bootstrap 4 Tutorial

Bootstrap 4 Sizing

Bootstrap sizes are easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Width and height utilities are generated from the $sizes Sass map in _variables.scss. Includes support for 25%, 50%, 75%, and 100% by default. Modify those values as you need to generate different utilities here.

<style type="text/css">
.box{ 
	border:1px solid #000; 
	background:#EEE; 
	margin:5px;
}
</style>

<div class="w-25 p-3 box">Width 25%</div>
<div class="w-50 p-3 box">Width 50%</div>
<div class="w-75 p-3 box">Width 75%</div>
<div class="w-100 p-3 box">Width 100%</div>

Output :

<style type="text/css">
.box{ 
	background:#EEE; 
	margin:5px;
}
</style>

<div class="bg-primary" style="height:120px;">
  <div class="h-25 d-inline-block box" style="width: 120px;">Height 25%</div>
  <div class="h-50 d-inline-block box" style="width: 120px;">Height 50%</div>
  <div class="h-75 d-inline-block box" style="width: 120px;">Height 75%</div>
  <div class="h-100 d-inline-block box" style="width: 120px;">Height 100%</div>
</div>

Output :

You can also use max-width: 100%; and max-height: 100%; utilities as needed.

<style type="text/css">
.box{ 
	background:#EEE; 
	margin:5px;
	border:1px solid #000;
	height:80px;
	padding:20px 0px;
}
</style>

<div class="mw-100 box">
	<h2 class="text-center">Max-width = 100%</h2>
</div>

Output :

<div class="bg-secondary" style="height: 100px;">
  <div class="mh-100 bg-primary text-light" style="width:150px; height: 200px;">Max-height 100%</div>
</div>

Output :

Bootstrap 4 Tutorial