Bootstrap breadcrumbs
Brief introduction
Use Bootstrap, you can create breadcrumbs. In this tutorial, you will learn how to do that.
Here is the final output created:
Create breadcrumbs by Bootstrap HTML5 Code
Examples
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> Bootstrap breadcrumbs </ title>
<Meta name = "description" content = "Bootstrap breadcrumbs Example">
<Link href = "../ 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>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> Bootstrap breadcrumbs </ title>
<Meta name = "description" content = "Bootstrap breadcrumbs Example">
<Link href = "../ 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>
View online examples
CSS class "breadcrumb" style located bootstrap.css line number 2725-2755 (version 2.0.1). From the line number is 2749-2752 class "divider" style.
Click here to download the tutorial to use all the HTML, CSS, JS and image files.