w3resource

Twitter Bootstrap breadcrumbs tutorial

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.

Previous: Twitter Bootstrap progress bars tutorial
Next: Twitter Bootstrap pagination tutorial



Follow us on Facebook and Twitter for latest update.