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