What replaces nav lists in Bootstrap 3?

Question

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 is to be used to replace nav lists. How would I make the below markup work in Bootstrap 3?

<div class="well">     <ul class="nav nav-list">         <li><a href="#">Link 1</a></li>         <li><a href="#">Link 2</a></li>     </ul> </div> 

EDIT

This is the look I am going for: http://jsfiddle.net/bplumb/2Nguy/

Answer 1

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-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:

<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.

Answer 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.