Tutorials References Exercises Videos NEW Menu
Paid Courses Website NEW

W3.CSS Bars


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>

Try It Yourself »

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 a vertical 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>

Try It Yourself »



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>

Try It Yourself »


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>

Try It Yourself »


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>

Try It Yourself »


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>

Try It Yourself »


Responsive Bar

The w3-mobile class is perfect for making bar items responsive.

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>

Try It Yourself »


Right-Aligned Bar Items

The w3-right class is perfect for making 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>

Try It Yourself »