Width

Defines the width of an element.

Classes
Class Properties
w-full width: 100%;
w-screen width: 100vw;
w-auto width: auto;
w-min width: min-content;
w-max width: max-content;
w-1 width: 8.3333%;
w-2 width: 16.6667%;
w-3 width: 25%;
w-4 width: 33.3333%;
w-5 width: 41.6667%;
w-6 width: 50%;
w-7 width: 58.3333%;
w-8 width: 66.6667%;
w-9 width: 75%;
w-10 width: 83.3333%;
w-11 width: 91.6667%;
w-12 width: 100%;
w-1rem width: 1rem;
w-2rem width: 2rem;
w-3rem width: 3rem;
w-4rem width: 4rem;
w-5rem width: 5rem;
w-6rem width: 6rem;
w-7rem width: 7rem;
w-8rem width: 8rem;
w-9rem width: 9rem;
w-10rem width: 10rem;
w-11rem width: 11rem;
w-12rem width: 12rem;
w-13rem width: 13rem;
w-14rem width: 14rem;
w-15rem width: 15rem;
w-16rem width: 16rem;
w-17rem width: 17rem;
w-18rem width: 18rem;
w-19rem width: 19rem;
w-20rem width: 20rem;
w-21rem width: 21rem;
w-22rem width: 22rem;
w-23rem width: 23rem;
w-24rem width: 24rem;
w-25rem width: 25rem;
w-26rem width: 26rem;
w-27rem width: 27rem;
w-28rem width: 28rem;
w-29rem width: 29rem;
w-30rem width: 30rem;
Examples
w-full
w-auto
w-min
w-max

<div class="card flex flex-wrap align-items-center justify-content-center">
    <div class="bg-blue-50 shadow-1 p-3 m-3" style="width: 200px;">
        <div class="w-full bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">w-full</div>
    </div>
    <div class="bg-blue-50 shadow-1 p-3 m-3" style="width: 200px;">
        <div class="w-auto bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">w-auto</div>
    </div>
    <div class="bg-blue-50 shadow-1 p-3 m-3" style="width: 200px;">
        <div class="w-min bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">w-min</div>
    </div>
    <div class="bg-blue-50 shadow-1 p-3 m-3" style="width: 200px;">
        <div class="w-max bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">w-max</div>
    </div>
</div>

Fixed Width

Various fixed width options are built-in based on rem units.

w-6rem
w-11rem
w-20rem
w-24rem

<div class="card flex flex-column flex-wrap align-items-center justify-content-center">
    <div class="w-26rem">
        <div class="w-6rem bg-blue-100 text-blue-500 font-bold shadow-2 p-3 m-3 flex align-items-center justify-content-center">w-6rem</div>
        <div class="w-11rem bg-blue-100 text-blue-500 font-bold shadow-2 p-3 m-3 flex align-items-center justify-content-center">w-11rem</div>
        <div class="w-20rem bg-blue-100 text-blue-500 font-bold shadow-2 p-3 m-3 flex align-items-center justify-content-center">w-20rem</div>
        <div class="w-24rem bg-blue-100 text-blue-500 font-bold shadow-2 p-3 m-3 flex align-items-center justify-content-center">w-24rem</div>
    </div>
</div>

Fluid Width

Fluid widths are based on percentages on a 12 grid system.

w-2
w-10
w-4
w-8
w-5
w-7
w-6
w-6
w-9
w-3
w-12

<div class="card ">
    <div class="flex bg-blue-50 shadow-1 p-3 m-3">
        <div class="w-2 bg-blue-100 text-blue-500 font-bold shadow-2 p-2 flex align-items-center justify-content-center">w-2</div>
        <div class="w-10 bg-blue-200 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">w-10</div>
    </div>
    <div class="flex bg-blue-50 shadow-1 p-3 m-3">
        <div class="w-4 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">w-4</div>
        <div class="w-8 bg-blue-200 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">w-8</div>
    </div>
    <div class="flex bg-blue-50 shadow-1 p-3 m-3">
        <div class="w-5 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">w-5</div>
        <div class="w-7 bg-blue-200 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">w-7</div>
    </div>
    <div class="flex bg-blue-50 shadow-1 p-3 m-3">
        <div class="w-6 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">w-6</div>
        <div class="w-6 bg-blue-200 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">w-6</div>
    </div>
    <div class="flex bg-blue-50 shadow-1 p-3 m-3">
        <div class="w-9 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">w-9</div>
        <div class="w-3 bg-blue-200 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">w-3</div>
    </div>
    <div class="flex bg-blue-50 shadow-1 p-3 m-3">
        <div class="w-12 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">w-12</div>
    </div>
</div>

Responsive

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:w-full to use a responsive class.

  • sm: small screens e.g. phones
  • md: medium screens e.g. tablets
  • lg: large screens e.g. notebooks
  • xl: larger screens e.g monitors
w-min on small screen

<div class="card flex flex-wrap align-items-center justify-content-center">
    <div class="bg-blue-50 shadow-1 p-3 m-3" style="width: 220px;">
        <div class="w-min md:w-max  bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">w-min on small screen</div>
    </div>
</div>