CODEWITHSUNDEEP
csstwitter-bootstrap
dlumpp
dlumpp

Reputation: 1208

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

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>

Upvotes: 3

Views: 2303

Answers (4)

Blues Clues
Blues Clues

Reputation: 1858

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>

Upvotes: 0

Patrick_design
Patrick_design

Reputation: 11

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.

Upvotes: 0

Tigran Petrossian
Tigran Petrossian

Reputation: 1168

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>

Upvotes: 1

timgavin
timgavin

Reputation: 5166

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>

Upvotes: 0

Related Questions