Twitter Bootstrap breadcrumbs tutorial

Last update on August 19 2022 21:50:44 (UTC/GMT +8 hours)

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:

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