Introduction
This chapter demonstraes about the W3CSS Display which can be used to display the HTML element in a specific positions, following are the concepts covered in this chapter.
- Display Classes
- Floating Classes
- Show and Hide
Description
W3.CSS have the several classes to display the the HTML elements at specific positions those classes are tabulated below.
The code below demonstrates to display classes as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h1>Using w3-display-container</h1>
<div class="w3-display-container w3-blue" style="height:300px;">
<div class="w3-display-topleft">Top Left</div>
<div class="w3-display-topright">Top Right</div>
<div class="w3-display-bottomleft">Bottom Left</div>
<div class="w3-display-bottomright">Bottom Right</div>
<div class="w3-display-middle">Middle</div>
<div class="w3-display-topmiddle w3-hide-small">Top Middle</div>
<div class="w3-display-bottommiddle w3-hide-small">Bottom Middle</div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The code below demonstrates to show the display classes by using padding as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h1>Using w3-display-container</h1>
<div class="w3-display-container w3-blue" style="height:300px;">
<div class="w3-display-topleft w3-padding">Top Left</div>
<div class="w3-display-topright w3-padding">Top Right</div>
<div class="w3-display-bottomleft w3-padding">Bottom Left</div>
<div class="w3-display-bottomright w3-padding">Bottom Right</div>
<div class="w3-display-middle w3-padding">Middle</div>
<div class="w3-display-topmiddle w3-padding w3-hide-small">Top Middle</div>
<div class="w3-display-bottommiddle w3-padding w3-hide-small">Bottom Middle</div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
| Class | Description |
|---|---|
| w3-left | Which floats an element into left. |
| w3-right | Which floats an element into right. |
| w3-hide | Which is used to hide the element. |
| w3-show | Which is used to shows an element. |
| w3-display-container | Which is the container for w3-display-classes. |
| w3-display-topleft | Which is used to display the content position at top left. |
| w3-display-topright | Which is used to display the content position at top right. |
| w3-display-bottomleft | Which is used to display the content position at bottom left. |
| w3-display-bottomright | Which is used to display the content position at bottom right. |
| w3-display-middle | Which is used to display the content position at middle. |
| w3-display-bottomiddle | Which is used to display the content position at bottom middle. |
| w3-display-topmiddle | Which is used to display the content position at top middle. |
Description
User can float the w3 element to the left and to the right by using the w3 floating classes user can float the element to the left by using the w3-left and user can float the element to the right by using the w3-right. The code below demonstrates to display the floating classes as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Floating Classes</h2>
<div class="w3-container w3-light-grey w3-padding-0">
<div class="w3-left w3-blue w3-padding">w3-left</div>
<div class="w3-right w3-purple w3-padding">w3-right</div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
User can force an element to be shown or hidden by using the W3.CSS classes in order to show the element user need to use the w3-show class and to hide the element user need to use the hide element . The code below demonstrates to show and hide the content as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Show and Hide</h2>
<p class="w3-show">show class.</p>
<p class="w3-hide">hide class.</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
User can use these classes to toggle between the showing and hiding element the code below demonstrates to toggle between hiding and showing the elements.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Toggle Show/Hide</h2>
<p>Click on the button to show/hide a SPLESSONS.</p>
<button onclick="myFunction()" class="w3-btn">Toggle hide and show</button>
<p>SPLESSONS.</p>
<p id="Demo" class="w3-hide w3-blue">SPLESSONS.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- User can use Toggled between show and hide elements.
- User can display the HTML elements in required positions
- User can float the elements to the left and right.