newkid101 newkid101 - 6 months ago 33
CSS Question

Bootstrap - Align multiple select elements

So i am trying something very simple but can seem to figure it out. I have two

select
elements which I want to align horizontally with text in between. This is what I have: ( also 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 I when I try to put a
vs (versus)
between them , if I use a
<p>
or
<div>
with no class defined the second
select
gets misaligned. If I wrap the
vs
in a
div class=col-xs-1
the gap is too big and doesnt look nice. What would be the best way to get a
vs
between the 2
select
while keeping the alignment and not having a huge space between 2 elements

Answer

I assume you are using Bootstrap looking at the CodePen. Bootstrap has a class for inline forms which you could use like 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