Twitter Boostrap - Align label horizontally to dropdown - css

Question

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">
Ticker<span class="caret"></span>
<ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>
</ul>
Any suggestions how to align the label with the dropdown properly?
Thx in advance!

Answer 1

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>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>

Answer 2

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">
Ticker<span class="caret"></span>
<ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>
</ul>

Answer 3

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>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>

Answer 4

Use Flex to nav pills
.nav-pills{
display:flex;
align-items:center;
}
JS FIDDLE: https://jsfiddle.net/pradeep0594/qfwngj5x/1/ for your reference

Answer 5

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">
Ticker<span class="caret"></span>
<ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>
</ul>