CODEWITHSUNDEEP
csstwitter-bootstrap
Carol.Kar
Carol.Kar

Reputation: 5355

Twitter Boostrap - Align label horizontally to dropdown

I would like to have the label for the dropdown next to the dropdown menus.

Find below how my current example looks like:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<ul class="nav nav-pills" role="tablist">
  <li role="presentation">Order: </li>
  <li role="presentation" class="dropdown">
    <a href="#" class="dropdown-toggle" id="drop4" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ticker<span class="caret"></span></a>
    <ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
      <li>
        <a href="#">Action</a>
      </li>
      <li>
        <a href="#">Another action</a>
      </li>
      <li>
        <a href="#">Something else here</a>
      </li>
      <li role="separator" class="divider"></li>
      <li>
        <a href="#">Separated link</a>
      </li>
    </ul>
  </li>
</ul>

Any suggestions how to align the label with the dropdown properly?

Thx in advance!

Upvotes: 9

Views: 212

Answers (5)

Bhuwan
Bhuwan

Reputation: 16855

Just add the below css in your custom css file

.nav-pills>li:not(.dropdown) {
    padding: 10px 12px;
}


.nav-pills>li:not(.dropdown) {
  padding: 10px 12px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<ul class="nav nav-pills" role="tablist">
  <li role="presentation">Order: </li>
  <li role="presentation" class="dropdown">
    <a href="#" class="dropdown-toggle" id="drop4" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ticker<span class="caret"></span></a>
    <ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
      <li>
        <a href="#">Action</a>
      </li>
      <li>
        <a href="#">Another action</a>
      </li>
      <li>
        <a href="#">Something else here</a>
      </li>
      <li role="separator" class="divider"></li>
      <li>
        <a href="#">Separated link</a>
      </li>
    </ul>
  </li>
</ul>

Upvotes: 4

doppler
doppler

Reputation: 883

I like Gerard's display: flex solution better, but just in case anyone prefers to maintain the original display property, here is an example using only line-height to vertically center both .nav-pills.

<style>
    .nav-pills > li {
        line-height: 40px;
    }
    .nav.nav-pills > li > a {
        /* removes top & bottom padding */
        padding: 0 15px;
    }
</style>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<ul class="nav nav-pills" role="tablist">
  <li role="presentation">Order: </li>
  <li role="presentation" class="dropdown">
    <a href="#" class="dropdown-toggle" id="drop4" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ticker<span class="caret"></span></a>
    <ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
      <li>
        <a href="#">Action</a>
      </li>
      <li>
        <a href="#">Another action</a>
      </li>
      <li>
        <a href="#">Something else here</a>
      </li>
      <li role="separator" class="divider"></li>
      <li>
        <a href="#">Separated link</a>
      </li>
    </ul>
  </li>
</ul>

Upvotes: 1

pradeep kumar
pradeep kumar

Reputation: 1011

Use Flex to nav pills

.nav-pills{
display:flex;
align-items:center;
}

JS FIDDLE: https://jsfiddle.net/pradeep0594/qfwngj5x/1/ for your reference

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 273659

You can simply add padding like this :

/* Optional theme */

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

ul.nav > li:first-child {
 padding:10px 5px;
}
<ul class="nav nav-pills" role="tablist">
  <li role="presentation" >Order: </li>
  <li role="presentation" class="dropdown">
    <a href="#" class="dropdown-toggle" id="drop4" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            Ticker
                                <span class="caret"></span>
                            </a>
    <ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
      <li>
        <a href="#">Action</a>
      </li>
      <li>
        <a href="#">Another action</a>
      </li>
      <li>
        <a href="#">Something else here</a>
      </li>
      <li role="separator" class="divider"></li>
      <li>
        <a href="#">Separated link</a>
      </li>
    </ul>
  </li>

Upvotes: 3

Gerard
Gerard

Reputation: 15796

I'm not sure I understand correctly, but for alignment I would use a flexbox.

.nav-pills {
  display: flex;
  align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-pills" role="tablist">
  <li role="presentation">Order: </li>
  <li role="presentation" class="dropdown">
    <a href="#" class="dropdown-toggle" id="drop4" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            Ticker
                                <span class="caret"></span>
                            </a>
    <ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
      <li>
        <a href="#">Action</a>
      </li>
      <li>
        <a href="#">Another action</a>
      </li>
      <li>
        <a href="#">Something else here</a>
      </li>
      <li role="separator" class="divider"></li>
      <li>
        <a href="#">Separated link</a>
      </li>
    </ul>
  </li>

Upvotes: 6

Related Questions