What replaces nav lists in Bootstrap 3?
I used class="nav nav-pills nav-stacked"
and for me it's a better styled replacement. But perhaps it is resolved in version 3.0.2.
EDIT
The removal of .nav-list
has been documented in Migrating to v3.x – What’s removed:
Nav lists
.nav-list
.nav-header
No direct equivalent, but list groups and.panel-group
s are similar.
I found this change listed in the changelog inside the “WIP: Bootstrap 3” pull request:
- Remove
.nav-list
option. Replaced by the new.list-group
component.
So if I translate your code to use .list-group
instead, I get this:
<div class="well">
<ul class="list-group">
<li class="list-group-item"><a href="#">Link 1</a></li>
<li class="list-group-item"><a href="#">Link 2</a></li>
</ul>
</div>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well">
<ul class="list-group">
<li class="list-group-item"><a href="#">Link 1</a></li>
<li class="list-group-item"><a href="#">Link 2</a></li>
</ul>
</div>
However, this does not look identical to the way it did in Bootstrap 2. As I noted in this answer’s comments, there seems to be no exact .nav-list
equivalent built-in to Bootstrap 3. So if you need features that .list-group
doesn’t have, you will have to write the CSS yourself, or try to port it from Bootstrap 2.
The following .less will bring back nav-list
more or less as it was in 2.3.2:
@import "../bootstrap/variables.less"; // replace with path to bootstrap variables.less
// Nav headers (for dropdowns and lists)
.nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: @line-height-small;
color: @gray-light;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase;
}
// Space them out when they follow another list item (link)
.nav li + .nav-header {
margin-top: 9px;
}
// NAV LIST
// --------
.nav-list {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 0;
}
.nav-list > li > a,
.nav-list .nav-header {
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
color: @body-bg;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
background-color: @link-color;
}
.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
margin-right: 2px;
}
// Dividers (basically an hr) within the dropdown
.nav-list .divider {
.nav-divider();
}
The resulting CSS is:
.nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: 1.5;
color: #999999;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-transform: uppercase;
}
.nav li + .nav-header {
margin-top: 9px;
}
.nav-list {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 0;
}
.nav-list > li > a,
.nav-list .nav-header {
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
background-color: #428bca;
}
.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
margin-right: 2px;
}
.nav-list .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
Include the CSS or the LESS after the normal bootstrap asset.