"Breadcrumb width 100% - Responsive"
Bootstrap 3.3.0 Snippet by damiandaud

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Breadcrumb Default</h2>
<div class="btn-group btn-breadcrumb breadcrumb-default">
<a href="#" class="btn btn-default"><i class="glyphicon glyphicon-home"></i></a>
<div class="visible-lg-block">
<div class="btn btn-warning btn-derecha"><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i></div>
<div class="btn btn-danger btn-derecha">ATENCIÓN</div>
</div>
<a href="#" class="btn btn-default visible-lg-block visible-md-block">Snippets</a>
<a href="#" class="btn btn-default visible-lg-block visible-md-block">Breadcrumbs text</a>
<a href="#" class="btn btn-default visible-lg-block visible-md-block">Section</a>
<a href="#" class="btn btn-default visible-lg-block visible-md-block">Category</a>
<div class="btn btn-default visible-xs-block hidden-xs visible-sm-block ">...</div>
<div class="btn btn-info"><b>Item Actual</b></div>
</div>
</div>
<div class="row">
<h2>Breadcrumb Primary</h2>
<div class="btn-group btn-breadcrumb breadcrumb-primary">
<a href="#" class="btn btn-primary"><i class="glyphicon glyphicon-home"></i></a>
<div class="visible-lg-block">
<div class="btn btn-warning btn-derecha"><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i></div>
<div class="btn btn-default btn-derecha">ATENCIÓN</div>
</div>
<a href="#" class="btn btn-primary visible-lg-block visible-md-block">Snippets</a>
<a href="#" class="btn btn-primary visible-lg-block visible-md-block">Breadcrumbs text</a>
<a href="#" class="btn btn-primary visible-lg-block visible-md-block">Section</a>
<a href="#" class="btn btn-primary visible-lg-block visible-md-block">Category</a>
<div class="btn btn-default visible-xs-block hidden-xs visible-sm-block ">...</div>
<div class="btn btn-info"><b>Item Actual</b></div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@media (max-width: 767px) {
.btn-breadcrumb { margin-left: 10px; margin-right: 10px; width: calc(100% - 20px) !important; }
}
.btn-breadcrumb{
width: 100%;
background-color: #fff;
border-radius: 4px;
border: solid 1px #ccc;
}
.btn-breadcrumb .btn{
border-color: transparent; border: 0px solid transparent;
border-right: 1px solid transparent !important;
font-size: 11px;
}
.breadcrumb-default{ background-color: #fff; }
.btn-primary,.breadcrumb-primary{ background-color: #337ab7; }
.btn-primary:hover{background-color: #286090;}
.breadcrumb-success{ background-color: #5cb85c; }
.breadcrumb-info{ background-color: #5bc0de; }
.breadcrumb-warning{ background-color: #f0ad4e; }
.breadcrumb-danger{ background-color: #d9534f; }
.breadcrumb-negro{ background-color: #d4d4d4; }
.btn-breadcrumb .btn:last-child {font-weight: bold; text-decoration: underline;}
.btn-breadcrumb .btn:last-child:after{margin-left: -2px;}
.btn-breadcrumb .btn:last-child:before{margin-left: -1px;}
.btn-breadcrumb .btn-derecha{
float: right;
margin-right: 0px;
padding: 6px 10px 6px 10px !important;
margin-left: 0px !important;
border-radius: 0px !important;
}
.btn-breadcrumb .btn-derecha:first-child {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: