Defines how an element is displayed on a page.
| Class | Properties |
|---|---|
| hidden | display: none; |
| block | display: block; |
| inline | display: inline; |
| inline-block | display: inline-block; |
| flex | display: flex; |
| inline-flex | display: inline-flex; |
A hidden element is not visible and does not allocate space.
<div class="flex align-items-center justify-content-start">
<div class="hidden w-4rem h-4rem bg-primary font-bold p-4 border-round mr-3">1</div>
<div class="w-4rem h-4rem bg-primary font-bold flex align-items-center justify-content-center p-4 border-round mr-3">2</div>
<div class="w-4rem h-4rem bg-primary font-bold flex align-items-center justify-content-center p-4 border-round">3</div>
</div>
A block element starts on a new line.
<div class="block bg-primary font-bold text-center p-4 border-round mb-3">1</div>
<div class="block bg-primary font-bold text-center p-4 border-round mb-3">2</div>
<div class="block bg-primary font-bold text-center p-4 border-round mb-3">3</div>
An inline element does not start on a new line and allocates width as necessary.
<div className="inline bg-primary font-bold text-center p-4 border-round mx-4">1</div>
<div className="inline bg-primary font-bold text-center p-4 border-round">2</div>
<div className="inline bg-primary font-bold text-center p-4 border-round mx-4">3</div>
Inline block is similar to an inline element but properties like width, height and top bottom paddings/margins are respected.
<div class="card-container">
<div class="inline-block w-4rem h-4rem bg-primary font-bold text-center p-4 border-round">1</div>
<div class="inline-block w-4rem h-4rem bg-primary font-bold text-center p-4 border-round mx-4">2</div>
<div class="inline-block w-4rem h-4rem bg-primary font-bold text-center p-4 border-round">3</div>
</div>
Displays the element as a block level flex container.
<div class="flex">
<div class="flex-1 h-4rem bg-primary font-bold text-center p-4 border-round">1</div>
<div class="flex-1 h-4rem bg-primary font-bold text-center p-4 border-round mx-4">2</div>
<div class="flex-1 h-4rem bg-primary font-bold text-center p-4 border-round">3</div>
</div>
Displays the element as an inline level flex container.
<div class="inline-flex">
<div class="flex-1 h-4rem bg-primary font-bold text-center p-4 border-round">1</div>
<div class="flex-1 h-4rem bg-primary font-bold text-center p-4 border-round mx-4">2</div>
<div class="flex-1 h-4rem bg-primary font-bold text-center p-4 border-round">3</div>
</div>
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.
| Class | Description |
|---|---|
| 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="inline-flex">
<div class="hidden md:block bg-primary font-bold align-items-center justify-content-center p-4 border-round mr-3">Hide on a small screen</div>
<div class="block md:hidden bg-primary font-bold align-items-center justify-content-center p-4 border-round mr-3">Visible on a small screen</div>
</div>