Block utilities

Sometimes you need to override an element’s native block or inline-block behavior.

Inline-block utility

inline-block – makes any element behave as an inline-block element. Example using inline-block on a block element:

<div class="inline-block"> ... </div>

inlne-block has media query width variants, so the full set is:

• inlne-block / xs:inlne-block / sm:inlne-block / md:inlne-block / lg:inlne-block

Block utility

block – makes any element behave as a block element. Example using block on an inline-block element, such as a <span> or an <a href="">:

<span class="block"> ... </span>

block has media query width variants, so the full set is:

• block / xs:block / sm:block / md:block / lg:block

Notes on blocks and inline-blocks

1. The responsive block and inline-block utilities are useful in situations when you need to override a flex flexbox at a wider breakpoint.
2. Remember that CSS flexbox controls the behavior of its immediate child elements. So, if you are trying to use block or inline-block on an immediate child of a flex or grid, it won’t work.