What replaces nav lists in Bootstrap 3?

css, html, twitter-bootstrap

Solution

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.

Problem

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/

Original source