CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Fluidouix
Fluidouix

Reputation: 57

How to make Button width into 100% when bootstrap navbar toggle?

I have several buttons dropdown, and I would want to know how to toggle navigation buttons into a width 100 %.

For example, here we can see that buttons do not occupy all the space : example in jsfiddle

And here is my code :

    <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <div class="btn-group navbar-btn">
          <button type="button" class="btn btn-default dropdown-toggle navbar-toggle" data-toggle="dropdown" aria-expanded="false">
            Catégories <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Cat 1</a></li>
            <li><a href="#">Cat 2</a></li>
          </ul>
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Filtres <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Filtre 1</a></li>
            <li><a href="#">Filtre 2</a></li>
          </ul>
        </div>        
        <div class="btn-group navbar-right navbar-btn" role="group" aria-label="">
          <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon glyphicon-th" aria-hidden="true"></span>
          </button>
          <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
          </button>
        </div>
        <form class="navbar-form navbar-right" role="search">
          <input type="text" class="form-control" placeholder="Rechercher"> 
        </form>
      </div>

Anybody has the solution?

Thank you in advance

Upvotes: 1

Views: 1415

Answers (1)

gaurav5430
gaurav5430

Reputation: 13882

looking at your current code, you can add the following css:

.navbar-btn,.navbar-btn .btn{
    width:100%;
}

Upvotes: 1

Related Questions