02.06.2015 Views

Bootstrap Tutorial

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

CHAPTER<br />

20<br />

<strong>Bootstrap</strong> Breadcrumb<br />

Breadcrumbs are a great way to show hierarchy-based information for a site. In the case of blogs,<br />

breadcrumbs can show the dates of publishing, categories, or tags. They indicate the current page's location within<br />

a navigational hierarchy.<br />

A breadcrumb in <strong>Bootstrap</strong> is simply an unordered list with a class of .breadcrumb. The separator is automatically<br />

added by CSS (bootstrap.min.css) through the following class:<br />

.breadcrumb > li + li:before {<br />

color: #CCCCCC;<br />

content: "/ ";<br />

padding: 0 5px;<br />

}<br />

Following example demonstrates breadcrumbs:<br />

<br />

Home<br />

2013<br />

November<br />

<br />

TUTORIALS POINT<br />

Simply Easy Learning

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!