Width

Defines the width of an element.

Classes#

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

Examples#

w-full
w-auto
w-min
w-max
<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="w-full border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">w-full</div>
    </div>
    <div class="border-round bg-primary-100 w-12rem p-3 m-3">
        <div class="w-auto border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">w-auto</div>
    </div>
    <div class="border-round bg-primary-100 w-12rem p-3 m-3">
        <div class="w-min border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">w-min</div>
    </div>
    <div class="border-round bg-primary-100 w-12rem p-3 m-3">
        <div class="w-max border-round bg-primary font-bold 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="flex flex-column flex-wrap align-items-center justify-content-center">
    <div class="w-26rem">
        <div class="w-6rem border-round bg-primary font-bold p-3 m-3 flex align-items-center justify-content-center">w-6rem</div>
        <div class="w-11rem border-round bg-primary font-bold p-3 m-3 flex align-items-center justify-content-center">w-11rem</div>
        <div class="w-20rem border-round bg-primary font-bold p-3 m-3 flex align-items-center justify-content-center">w-20rem</div>
        <div class="w-24rem border-round bg-primary font-bold 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="flex border-round bg-primary-100 p-3 m-3">
    <div class="w-2 bg-green-300 font-bold p-2 flex align-items-center justify-content-center">w-2</div>
    <div class="w-10 bg-primary font-bold p-3 flex align-items-center justify-content-center">w-10</div>
</div>
<div class="flex border-round bg-primary-100 p-3 m-3">
    <div class="w-4 bg-green-300 font-bold p-3 flex align-items-center justify-content-center">w-4</div>
    <div class="w-8 bg-primary font-bold p-3 flex align-items-center justify-content-center">w-8</div>
</div>
<div class="flex border-round bg-primary-100 p-3 m-3">
    <div class="w-5 bg-green-300 font-bold p-3 flex align-items-center justify-content-center">w-5</div>
    <div class="w-7 bg-primary font-bold p-3 flex align-items-center justify-content-center">w-7</div>
</div>
<div class="flex border-round bg-primary-100 p-3 m-3">
    <div class="w-6 bg-green-300 font-bold p-3 flex align-items-center justify-content-center">w-6</div>
    <div class="w-6 bg-primary font-bold p-3 flex align-items-center justify-content-center">w-6</div>
</div>
<div class="flex border-round bg-primary-100 p-3 m-3">
    <div class="w-9 bg-green-300 font-bold p-3 flex align-items-center justify-content-center">w-9</div>
    <div class="w-3 bg-primary font-bold p-3 flex align-items-center justify-content-center">w-3</div>
</div>
<div class="flex border-round bg-primary-100 p-3 m-3">
    <div class="w-12 bg-green-300 font-bold p-3 flex align-items-center justify-content-center">w-12</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.

ClassDescription
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="flex flex-wrap align-items-center justify-content-center">
    <div class="border-round bg-primary-100 w-20rem p-3 m-3">
        <div class="w-min md:w-max border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">w-min on small screen</div>
    </div>
</div>
 
            PrimeFlex 3.3.1 by PrimeTek