What Replaces Nav Lists In Bootstrap 3?

July 29, 2023 Post a Comment

I am preparing to update my site to Bootstrap 3, but I can’t figure out how to replace the nav-list class from Bootstrap 2. I looked into list groups, but I am not sure if this i

Solution 1:

EDIT

The removal of .nav-listhas been documented in Migrating to v3.x – What’s removed:

Nav lists .nav-list.nav-header No direct equivalent, but list groups and .panel-groups 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:

<divclass="well"><ulclass="list-group"><liclass="list-group-item"><ahref="#">Link 1</a></li><liclass="list-group-item"><ahref="#">Link 2</a></li></ul></div>

<linkhref="https://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap.min.css" /><divclass="well"><ulclass="list-group"><liclass="list-group-item"><ahref="#">Link 1</a></li><liclass="list-group-item"><ahref="#">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.

Solution 2:

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.

Solution 3:

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: 3px15px;
  font-size: 11px;
  font-weight: bold;
  line-height: @line-height-small;
  color: @gray-light;
  text-shadow: 01px0 rgba(255,255,255,.5);
  text-transform: uppercase;
}
// Space them out when they follow another list item (link).navli + .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: 01px0 rgba(255,255,255,.5);
}
.nav-list > li > a {
  padding: 3px15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
  color: @body-bg;
  text-shadow: 0 -1px0 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: 3px15px;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.5;
  color: #999999;
  text-shadow: 01px0rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}
.navli + .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: 01px0rgba(255, 255, 255, 0.5);
}
.nav-list > li > a {
  padding: 3px15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
  color: #ffffff;
  text-shadow: 0 -1px0rgba(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: 9px0;
  overflow: hidden;
  background-color: #e5e5e5;
}

Include the CSS or the LESS after the normal bootstrap asset.

Solution 4:

I created a gist that takes nav-list from bootstrap 2.3.2, fills in some variables that aren't available in 3.0 under the same name, and resolves a mixin dependency. It's all straight defaults, and seems (so far) to play well with updated bootstrap 3.0 wells, which is where I primarily use it.

https://gist.github.com/jimbojsb/6754116

Solution 5:

For me the replace was:

navnav-pills

https://getbootstrap.com/docs/3.4/components/#badges

Under the title "Adapts to active nav states"

Html5 Academy