CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sato
Sato

Reputation: 8602

How to make nav-tabs and button on one row?

Like this, bootstrap 3:

|  tab1 |  tab2  |  tab3 |                                    button


<div class="row">
  <ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
  </ul>  
  <div class="btn-group pull-right">
    <button class="btn btn-default navbar-btn pull-right" >123</button>
  </div>
</div>

Upvotes: 1

Views: 2487

Answers (1)

wiizzard
wiizzard

Reputation: 152

If you want to place multiple elements in a single row you can use the bootstrap grid system. For details see: http://getbootstrap.com/examples/grid/

Your code could then look like:

<div class="row">
    <div class="col-xs-8">
        <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#">Home</a>
            </li>
            <li role="presentation"><a href="#">Profile</a>
            </li>
            <li role="presentation"><a href="#">Messages</a>
            </li>
        </ul>
    </div>
    <div class="col-xs-4">
        <div class="btn-group pull-right">
            <button class="btn btn-default navbar-btn pull-right">123</button>
        </div>
    </div>
</div>

For working a example see here: https://jsfiddle.net/qmjmtx27/1/

Upvotes: 1

Related Questions