CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
ifusion
ifusion

Reputation: 2233

How to evenly space 3 select box's inline using bootstrap?

I need to space 3x select box's evenly so they are all the same width but all 3x combined need to span the full length of the container under the search bar so everything lines up.

CodePen Demo

HTML:

<div class="container">
  <div class="col-md-8 col-md-offset-2">
    <form>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Seach here..." />
      </div>
      <div class="form-inline">
          <div class="form-group">
            <select class="form-control make-me-wider">
                <option>City</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
            <div class="form-group">
            <select class="form-control make-me-wider">
                <option>Type</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
              <div class="form-group">
            <select class="form-control make-me-wider">
                <option>Category</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
          </div>
       </div>
    </form>
  </div>

</div>

CSS:

form {
   margin-top: 30px;
}

.make-me-wider {
  width: 33%;
}

Upvotes: 0

Views: 1131

Answers (2)

Bobby Shark
Bobby Shark

Reputation: 1074

Just use a table inside your form-group and add a width:100% for every select

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

<form>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Seach here..." />
  </div>
  <div class="form-group">
      <table cellpading="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td>
            <select class="form-control" style="width:100%">
              <option>City</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </td>
          <td>
              <select class="form-control"  style="width:100%">
                <option>Type</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
          </td>
          <td>
              <select class="form-control"  style="width:100%">
                <option>Category</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
          </td>
        </tr>
    </table>
   </div>
</form>

Upvotes: 0

Bala
Bala

Reputation: 706

the div class="form-group" needs to be closed after every select. Also parent div class="form-inline" needs a class row and every div around the select having class="form-group" needs a class col-xs-4. here is a working sample of code

JSFillde URL: http://jsfiddle.net/r2qronjm/1/

form {
   margin-top: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="col-md-8 col-md-offset-2">
    <form>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Seach here..." />
      </div>
      <div class="form-inline row">
          <div class="form-group col-xs-4">
            <select class="form-control">
                <option>City</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
	      </div>
            <div class="form-group col-xs-4">
            <select class="form-control">
                <option>Type</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
	      </div>
              <div class="form-group col-xs-4">
            <select class="form-control">
                <option>Category</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
          </div>
       </div>
    </form>
  </div>
  
</div>

hope this helps.

Upvotes: 2

Related Questions