W3.CSS Display
Display Classes
W3.CSS display classes position content inside other HTML elements.
They are useful for images, cards, banners, overlays, labels, and buttons.
The Display Container
Use w3-display-container on the parent element.
Then use display classes to position elements inside it.
Example
<div class="w3-display-container w3-green" style="height:250px">
<div class="w3-display-topleft w3-padding">Top Left</div>
<div class="w3-display-topright w3-padding">Top Right</div>
<div class="w3-display-middle w3-padding">Middle</div>
<div class="w3-display-bottomleft w3-padding">Bottom Left</div>
<div class="w3-display-bottomright w3-padding">Bottom Right</div>
</div>
Try it Yourself »
Note
The positioned elements are positioned relative to the w3-display-container.
Display Position Classes
W3.CSS provides nine ready-to-use positions inside a display container.
| Class | Position |
|---|---|
w3-display-topleft |
Top left |
w3-display-topmiddle |
Top middle |
w3-display-topright |
Top right |
w3-display-left |
Middle left |
w3-display-middle |
Center |
w3-display-right |
Middle right |
w3-display-bottomleft |
Bottom left |
w3-display-bottommiddle |
Bottom middle |
w3-display-bottomright |
Bottom right |
w3-display-position |
Positioned |
Example
<div class="w3-display-container">
<div class="w3-display-topleft w3-padding">Top Left</div>
<div class="w3-display-topmiddle w3-padding">Top Middle</div>
<div class="w3-display-topright w3-padding">Top Right</div>
<div class="w3-display-left w3-padding">Left</div>
<div class="w3-display-middle w3-padding">Middle</div>
<div class="w3-display-right w3-padding">Right</div>
<div class="w3-display-bottomleft w3-padding">Bottom Left</div>
<div class="w3-display-bottommiddle w3-padding">Bottom Middle</div>
<div class="w3-display-bottomright w3-padding">Bottom Right</div>
</div>
Try it Yourself »
Text on an Image
One of the most useful applications of display classes is positioning text over an image.
Norway
Experience the Northern Lights
Example
<div class="w3-display-container w3-text-white">
<img src="img_lights.jpg" alt="Northern Lights" style="width:100%">
<div class="w3-display-bottomleft w3-container w3-padding">
<h2>Norway</h2>
<p>Experience the Northern Lights</p>
</div>
</div>
Try it Yourself »
Image Labels
Display classes make it easy to add labels and badges to images.
NEW
Example
<div class="w3-display-container">
<img src="img_snowtops.jpg" alt="Mountains" style="width:100%">
<span class="w3-display-topleft w3-tag w3-red w3-margin">NEW</span>
<div class="w3-display-bottomright w3-black w3-padding">The Alps</div>
</div>
Try it Yourself »
Posisioned Labels
Example
<div class="w3-display-container">
<img src="img_lights.jpg" alt="Northern Lights" style="width:100%">
<div class="w3-display-position w3-padding w3-red"
style="top:50px;left:50px">Positioned</div>
</div>
Try it Yourself »
Display on Hover
The w3-display-hover class hides an element until the user moves the mouse over its display container.
Move the mouse over this box
Example
<div class="w3-display-container">
<div class="w3-display-middle">Move the mouse over this box</div>
<div class="w3-display-topleft w3-display-hover">Top Left</div>
<div class="w3-display-topright w3-display-hover">Top Right</div>
</div>
Try it Yourself »
Build an Image Hover Card
Combine display classes with hover effects to create interactive image cards.
Example
<div class="w3-display-container w3-hover-opacity">
<img src="img_avatar3.png" alt="John Doe" style="width:100%">
<div class="w3-display-middle w3-display-hover">
<button class="w3-button w3-black">John Doe</button>
</div>
</div>
Try it Yourself »
Hover over this picture:
You will learn more about W3.CSS effects and animations later in this tutorial.
Show and Hide Elements
Use w3-hide to hide an element.
Use w3-show to show an element.
Toggle Show and Hide
JavaScript can add or remove W3.CSS display classes to show and hide content.
Hello! This content can be shown and hidden.
Example
<button class="w3-button w3-black" onclick="myFunction()">Toggle</button>
<div id="demo" class="w3-panel w3-hide">
<p>Hello!</p>
</div>
Try it Yourself »
The Try-It example includes the JavaScript needed to toggle the class.
What You Have Learned
w3-display-containercreates a container for positioned content- The display position classes place content at nine predefined positions
- Display classes are useful for text, labels, and buttons over images
w3-display-hoverdisplays content when the user hovers over the containerw3-hidehides an elementw3-showshows an element
More Examples
Explore more ways to use W3.CSS display classes.
Display a Flag
Display classes can also be used to build shapes by positioning elements inside a container.
Example
<div class="w3-display-container w3-card-4">
<div class="w3-red w3-display-topleft"></div>
<div class="w3-red w3-display-topright"></div>
<div class="w3-red w3-display-bottomleft"></div>
<div class="w3-red w3-display-bottomright"></div>
</div>
Try it Yourself »
Floating Left and Right
The w3-left and w3-right classes float elements to opposite sides.
Example
<div class="w3-bar w3-light-grey">
<div class="w3-left w3-red w3-padding">Left</div>
<div class="w3-right w3-blue w3-padding">Right</div>
</div>
Try it Yourself »
The w3-mobile Class
The w3-mobile class makes an element full width on screens smaller than 600px.
You will learn more about responsive design later in this tutorial.
Example
<button class="w3-button w3-black w3-mobile">Home</button>
<button class="w3-button w3-black w3-mobile">News</button>
<button class="w3-button w3-black w3-mobile">Contact</button>
Try it Yourself »
