CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Ryan Buening
Ryan Buening

Reputation: 1660

How to Style Navbar Buttons Similar to Anchor Links?

I have buttons in my Bootstrap Navbar like the following:

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><button type="submit" class="">Tab 1</button></li>
        <li><button type="submit" class="">Tab 2</button></li>
        <li><button type="submit" class="">Tab 3</button></li>
    </ul>
</div>

which displays:

enter image description here

Is there a way I can style my buttons to replicate the default style of the Bootstrap Navbar anchor tags?:

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

enter image description here

Upvotes: 2

Views: 1082

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

You can refer to navbar-btn class described in Navbar buttons.

If you need to remove the border from your buttons you can add :

.navbar-nav button {
    border-style: none !important;
}

 <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><button type="submit" class="btn btn-default navbar-btn">Tab 1</button></li>
        <li><button type="submit" class="btn btn-default navbar-btn">Tab 2</button></li>
        <li><button type="submit" class="btn btn-default navbar-btn">Tab 3</button></li>
    </ul>
</div>

Upvotes: 1

Related Questions