Breadcrumbs

Extensible website layer navigation

Right

<ol class="breadcrumb text-right">
  <li><a href="/">Home</a></li>
  <li><a href="/elements/">Elements</a></li>
  <li><a href="/elements/breadcrumbs/">Breadcrumbs</a></li>
  <li class="active">Right</li>
</ol>

Center

<ol class="breadcrumb text-center">
  <li><a href="/">Home</a></li>
  <li><a href="/elements/">Elements</a></li>
  <li><a href="/elements/breadcrumbs/">Breadcrumbs</a></li>
  <li class="active">Center</li>
</ol>

Left

<ol class="breadcrumb text-left">
  <li><a href="/">Home</a></li>
  <li><a href="/elements/">Elements</a></li>
  <li><a href="/elements/breadcrumbs/">Breadcrumbs</a></li>
  <li class="active">Left</li>
</ol>

Arrows

<ol class="breadcrumb breadcrumb-arrow text-center">
  <li><a href="/"><i class='fa fa-home'></i></a></li>
  <li><a href="/elements/">Elements</a></li>
  <li><a href="/elements/breadcrumbs/">Breadcrumbs</a></li>
  <li class="active">Arrows</li>
</ol>

Arrows solid

<ol class="breadcrumb breadcrumb-arrow-solid text-center">
  <li><a href="/">Home</a></li>
  <li><a href="/elements/">Elements</a></li>
  <li><a href="/elements/breadcrumbs/">Breadcrumbs</a></li>
  <li class="active">Arrows solid</li>
</ol>

Arrows rounded

<ol class="breadcrumb breadcrumb-arrow breadcrumb-arrow-rounded text-center">
  <li><a href="/">Home</a></li>
  <li><a href="/elements/">Elements</a></li>
  <li><a href="/elements/breadcrumbs/">Breadcrumbs</a></li>
  <li class="active">Arrows rounded</li>
</ol>

Arrows small

<ol class="breadcrumb breadcrumb-arrow breadcrumb-arrow-small text-center">
  <li><a href="/"><i class='fa fa-home'></i></a></li>
  <li><a href="/elements/">Elements</a></li>
  <li><a href="/elements/breadcrumbs/">Breadcrumbs</a></li>
  <li class="active">Arrows</li>
</ol>

Arrows small & solid

<ol class="breadcrumb breadcrumb-arrow breadcrumb-arrow-small breadcrumb-arrow-solid text-center">
  <li><a href="/"><i class='fa fa-home'></i></a></li>
  <li><a href="/elements/">Elements</a></li>
  <li><a href="/elements/breadcrumbs/">Breadcrumbs</a></li>
  <li class="active">Arrows</li>
</ol>

Pills

<ol class="breadcrumb breadcrumb-pill text-center">
  <li><a href="/">Home</a></li>
  <li><a href="/elements/">Elements</a></li>
  <li><a href="/elements/breadcrumbs/">Breadcrumbs</a></li>
  <li class="active">Pills</li>
</ol>

Raquos

<ol class="breadcrumb breadcrumb-raquo text-center">
  <li><a href="/"><i class='fa fa-home'></i></a></li>
  <li><a href="/elements/">Elements</a></li>
  <li><a href="/elements/breadcrumbs/">Breadcrumbs</a></li>
  <li class="active">Raquos</li>
</ol>

Justified

<ol class="breadcrumb breadcrumb-justify breadcrumb-arrow-solid text-center">
  <li><a href="/">Home</a></li>
  <li><a href="/elements/">Elements</a></li>
  <li><a href="/elements/breadcrumbs/">Breadcrumbs</a></li>
  <li><a href="/elements/breadcrumbs/">Breadcrumbs</a></li>
  <li class="active">Justified</li>
</ol>