w3resource logo


Twitter Bootstrap breadcrumbs

Twitter Bootstrap breadcrumbs tutorial

Secondary Nav

Introduction

Using Twitter Bootstrap, you may create breadcrumbs. In this tutorial, you will see how to do that.

Here is what we will end up creating finally:

breadcrumbs demo

HTML5 code for creating breadcrumbs with Twitter Bootstrap

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap breadcrumbs Example</title> 
<meta name="description" content="Twitter Bootstrap breadcrumbs Example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span6">
<ul class="breadcrumb">
  <li>
    <a href="#">Home</a> <span class="divider">></span>
  </li>
  <li>
    <a href="#">Tutorials</a> <span class="divider">></span>
  </li>
  <li class="active">HTML5</li>
</ul>
</div>
</div>
</div>
</body>
</html> 
            

Help us to serve you with Better content.

View the example live.

Styles for CSS class "breadcrumb" is there from line number 2725 to 2755 of the bootstrap.css (version 2.0.1) . From line number 2749 to 2752 styles for class "divider" are located.

You may download all the HTML, CSS, JS and image files used in our tutorials here.



Join our Question Answer community to learn and share your programming knowledge.