html - Bootstrap - Align multiple select elements -


so trying simple can seem figure out. have 2 select elements want align horizontally text in between. have: ( on codepen )

<div class="row">   <div class="col-xs-2">     <select class="form-control input-sm">...</select>   </div>   <div class="col-xs-1"> vs </div>   <div class="col-xs-2">     <select class="form-control input-sm">...</select>   </div> </div> 

however when try put vs (versus) between them , if use <p> or <div> no class defined second select gets misaligned. if wrap vs in div class=col-xs-1 gap big , doesnt nice. best way vs between 2 select while keeping alignment , not having huge space between 2 elements

i assume using bootstrap looking @ codepen. bootstrap has class inline forms use this:

<div class="container">   <form action="" class="form-inline">     <div class="form-group">       <select class="form-control"><option>select option</option></select>     </div>     <div class="form-group">vs</div>     <div class="form-group">       <select class="form-control"><option>select option</option></select>     </div>   </form> </div> 

codepen: http://codepen.io/anon/pen/zoyjbm


Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)

Google AdWords and AdSense - A Dynamic Small Business Marketing Duo