Getting startedFoundationsUtilitiesComponentsReleasesSupportGetting startedFoundationsUtilitiesComponentsReleasesColorsDisplayFlexGridScreenreadersSizingSpacingTableText

CSS Sizing

Use the height and width utilities to make elements about as wide and as tall as their parents.

Example

Width 25%
Width 50%
Width 75%
Width 100%
Width auto
<div>
  <div class="w-25 p-1 bg-gray">Width 25%</div>
  <div class="w-50 p-1 mt-1 bg-gray">Width 50%</div>
  <div class="w-75 p-1 mt-1 bg-gray">Width 75%</div>
  <div class="w-100 p-1 mt-1 bg-gray">Width 100%</div>
  <div class="w-auto p-1 mt-1 bg-gray">Width auto</div>
</div>
Height auto
Height 25%
Height 50%
Height 75%
Height 100%
<div class="m-1" style="height: 10rem">
  <div class="h-auto d-inline-block mr-1 px-1 bg-gray">Height auto</div>
  <div class="h-25 d-inline-block mr-1 px-1 bg-gray">Height 25%</div>
  <div class="h-50 d-inline-block mr-1 px-1 bg-gray">Height 50%</div>
  <div class="h-75 d-inline-block mr-1 px-1 bg-gray">Height 75%</div>
  <div class="h-100 d-inline-block px-1 bg-gray">Height 100%</div>
</div>
  • .m-auto
  • .h-25
  • .h-50
  • .h-75
  • .h-100
  • .mh-100
  • .w-auto
  • .w-25
  • .w-50
  • .w-75
  • .w-100
  • .mw-100

If you need to, utilize max-width: 100% and max-height: 100% utilities (.mw-100 and .mh-100).

The fill-content helper class dynamically adjusts an element’s height by calculating the remaining viewport space after accounting for the header and footer. It adapts across breakpoints to ensure the element fills the available area.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.

Open source