Twitter Bootstrap Question posted in

How do I align Bootstrap inline form labels that don't have an input with those that do? – Twitter bootstrap

When the content is wide enough to have this all on the same row without line breaking (probably need to go full page with the snippet), the right label text is aligned slightly higher than the left label text. I’m trying to get the text of the two labels aligned to the same baseline.

I’ve tried to use vertical align in various ways, tried to set the height the same as the left on the right group, but I can’t get anything to work.

Of course I could just set a fixed margin, but is there a responsive way to do this?

.main {
  margin-top: 20px;
}

#left-input {
  width: 100px;
}

.vmiddle {
  /* does nothing ? */
  vertical-align: middle;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
  <div class="row">

    <div class="col-xs-6 ">
      <div class="form-inline">
        <div class="form-group">
          <label>Left Label:</label>
          <input id="left-input" type="text" class="form-control" value="Some Value" />
        </div>
      </div>
    </div>

    <div class="col-xs-6 vmiddle">
      <div class="form-inline">
        <div class="form-group">
          <label>Right Label: Higher</label>
        </div>
      </div>
    </div>

  </div>
</div>
Tags:

4

Answers


  1. 0

    Add a margin utility class that’s half the height of Bootstrap’s padding.

    <style>
    .m-t-7 {
        margin-top: 7.5px;
    }
</style>

<div class="col-xs-6">
    <div class="form-inline">
        <div class="form-group">
            <label class="m-t-7">Right Label: Higher</label>
        </div>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    Since the second one is technically not a label, you can use Bootstrap’s Static form control instead. It’s designed to align with form-control and .btn elements.

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
  <div class="row">

    <div class="col-xs-6 ">
      <div class="form-inline">
        <div class="form-group">
          <label>Left Label:</label>
          <input id="left-input" type="text" class="form-control" value="Some Value" />
        </div>
      </div>
    </div>

    <div class="col-xs-6 vmiddle">
      <div class="form-inline">
        <div class="form-group">
          <p class="form-control-static"><strong>Right Label</strong></p>
        </div>
      </div>
    </div>

  </div>
</div>
    Login or Signup to reply.
  3. 0

    Yup.
    First, give the right label an id so you can select it individually.

    <label id="right">Right Label: Higher</label>

    then, in your css add:

    #right{
  padding-top:2px; /*Insert your own value for paddin*/
}

    and to make it dynamic, remove the padding when the left label stacks. Find the pixel width of the browser when this happens, and then create a media query for the event:

    @media(max-width:300px){

  #right{
    padding-top:0;
  }

}

    Another idea which may not be possible in your layout, would be to limit the width of the content so it never gets wide enough for this.

    Login or Signup to reply.
  4. 0

    Yes. Just try to remove the margin bottom of the <label>Right Label: Higher</label>. Please leave a comment if this wont work.

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
  <div class="row">

    <div class="col-xs-6 ">
      <div class="form-inline">
        <div class="form-group">
          <label>Left Label:</label>
          <input id="left-input" type="text" class="form-control" value="Some Value" />
        </div>
      </div>
    </div>

    <div class="col-xs-6 vmiddle">
      <div class="form-inline">
        <div class="form-group">
          <label style="margin-bottom: 0;">Right Label: Higher</label>
        </div>
      </div>
    </div>

  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search