CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Guillaume Munsch
Guillaume Munsch

Reputation: 1283

Why my labels aren't aligned with the input-groups - Bootstrap

I don't know why, but i couldn't manage to align my labels (Label1 and Label2 here) with the input-group that follows each.

Here's my code :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div class="row">
  <div class="form-group col-md-6">
    <label for="De_:_">Label1 : </label>
    <div class="input-group">
      <span class="input-group-addon">Date</span>
      <input class="form-control" id="DateBeginModif" name="DateBeginModif" placeholder="Date" type="text" value="1/1/0001 12:00:00 AM">
      <span class="input-group-addon" style="border-left: 0; border-right: 0;">ou Lancement</span>
      <input class="form-control" id="RunBeginModif" name="RunBeginModif" placeholder="Run" type="text" value="">
    </div>
  </div>
  <div class="form-group col-md-6">
    <label for="A_:_">Label2 : </label>
    <div class="input-group">
      <span class="input-group-addon">Date</span>
      <input class="form-control" id="DateEndModif" name="DateEndModif" placeholder="Date" type="text" value="1/1/0001 12:00:00 AM">
      <span class="input-group-addon" style="border-left: 0; border-right: 0;">ou Lancement</span>
      <input class="form-control" id="RunEndModif" name="RunEndModif" placeholder="Run" type="text" value="">
    </div>
  </div>
</div>

I did a fiddle too.

I inspired me from this http://getbootstrap.com/css/#forms-inline but I must have missed something :/

Upvotes: 0

Views: 1022

Answers (2)

Ashesh
Ashesh

Reputation: 3599

This is the default behavior of Lables in HTML.

For inline lables, have a look at Horizontal-form, Bootstrap documentation

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<p style="font-family:monospace; color:red; text-align:center"> see in <b><i>Full Page</i></b> view, use other grid classes for smaller viewport.</p>
<div class="row">
  <div class="form-group form-horizontal col-md-6">
    <label class="col-md-2 control-label" for="De_:_">Label1 : </label>
    <div class="input-group col-md-10">
      <span class="input-group-addon">Date</span>
      <input class="form-control" id="DateBeginModif" name="DateBeginModif" placeholder="Date" type="text" value="1/1/0001 12:00:00 AM">
      <span class="input-group-addon" style="border-left: 0; border-right: 0;">ou Lancement</span>
      <input class="form-control" id="RunBeginModif" name="RunBeginModif" placeholder="Run" type="text" value="">
    </div>
  </div>
  <div class="form-group form-horizontal col-md-6">
    <label class="col-md-2 control-label" for="A_:_">Label2 : </label>
    <div class="input-group col-md-10">
      <span class="input-group-addon">Date</span>
      <input class="form-control" id="DateEndModif" name="DateEndModif" placeholder="Date" type="text" value="1/1/0001 12:00:00 AM">
      <span class="input-group-addon" style="border-left: 0; border-right: 0;">ou Lancement</span>
      <input class="form-control" id="RunEndModif" name="RunEndModif" placeholder="Run" type="text" value="">
    </div>
  </div>
</div>

Upvotes: 1

Ivanka Todorova
Ivanka Todorova

Reputation: 10229

First you've missed to add an <form> element with class form-inline (or you haven't included it in your question).

Second your content in the .col-md-6 divs - .input-group is with higher width that's why it goes on the next line.

You have two options: you can make the inputs with lesser width or you can use col-* and build the form in a grid.

Here's an example for the second option:

  <div class="form-group col-md-6">
    <label for="De_:_" class="col-xs-2">Label1 : </label>
    <div class="input-group col-xs-10">
      <span class="input-group-addon">Date</span>
      <input class="form-control" id="DateBeginModif" name="DateBeginModif" placeholder="Date" type="text" value="1/1/0001 12:00:00 AM">
      <span class="input-group-addon" style="border-left: 0; border-right: 0;">ou Lancement</span>
      <input class="form-control" id="RunBeginModif" name="RunBeginModif" placeholder="Run" type="text" value="">
    </div>
  </div>

Demo: http://jsfiddle.net/axa0rz44/2/

Upvotes: 1

Related Questions