Layout

Display

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:

This is a <div> element (normally a block element).
<div class="inline-block"> ... </div>

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

  • inline-block / xs:inline-block / sm:inline-block / md:inline-block / lg:inline-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="">:

This is a <span> element (normally an inline element). 
<span class="block"> ... </span>

block has media query width variants:

  • block / xxs:block / xs:block / sm:block / md:block / etc.

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.