Search code examples
htmlcsstwitter-bootstrapgrid-layout

Make Bootstrap 3 nav pills occupy defined space in grid

Background

I am making an interface, where I show items and I use nav pills to display information.

I am using Twitter Bootstrap to achieve the look I want, but my grid layout is not working as intended.

Problem

In my interface, I want the nav-pills to occupy the entire space of the row they are in, but they only occupy the left corner:

<ul class="nav nav-pills row">
    <li class="active col-sm-4">
        <a>Information</a>
    </li>
    <li class="col-sm-4">
        <a>Facts</a>
    </li>
    <li class="col-sm-4">
        <a>Simillar</a>
    </li>
</ul>

I read the documentation, and I believe I am doing everything fine. Here is a Plunker example where you can check the mini example I provided:

Questions

  1. What am I doing wrong?
  2. How can I fix it?
Solution

  • I think "to occupy the entire space of the row they are in" you could use predefined class nav-justified: 

    <ul class="nav nav-pills nav-justified">