W3.CSS — Display

Display Properties

W3.CSS provides display utility classes:

<div class="w3-show">Visible block element</div>
<div class="w3-hide">Hidden element</div>

Block vs Inline

<!-- Block element -->
<div class="w3-block w3-blue w3-padding">Block element</div>

<!-- Inline element -->
<span class="w3-inline w3-red w3-padding">Inline element</span>

<!-- Inline-block -->
<div class="w3-inline-block w3-green w3-padding">Inline-block element</div>

Display Width

<!-- Half width -->
<div class="w3-half w3-container">Half width</div>

<!-- Third width -->
<div class="w3-third w3-container">Third width</div>

<!-- Quarter width -->
<div class="w3-quarter w3-container">Quarter width</div>

<!-- Two-thirds width -->
<div class="w3-twothird w3-container">Two-thirds width</div>

Responsive Display

<!-- Hide on small screens -->
<div class="w3-hide-small w3-container">Hidden on small screens</div>

<!-- Hide on medium screens -->
<div class="w3-hide-medium w3-container">Hidden on medium screens</div>

<!-- Hide on large screens -->
<div class="w3-hide-large w3-container">Hidden on large screens</div>

<!-- Show only on small screens -->
<div class="w3-show-small w3-container">Visible only on small screens</div>

<!-- Show only on medium screens -->
<div class="w3-show-medium w3-container">Visible only on medium screens</div>

<!-- Show only on large screens -->
<div class="w3-show-large w3-container">Visible only on large screens</div>

Float

<div class="w3-float-left w3-red w3-padding">Float Left</div>
<div class="w3-float-right w3-blue w3-padding">Float Right</div>

Clear Float

<div class="w3-clear-both"></div>

Display Examples

<!-- Responsive columns -->
<div class="w3-row">
    <div class="w3-third w3-container">Column 1</div>
    <div class="w3-third w3-container">Column 2</div>
    <div class="w3-third w3-container">Column 3</div>
</div>

<!-- Responsive visibility -->
<div class="w3-container">
    <div class="w3-show-small w3-red">Mobile only</div>
    <div class="w3-show-medium w3-blue">Tablet only</div>
    <div class="w3-show-large w3-green">Desktop only</div>
</div>

Mini Practice

Create HTML code that:

1. Creates a half-width layout
2. Hides an element on small screens
3. Uses float to position elements
4. Creates responsive columns

Up Next

Next: Learn about W3.CSS Buttons.