Max Width

Bootstrap 5 Max Width component

Responsive Max Width built with Bootstrap 5. Learn how to make a container or an element max width within its parent.

Examples

Width utilities are generated from the utility API in _utilities.scss. Predefined classes support 25%, 50%, 75%, 100%, and auto by default. In order to make an element take the entire width of its parent add a .w-100 class to it.

Width 25%
Width 50%
Width 75%
Width 100%
Width auto
Edit in sandbox 
        
            
          <div class="w-25 ...">Width 25%</div>
          <div class="w-50 ...">Width 50%</div>
          <div class="w-75 ...">Width 75%</div>
          <div class="w-100 ...">Width 100%</div>
          <div class="w-auto ...">Width auto</div>

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

wild landscape
Edit in sandbox 
        
            
          <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="mw-100" alt="wild landscape" />

Max width relative to viewport

You can also use utilities to set the width and height relative to the viewport with the vw (viewport width) values.

Edit in sandbox 
        
            
          <div class="min-vw-100">Min-width 100vw</div>
          <div class="vw-100">Width 100vw</div>