Display block

Tailwind CSS Display block

Use responsive display block layout with TW elements. Learn how to put the element on it's own line and fill its parent.

Basic example

When controlling the flow of text, using the CSS property display: inline will cause the text inside the element to wrap normally.

While using the property display: inline-block will wrap the element to prevent the text inside from extending beyond its parent.

Lastly, using the property display: block will put the element on it's own line and fill its parent.

HTML

        
            
        <div>
          When controlling the flow of text, using the CSS property
          <span class="inline bg-info">display: inline</span>
          will cause the text inside the element to wrap normally. While using
          the property
          <span class="inline-block bg-info">display: inline-block</span> will
          wrap the element to prevent the text inside from extending beyond its
          parent. Lastly, using the property
          <span class="block bg-info">display: block</span>
          will put the element on it's own line and fill its parent.
        </div>

Display block

Tailwind CSS Display block

Basic example

Access restricted

To view this section you must have an active PRO account

Display block

Tailwind CSS Display block

Basic example

Related resources