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.


<div class="card">
    <input type="text" class="inputfield mb-2 hidden" value="This input is not visible"/>
    <input type="text" class="inputfield block" value="Visible input"/>
</div>

Block

A block element starts on a new line.


<div class="card">
    <input type="text" class="inputfield mb-2 block" />
    <input type="text" class="inputfield block" />
</div>

Inline

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


<div class="card">
    <input type="text" class="inputfield inline" />
    <input type="text" class="inputfield inline" />
</div>

Inline Block

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


<div class="card">
    <input type="text" class="inputfield inline-block" />
    <input type="text" class="inputfield inline-block" />
</div>

Flex

Displays the element as a block level flex container.


<div class="card flex">
    <input type="text" class="inputfield" />
    <input type="text" class="inputfield" />
</div>

Inline Flex

Displays the element as an inline level flex container..


<div class="card inline-flex">
    <input type="text" class="inputfield" />
    <input type="text" class="inputfield" />
</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
Visible on a small screen

<div class="card">
    <input type="text" placeholder="Hidden on a small screen" class="inputfield hidden md:block" size="25">

    <span class="block md:hidden">Visible on a small screen</span>
</div>