Max Width
React Bootstrap 5 Max Width component
Responsive React 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
import React from 'react'; export default function App() { return ( <> <div className="w-25 p-3" style={{ backgroundColor: "#eee" }}>Width 25%</div> <div className="w-50 p-3" style={{ backgroundColor: "#eee" }}>Width 50%</div> <div className="w-75 p-3" style={{ backgroundColor: "#eee" }}>Width 75%</div> <div className="w-100 p-3" style={{ backgroundColor: "#eee" }}>Width 100%</div> <div className="w-auto p-3" style={{ backgroundColor: "#eee" }}>Width auto</div> </> ); } You can also use max-width: 100%; utilities as needed.
import React from 'react'; export default function App() { return ( <img src="https://mdbootstrap.com/img/new/slides/041.jpg" className="mw-100" alt="..." /> ); } 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.
import React from 'react'; export default function App() { return ( <> <div className="min-vw-100">Min-width 100vw</div> <div className="min-vh-100">Min-height 100vh</div> <div className="vw-100">Width 100vw</div> <div className="vh-100">Height 100vh</div> </> ); }