W3.CSS Bars
Horizontal Bars
Horizontal bars are common web design elements:
The w3-bar class creates a horizontal bar.
The w3-bar-item class defines the items inside the bar.
Example
<div class="w3-bar w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
Vertical Bars
Vertical bars (sidebars) are also common in web design:
The w3-bar-block class displays bar items vertically.
Example
<div class="w3-bar-block w3-green" style="width:100px">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
Bar Colors
You can use any color to style a bar:
Example
<div class="w3-bar w3-black">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
Hover Colors
You can use any hover color to style a bar:
Mouse over the bar items to see the effect:
Example
<div class="w3-bar w3-black">
<div class="w3-bar-item w3-hover-red">London</div>
<div class="w3-bar-item w3-hover-green">Paris</div>
<div class="w3-bar-item w3-hover-blue">Tokyo</div>
</div>
Bar Links
Providing navigation is a typical use for bars:
Example
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-hover-green">London</a>
<a href="#" class="w3-bar-item w3-hover-green">Paris</a>
<a href="#" class="w3-bar-item w3-hover-green">Tokyo</a>
</div>
Bar Buttons
Add w3-button to links to make the entire bar item clickable.
Mouse over the bar items to see the effect:
Example
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button">Tokyo</a>
</div>
Responsive Bar
Use the w3-mobile class to make bar items stack vertically on small screens.
Resize the window to see the effect:
Example
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">London</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Tokyo</a>
</div>
Right-Aligned Bar Items
Use the w3-right class to move a bar item to the right:
Example
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-right">Tokyo</a>
</div>
What You Have Learned
In this chapter you have learned how to:
- Create horizontal bars with
w3-bar - Create bar items with
w3-bar-item - Create vertical bars with
w3-bar-block - Create clickable bar items with
w3-button - Change bar colors and hover colors
- Create responsive bars with
w3-mobile - Right-align bar items with
w3-right
