CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
justinhj
justinhj

Reputation: 11306

Align labels under input boxes using Bootstrap

I'm not sure how to go about getting the effect I want here. I have two input boxes that are on the same line and I want to have labels underneath them and aligned to match the respective input box.

<div class="container">
   <form class="form-inline" role="form">
      <div class="form-group">
          <label for="decimal_input">Label 1</label>
          <input type="text" value="1" width="10" id="decimal_input" class="form-control" />
          = <label for="input2">Label 2</label> 
          <input type="text" value="I" width="30" id="input2" class="form-control" />
      </div>
</div>
</form>

Take a look at the jsfiddle here for more info:

http://jsfiddle.net/justinhj/bTVKZ/2/

Upvotes: 0

Views: 14439

Answers (3)

The Alpha
The Alpha

Reputation: 146191

You may try this

Extra CSS:

label {
   display:block;
}

.form-group {
    display:inline-block;
}

Modified HTML:

<div class="container">
    <form class="form-inline" role="form">
        <div class="form-group">
            <input type="text" value="1" width="10" id="decimal_input" class="form-control" />
            <label for="decimal_input">Label 1</label>
        </div>
        <div class="form-group">
            <input type="text" value="I" width="30" id="input2" class="form-control" />
            <label for="input2">Label 2</label>
        </div>
    </form>
</div>

DEMO.

Upvotes: 0

Eran H.
Eran H.

Reputation: 1219

Your new HTML:

<div class="container">
    <form class="form-inline" role="form">
        <div class="form-group">
            <span class="inner-container">
                <label for="decimal_input">Label 1</label>
                <input type="text" value="1" width="10" id="decimal_input" class="form-control" />
            </span>
            =
            <span class="inner-container">
                <label for="input2">Label 2</label>
                <input type="text" value="I" width="30" id="input2" class="form-control" />
            </span>
        </div>
</div>
</form>
</diV>

Your new CSS (of course I would add a class to the labels):

.container {
    margin-top: 10px;
}

.inner-container {
    position: relative;
}

label {
    top: 25px;
    left: 5px;
    position: absolute;
}

here's the fiddle

Upvotes: 0

isherwood
isherwood

Reputation: 61056

http://jsfiddle.net/isherwood/bTVKZ/6

<div class="container">
    <form class="form-inline" role="form">
        <div class="form-group">
            <div class="pull-left">
                <input type="text" value="1" width="10" id="decimal_input" class="form-control" />
                <br />
                <label for="decimal_input">Label 1</label>
            </div>
            <div>
                <input type="text" value="I" width="30" id="input2" class="form-control" />
                <br />
                <label for="input2">Label 2</label>
            </div>
        </div>
    </form>
</div>

Upvotes: 4

Related Questions