Bootstrap 4
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 :

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.