⌘ K
esc

    Display

    Defines how an element is displayed on a page.

    Classes
    Class Properties
    hidden display: none;
    block display: block;
    inline display: inline;
    inline-block display: inline-block;
    flex display: flex;
    inline-flex display: inline-flex;
    Hidden

    A hidden element is not visible and does not allocate space.

    2
    3
    
    <div class="card">
        <div class="card-container blue-container flex align-items-center justify-content-start">
            <div class="hidden w-4rem h-4rem bg-blue-500 text-white font-bold p-4 border-round mr-3">1</div>
            <div class="w-4rem h-4rem bg-blue-500 text-white font-bold flex align-items-center justify-content-center p-4 border-round mr-3">2</div>
            <div class="w-4rem h-4rem bg-blue-500 text-white font-bold flex align-items-center justify-content-center p-4 border-round">3</div>
        </div>
    </div>
    
    
    Block

    A block element starts on a new line.

    1
    2
    3
    
    <div class="card">
        <div class="card-container yellow-container">
            <div class="block bg-yellow-500 font-bold text-center p-4 border-round mb-3">1</div>
            <div class="block bg-yellow-500 font-bold text-center p-4 border-round mb-3">2</div>
            <div class="block bg-yellow-500 font-bold text-center p-4 border-round mb-3">3</div>
        </div>
    </div>
    
    
    Inline

    An inline element does not start on a new line and allocates width as necessary.

    1
    2
    3
    
    <div class="card py-6">
        <div class="card-container green-container p-0">
            <div class="inline w-4rem h-4rem bg-green-500 text-white font-bold text-center p-4 border-round mx-4">1</div>
            <div class="inline w-4rem h-4rem bg-green-500 text-white font-bold text-center p-4 border-round">2</div>
            <div class="inline w-4rem h-4rem bg-green-500 text-white font-bold text-center p-4 border-round mx-4">3</div>
        </div>
    </div>
    
    
    Inline Block

    Inline block is similar to an inline element but properties like width, height and top bottom paddings/margins are respected.

    1
    2
    3
    
    <div class="card">
        <div class="card-container purple-container">
            <div class="inline-block w-4rem h-4rem bg-purple-500 text-white font-bold text-center p-4 border-round">1</div>
            <div class="inline-block w-4rem h-4rem bg-purple-500 text-white font-bold text-center p-4 border-round mx-4">2</div>
            <div class="inline-block w-4rem h-4rem bg-purple-500 text-white font-bold text-center p-4 border-round">3</div>
        </div>
    </div>
    
    
    Flex

    Displays the element as a block level flex container.

    1
    2
    3
    
    <div class="card">
        <div class="flex card-container indigo-container">
            <div class="flex-1 h-4rem bg-indigo-500 text-white font-bold text-center p-4 border-round">1</div>
            <div class="flex-1 h-4rem bg-indigo-500 text-white font-bold text-center p-4 border-round mx-4">2</div>
            <div class="flex-1 h-4rem bg-indigo-500 text-white font-bold text-center p-4 border-round">3</div>
        </div>
    </div>
    
    
    Inline Flex

    Displays the element as an inline level flex container..

    1
    2
    3
    
    <div class="card">
        <div class="inline-flex card-container orange-container">
            <div class="flex-1 h-4rem bg-orange-500 text-white font-bold text-center p-4 border-round">1</div>
            <div class="flex-1 h-4rem bg-orange-500 text-white font-bold text-center p-4 border-round mx-4">2</div>
            <div class="flex-1 h-4rem bg-orange-500 text-white font-bold text-center p-4 border-round">3</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:block 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
    
    <div class="card">
        <div class="card-container cyan-container inline-flex">
            <div class="hidden md:inline-flex h-4rem bg-cyan-500 text-white font-bold align-items-center justify-content-center p-4 border-round mr-3">Hide on a small screen</div>
        </div>
    </div>