Bootstrap Breadcrumb Navigation
Introduction
With Bootstrap, you can create breadcrumb navigation. In this tutorial, you will learn how to do this.
Below is the final created output:
HTML5 code to create breadcrumb navigation with Bootstrap
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Breadcrumb Navigation</title>
<meta name="description" content="Bootstrap breadcrumbs Example">
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css.html" 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="../index.html">Home</a> <span class="divider">></span>
</li>
<li>
<a href="../index.html">Tutorials</a> <span class="divider">></span>
</li>
<li class="active">HTML5</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Breadcrumb Navigation</title>
<meta name="description" content="Bootstrap breadcrumbs Example">
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css.html" 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="../index.html">Home</a> <span class="divider">></span>
</li>
<li>
<a href="../index.html">Tutorials</a> <span class="divider">></span>
</li>
<li class="active">HTML5</li>
</ul>
</div>
</div>
</div>
</body>
</html>
View example online
CSS class "breadcrumbThe styles are located in bootstrap.css at lines 2725 to 2755 (version 2.0.1). From lines 2749 to 2752 are the styles for class "divider".
Click here to download all HTML, CSS, JS and image files used in this tutorial.
Other Extensions