CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Beginner
Beginner

Reputation: 2886

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

Upvotes: 0

Views: 1443

Answers (2)

Naga Sai A
Naga Sai A

Reputation: 10975

I just tried with CSS

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

CSS:

              div{
          display:inline;

        }

    .field{
      position:absolute;
    }

        span{
          position:relative;
          padding:0px;

        }

Upvotes: 1

Ortwin van Vessem
Ortwin van Vessem

Reputation: 46

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

Upvotes: 3

Related Questions