Menu
I can't seem to figure out how to right align select input groups in bootstrap 3. No matter what i try it aligns on the right. If you look at the fiddle below, im trying to align the select and button inputs to the right of the gray box. Any help would be greatly appreciated.
fiddle
<body>
<div class="container">
<div class="row">
<div id="header-right-container" class="col-lg-3 col-md-4 col-sm-4 col-xs-12" style="background-color: #eee;">
<div class="row">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-globe"></span></span>
<select class="form-control input-sm" style="width:150px">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</div>
</div>
<div class="row">
<div class="btn-group">
<a id="headerUserButton" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown" href="##">
<i class="glyphicon glyphicon-user"></i> User Name
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
<li><a href="#">Option A</a></li>
<li><a href="#">Option B</a></li>
<li><a href="#">Option C</a></li>
</ul>
</div><!--- /.btn-group --->
</div>
</div>
</div>
</div>
</body>
997
Add pull-right to your input-group and btn-group. Then move style="width:150px" from form-control to input-group.
Here's a fiddle.
118
Add Width to input-group and put a pull-right to it. The select would be alligned to right.
http://jsfiddle.net/MGD2y/
HTML:
<body>
<div class="container">
<div class="row">
<div id="header-right-container" class="col-lg-3 col-md-4 col-sm-4 col-xs-12" style="background-color: #eee;">
<div class="row">
<div class="col-md-4 pull-right">
<div class="input-group pull-right" style="width: 200px;">
<span class="input-group-addon"><span class="glyphicon glyphicon-globe"></span></span>
<select class="form-control input-sm" style="width:150px">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="btn-group">
<a id="headerUserButton" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown" href="##">
<i class="glyphicon glyphicon-user"></i> User Name
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
<li><a href="#">Option A</a></li>
<li><a href="#">Option B</a></li>
<li><a href="#">Option C</a></li>
</ul>
</div><!--- /.btn-group --->
</div>
</div>
</div>
</div>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
