Defines the maximum width of an element.
| Class | Properties |
|---|---|
| max-w-0 | max-width: 0px; |
| max-w-full | max-width: 100%; |
| max-w-screen | max-width: 100vw; |
| max-w-min | max-width: min-content; |
| max-w-max | max-width: max-content; |
| max-w-1rem | max-width: 1rem; |
| max-w-2rem | max-width: 2rem; |
| max-w-3rem | max-width: 3rem; |
| max-w-4rem | max-width: 4rem; |
| max-w-5rem | max-width: 5rem; |
| max-w-6rem | max-width: 6rem; |
| max-w-7rem | max-width: 7rem; |
| max-w-8rem | max-width: 8rem; |
| max-w-9rem | max-width: 9rem; |
| max-w-10rem | max-width: 10rem; |
| max-w-11rem | max-width: 11rem; |
| max-w-12rem | max-width: 12rem; |
| max-w-13rem | max-width: 13rem; |
| max-w-14rem | max-width: 14rem; |
| max-w-15rem | max-width: 15rem; |
| max-w-16rem | max-width: 16rem; |
| max-w-17rem | max-width: 17rem; |
| max-w-18rem | max-width: 18rem; |
| max-w-19rem | max-width: 19rem; |
| max-w-20rem | max-width: 20rem; |
| max-w-21rem | max-width: 21rem; |
| max-w-22rem | max-width: 22rem; |
| max-w-23rem | max-width: 23rem; |
| max-w-24rem | max-width: 24rem; |
| max-w-25rem | max-width: 25rem; |
| max-w-26rem | max-width: 26rem; |
| max-w-27rem | max-width: 27rem; |
| max-w-28rem | max-width: 28rem; |
| max-w-29rem | max-width: 29rem; |
| max-w-30rem | max-width: 30rem; |
<div class="flex flex-wrap align-items-center justify-content-center">
<div class="border-round bg-primary-100 w-12rem p-3 m-3">
<div class="max-w-full border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">max-w-full</div>
</div>
</div>
Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:max-w-full to use a responsive class.
| Class | Description |
|---|---|
| sm: | small screens e.g. phones |
| md: | medium screens e.g. tablets |
| lg: | large screens e.g. notebooks |
| xl: | larger screens e.g monitors |
<div class="flex flex-wrap align-items-center justify-content-center">
<div class="border-round bg-primary-100 w-20rem p-3 m-3">
<div class="max-w-min md:max-w-max border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">max-w-min on small screen</div>
</div>
</div>