W3.CSS Bars

Toggle navigation
TUTORIAL HOME
W3.CSS Bars
❮ Previous Next ❯
London
Paris
Tokyo
London
Paris
Tokyo
London
Paris
Tokyo
London
Paris
Tokyo
Horizontal Bars
Horizontal bars are common web design elements:

London
Paris
Tokyo
The w3-bar class is used to style an horizontal 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>
»

The purpose of the w3-bar-item class is to provide correct spacing, padding, and positioning.

Vertical Bars
Vertical bars (sidebars) are also common in web design:

London
Paris
Tokyo
The w3-bar-block class is used to style an horizontal bar:

Example
<div class="w3-bar-block w3-green">
  <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:

London
Paris
Tokyo
London
Paris
Tokyo
London
Paris
Tokyo
London
Paris
Tokyo
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:

London
Paris
Tokyo

London
Paris
Tokyo
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:

London Paris Tokyo

London Paris Tokyo
Example
<div class="w3-bar w3-black">
  <a href="#" class="w3-bar-item w3-hover-white">London</a>
  <a href="#" class="w3-bar-item w3-hover-white">Paris</a>
  <a href="#" class="w3-bar-item w3-hover-white">Tokyo</a>
</div>
»

Bar Buttons
The w3-button class is perfect for styling links in a bar.

Mouse over the bar items to see the effect:

London
Paris
Tokyo

London
Paris
Tokyo
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
The w3-mobile class is perfect for smaking bar items reponsive.

Resize the window to see the effect:

London
Paris
Tokyo
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
The w3-right class is perfect for smaking bar items right-aligned:

London
Paris
Tokyo
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>
»


❮ Previous Next ❯