⌘ K
esc

    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">
        <div class="flex flex-wrap align-items-center justify-content-center card-container blue-container">
            <div class="border-round bg-blue-100 w-12rem p-3 m-3">
                <div class="w-full border-round bg-blue-500 text-white font-bold p-3 flex align-items-center justify-content-center">w-full</div>
            </div>
            <div class="border-round bg-blue-100 w-12rem p-3 m-3">
                <div class="w-auto border-round bg-blue-500 text-white font-bold p-3 flex align-items-center justify-content-center">w-auto</div>
            </div>
            <div class="border-round bg-blue-100 w-12rem p-3 m-3">
                <div class="w-min border-round bg-blue-500 text-white font-bold p-3 flex align-items-center justify-content-center">w-min</div>
            </div>
            <div class="border-round bg-blue-100 w-12rem p-3 m-3">
                <div class="w-max border-round bg-blue-500 text-white font-bold p-3 flex align-items-center justify-content-center">w-max</div>
            </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">
        <div class="flex flex-column flex-wrap align-items-center justify-content-center card-container yellow-container">
            <div class="w-26rem">
                <div class="w-6rem border-round bg-yellow-500 text-gray-900 font-bold p-3 m-3 flex align-items-center justify-content-center">w-6rem</div>
                <div class="w-11rem border-round bg-yellow-500 text-gray-900 font-bold p-3 m-3 flex align-items-center justify-content-center">w-11rem</div>
                <div class="w-20rem border-round bg-yellow-500 text-gray-900 font-bold p-3 m-3 flex align-items-center justify-content-center">w-20rem</div>
                <div class="w-24rem border-round bg-yellow-500 text-gray-900 font-bold p-3 m-3 flex align-items-center justify-content-center">w-24rem</div>
            </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="card-container green-container">
            <div class="flex border-round bg-green-100 p-3 m-3">
                <div class="w-2 bg-green-300 text-gray-900 font-bold p-2 flex align-items-center justify-content-center">w-2</div>
                <div class="w-10 bg-green-500 text-white font-bold p-3 flex align-items-center justify-content-center">w-10</div>
            </div>
            <div class="flex border-round bg-green-100 p-3 m-3">
                <div class="w-4 bg-green-300 text-gray-900 font-bold p-3 flex align-items-center justify-content-center">w-4</div>
                <div class="w-8 bg-green-500 text-white font-bold p-3 flex align-items-center justify-content-center">w-8</div>
            </div>
            <div class="flex border-round bg-green-100 p-3 m-3">
                <div class="w-5 bg-green-300 text-gray-900 font-bold p-3 flex align-items-center justify-content-center">w-5</div>
                <div class="w-7 bg-green-500 text-white font-bold p-3 flex align-items-center justify-content-center">w-7</div>
            </div>
            <div class="flex border-round bg-green-100 p-3 m-3">
                <div class="w-6 bg-green-300 text-gray-900 font-bold p-3 flex align-items-center justify-content-center">w-6</div>
                <div class="w-6 bg-green-500 text-white font-bold p-3 flex align-items-center justify-content-center">w-6</div>
            </div>
            <div class="flex border-round bg-green-100 p-3 m-3">
                <div class="w-9 bg-green-300 text-gray-900 font-bold p-3 flex align-items-center justify-content-center">w-9</div>
                <div class="w-3 bg-green-500 text-white font-bold p-3 flex align-items-center justify-content-center">w-3</div>
            </div>
            <div class="flex border-round bg-green-100 p-3 m-3">
                <div class="w-12 bg-green-300 text-gray-900 font-bold p-3 flex align-items-center justify-content-center">w-12</div>
            </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">
        <div class="flex flex-wrap align-items-center justify-content-center card-container purple-container">
            <div class="border-round bg-purple-100 w-20rem p-3 m-3">
                <div class="w-min md:w-max border-round bg-purple-500 text-white font-bold p-3 flex align-items-center justify-content-center">w-min on small screen</div>
            </div>
        </div>
    </div>