CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
G4brym
G4brym

Reputation: 17

Place 2 dropdowns in the same line

I have this 2 dropdowns from bootstrap and i want to put them in the same row, i tryed to use the <div class="row"> and the <div style="display: inline-block;"> and it didn´t worked

<div class="row">
Ir Para: 
  <div class="dropdown">
    <button class="btn btn-primary btn-xs dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Janeiro
    <i class="fa fa-caret-down"></i></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Janeiro</a></li>
      //more dropdown content
    </ul>
  </div> de 
  <div class="dropdown">
    <button class="btn btn-primary btn-xs dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">2015
    <i class="fa fa-caret-down"></i></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2015</a></li>
      //more dropdown content
    </ul>
  </div>

Upvotes: 1

Views: 15512

Answers (3)

kinshuk
kinshuk

Reputation: 41

There are two ways of doing this. First you can create a button group. Since you are using two div elements, they both will need to have button group class. This method will have no space between the buttons on the same line Here is the First Method ::

 <div class="btn-group">
Ir Para: 
  <div class="dropdown btn-group">
    <button class="btn btn-primary btn-xs dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Janeiro
    <i class="fa fa-caret-down"></i></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Janeiro</a></li>
      //more dropdown content
    </ul>
  </div> de 
  <div class="dropdown btn-group">
    <button class="btn btn-primary btn-xs dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">2015
    <i class="fa fa-caret-down"></i></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2015</a></li>
      //more dropdown content
    </ul>
  </div>

Second method ::

In the second method, you specify the grid span each button takes using col-- class. This method provides space between the buttons on the same line. Here is how it can be done::

<div class="row">
 <div class="col-md-2">
Ir Para: 
  <div class="dropdown">
    <button class="btn btn-primary btn-xs dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Janeiro
    <i class="fa fa-caret-down"></i></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Janeiro</a></li>
      //more dropdown content
    </ul>
  </div> de 
</div>
<div class="col-md-2">
  <div class="dropdown">
    <button class="btn btn-primary btn-xs dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">2015
    <i class="fa fa-caret-down"></i></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2015</a></li>
      //more dropdown content
    </ul>
  </div> 
</div>

Upvotes: 4

Legends
Legends

Reputation: 22702

Look this works for me, try it : demo

      <div class="dropdown pull-left">
    <button class="btn btn-primary btn-xs dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Janeiro
    <i class="fa fa-caret-down"></i></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Janeiro</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Fevereiro</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Outubro</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Novembro</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Dezembro</a></li>
    </ul>
  </div> 
</div>
  <div class="dropdown pull-left">
    <button class="btn btn-primary btn-xs dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">2015
    <i class="fa fa-caret-down"></i></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2015</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2016</a></li>
    </ul>
  </div>

Upvotes: 1

Danko
Danko

Reputation: 1864

Try this:

.dropdown {
  display: inline-block;
}

Upvotes: 1

Related Questions