[Bootstrap grids][Bootstrap grids] are built off a 12 column layout. If you want three items to take up the whole width, use <code>span4</code> (=12/3).

Try changing `span3` to `span4`.

## [Here's a Demo in jsFiddle][column fiddle]

### Which should look like this:

[![screenshot][screenshot]][column fiddle demo]

### Code:



<pre><code>&lt;div class=&quot;navbar steps&quot; style=&quot;position:relative;z-index:7&quot;&gt;
 &lt;div class=&quot;navbar-inner&quot;&gt;
 &lt;ul class=&quot;row-fluid nav nav-pills&quot;&gt;
 &lt;li class=&quot;span4 active&quot;&gt;
 &lt;a href=&quot;#tab1&quot; data-toggle=&quot;tab&quot; class=&quot;step active&quot;&gt;
 &lt;span class=&quot;number&quot;&gt;1&lt;/span&gt;
 &lt;span class=&quot;desc&quot;&gt;
 &lt;i class=&quot;icon-ok&quot;&gt;&lt;/i&gt;
 Source
 &lt;/span&gt; 
 &lt;/a&gt;
 &lt;/li&gt;
 &lt;li class=&quot;span4&quot;&gt;
 &lt;a href=&quot;#tab2&quot; data-toggle=&quot;tab&quot; class=&quot;step&quot;&gt;
 &lt;span class=&quot;number&quot;&gt;2&lt;/span&gt;
 &lt;span class=&quot;desc&quot;&gt;
 &lt;i class=&quot;icon-ok&quot;&gt;&lt;/i&gt;
 D&eacute;tail
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;/li&gt;
 &lt;li class=&quot;span4&quot;&gt;
 &lt;a href=&quot;#tab3&quot; data-toggle=&quot;tab&quot; class=&quot;step&quot;&gt;
 &lt;span class=&quot;number&quot;&gt;3&lt;/span&gt;
 &lt;span class=&quot;desc&quot;&gt;
 &lt;i class=&quot;icon-cog&quot;&gt;&lt;/i&gt;
 Configuration
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;/li&gt;
 
 &lt;/ul&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

----------

# Option 2

As fasouto pointed out, you can also try using a [justified navbar][justified navbar].

## [Here's a Justified Demo][justified fiddle]


[screenshot]: http://i.imgur.com/DrEsS2L.png
[column fiddle]: http://jsfiddle.net/KyleMit/XXVXH/
[column fiddle demo]: http://jsfiddle.net/KyleMit/XXVXH/show/light
[justified fiddle]: http://jsfiddle.net/KyleMit/XXVXH/1/
[Bootstrap grids]: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem
[justified navbar]: http://getbootstrap.com/2.3.2/examples/justified-nav.html

I'm using a bootstrap navbar which contains 3 elements. 
I want it to be distributed across the whole navbar, but it doesn't.

Here is the code:

 <div class="navbar steps" style="position:relative;z-index:7">
 <div class="navbar-inner">
 <ul class="row-fluid nav nav-pills">
 <li class="span3 active">
 <a href="#tab1" data-toggle="tab" class="step active">
 1
 Source 
 </a>
 </li>
 <li class="span3">
 <a href="#tab2" data-toggle="tab" class="step">
 2
 Détail
 </a>
 </li>
 <li class="span3">
 <a href="#tab3" data-toggle="tab" class="step">
 3
 Configuration
 </a>
 </li>
 
 </ul>
 </div>
 </div>

number of items in bootsrap navbar

There are much easier ways to do this than the current answers. You can do this all with CSS so you don't need to go into the DOM and dynamically change any elements.

If you include the following CSS (*adapted from [show collapse state with Chevron icon][so]*):



 .accordion-heading a:after {
 font-family: 'Glyphicons Halflings';
 content: "\2212"; /* Plus */ 
 float: right; 
 color: grey; 
 }
 .accordion-heading a.collapsed:after {
 content: "\2b"; /* Minus */
 }

Then you can even get rid of the icon elements as this will create an icon and toggle it appropriately based on whether the anchor element has the `collapsed` class.

### [Demo in jsFiddle][fiddle1]

----

Or, if you don't like using psuedo selectors, you can just include both icons and then toggle their visibility as needed.



 Title One
 
 



 .accordion-heading .icon-plus { display: none; }
 .accordion-heading .icon-minus { display: block; }
 .accordion-heading .collapsed .icon-plus { display: block; }
 .accordion-heading .collapsed .icon-minus { display: none; }

### [Demo in jsFiddle][fiddle2]

[fiddle1]: http://jsfiddle.net/KyleMit/AxWe3/2/
[fiddle2]: http://jsfiddle.net/KyleMit/AxWe3/3/
[so]: https://stackoverflow.com/a/18568997/1366033

I need the following, when the page is loaded must show one open accordion with minus icon, and when closed the plus icon should change.

[**Here's an example in fiddle**](http://jsfiddle.net/Gonzalo2683/5wtp9/13/)

    $('div.accordion-body').on('shown', function () {
        $(this).parent("div").find(".icon-plus")
                             .removeClass("icon-plus")
                             .addClass("icon-minus");
    });
    
    $('div.accordion-body').on('hidden', function () {
        $(this).parent("div").find(".icon-minus")
                             .removeClass("icon-minus")
                             .addClass("icon-plus");
    });

How to make to display open accordion with default icon minus?