samedi 18 juin 2016

bootstrap not alligning boxes properly

I have this code, but for some reason I am getting indentations of some sort when ever I put multiple boxes on the same row. How to I fix this?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Company Name</label>
  <div class="col-md-5 col-sm-5 col-xs-12">
    <input type="text" class="form-control" required placeholder="company name" id="companyName">
  </div>
</div>
<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Address</label>
  <div class="col-md-5 col-sm-5 col-xs-12">
    <input type="text" class="form-control" required="required" placeholder="address" id="address">
  </div>
</div>

<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> <span class="required"></span>
  </label>
  <div class="control-group">
    <div class="col-md-6 col-sm-6 col-xs-12">
      <div class="col-md-4">
        <input required type="text" class="form-control" placeholder="zip code" id="zipCode">
      </div>
      <div class="col-md-4">
        <select class="select2_single form-control" tabindex="-1">
          <option value="" selected="selected">Select a state</option>
          <option value="stateAlabama">Alabama</option>
          <option value="stateAlaska">Alaska</option>
          <option value="stateArizona">Arizona</option>
          <option value="stateArkansas">Arkansas</option>
          <option value="stateCalifornia">California</option>
          <option value="stateColorado">Colorado</option>
          <option value="stateConnecticut">Connecticut</option>
          <option value="stateDelaware">Delaware</option>
          <option value="stateFlorida">Florida</option>
          <option value="stateGeorgia">Georgia</option>
          <option value="stateHawaii">Hawaii</option>
          <option value="stateIdaho">Idaho</option>
          <option value="stateIllinois">Illinois</option>
          <option value="stateIndiana">Indiana</option>
          <option value="stateIowa">Iowa</option>
          <option value="stateKansas">Kansas</option>
          <option value="stateKentucky">Kentucky</option>
          <option value="stateLouisiana">Louisiana</option>
          <option value="stateMaine">Maine</option>
          <option value="stateMaryland">Maryland</option>
          <option value="stateMassaschusetts">Massaschusetts</option>
          <option value="stateMichigan">Michigan</option>
          <option value="stateMinnesota">Minnesota</option>
          <option value="stateMississippi">Mississippi</option>
          <option value="stateMissouri">Missouri</option>
          <option value="stateMontana">Montana</option>
          <option value="stateNebraska">Nebraska</option>
          <option value="stateNevada">Nevada</option>
          <option value="stateNewHampshire">New Hampshire</option>
          <option value="stateNewJersey">New Jersey</option>
          <option value="stateNewMexico">New Mexico</option>
          <option value="stateNewYork">New York</option>
          <option value="stateNorthCarolina">North Carolina</option>
          <option value="stateNorthDakota">North Dakota</option>
          <option value="stateOhio">Ohio</option>
          <option value="stateOklahoma">Oklahoma</option>
          <option value="stateOregon">Oregon</option>
          <option value="statePennsylvania">Pennsylvania</option>
          <option value="stateRhodeIsland">RhodeIsland</option>
          <option value="stateSouthCarolina">SouthCarolina</option>
          <option value="stateSouthDakota">SouthDakota</option>
          <option value="stateTennessee">Tennessee</option>
          <option value="stateTexas">Texas</option>
          <option value="stateUtah">Utah</option>
          <option value="stateVermont">Vermont</option>
          <option value="stateVirginia">Virginia</option>
          <option value="stateWashington">Washington</option>
          <option value="stateWisconsin">Wisconsin</option>
          <option value="stateWyoming">Wyoming</option>
          <option value="stateWashingtonDC">Washington D.C.</option>
        </select>
      </div>
    </div>
  </div>
</div>

enter image description here

Notice, on the left hand side where the boxes line up that they are not in line. I know this is small, but I have had this problem on a lot of my pages.

I want to use bootstrap to put the zip code box & the state selector underneath the address box and for it to split 50/50, all without using css and bootstrap only.

Aucun commentaire:

Enregistrer un commentaire