CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
user3878749
user3878749

Reputation: 1

nav-pills won't work for me

I've try to use nav-pills (from bootstrap 3.2.0) and it seems that this won't work for me. Here is my HTML code:

<div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="skills-box">

            <div class="nav nav-pills" role="tablist">
              <div class="skills active">
             <a data-toggle="pill" href="#code" role="pill"><spanclass="count"><i class="fa fa-code fa-3x"></i></span></a>
             </div>

              <div class="skills">
              <a data-toggle="pill" href="#pages" role="pill"><span class="count"><i class="fa fa-desktop fa-3x"></i></span></a>
              </div>


              <div class="skills">
              <a data-toggle="pill" href="#rwd" role="pill"><span class="count"><i class="fa fa-laptop fa-3x"> </i><i class="fa <fa-> </fa->tablet fa-2x"></i></span></a>
              </div>

              <div class="skills">
              <a data-toggle="pill" href="#front" role="pill"><span class="count"><i class="fa fa-cogs fa-3x"></i></span></a>
              </div>
            </div>

              <div class="tab-content">
              <div class="tab-pane active" id="code"><h3>Kodowanie HTML5/LESS</h3><p>Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.</p></div>

              <div class="tab-pane" id="pages"><h3>Strony internetowe</h3><p>Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.</p></div>

              <div class="tab-pane" id="rwd"><h3>Responsive & Mobile first design</h3><p>Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.</p></div>

              <div class="tab-pane" id="front"><h3>Kodowanie HTML5/LESS</h3><p>Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.</p></div>
              </div>

        </div>
      </div>
    </div>

Can someone check this please and give me some hint?

BR, Bartek

Upvotes: 0

Views: 185

Answers (1)

ArcticanAudio
ArcticanAudio

Reputation: 96

The docs show the pills as <ul> objects. Have you tried them as un-ordered lists? E.G.:

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

EDIT:

In your case it would be something like....

<ul class="nav nav-pills" role="tablist">
    <li class="skills active"><a href="#code"><span class="count"><i class="fa fa-code fa-3x"></i></span></a></li>
    <li class="skills"><a href="#pages"><span class="count"><i class="fa fa-desktop fa-3x"></i></span></a></li>
    <li class="skills"><a href="#rwd"><span class="count"><i class="fa fa-laptop fa-3x"> </i><i class="fa-tablet fa-2x"></i></span></a></li>
    <li class="skills"><a href="#front"><span class="count"><i class="fa fa-cogs fa-3x"></i></span></a></li>
</ul>

Please note I've not tested it. Also your code has <spanclass="count">which should have a space, and your third font awesome image has some erroneous code in there. That could be causing some issues.

EDIT2:

Here's a JSFiddle of it

Upvotes: 3

Related Questions