CODEWITHSUNDEEP
twitter-bootstrap
pi-2r
pi-2r

Reputation: 1279

Align Fields Inline to Label

I need to align between label tag and a div tag containing an input using Bootstrap. My code looks like this:

<div class="container">
         <div class="col-lg-6" id="3_1i2c5e">
            <div class="row">
               <label id="3_1i2c6e_LABEL" style="display:inline; " class="formFieldTitle col-lg-2">Client</label>
               <div id="3_1i2c6e_FIELD" class="col-lg-10 form-control-static">
                  <input type="text" class="form-control" disabled="disabled" placeholder="0000001">
               </div>
            </div>
         </div>
      </div>

Here's my example on W3Schools TryIt Editor. How can I make the label inline with the .form-control?

Upvotes: 0

Views: 53

Answers (1)

Joshua
Joshua

Reputation: 649

This is a standard horizontal form in Bootstrap.

<div class="container">
    <div class="row">
        <div class="col-lg-6" id="3_1i2c5e">
            <div class="row">
                <form class="form">
                    <div class="form-group">
                        <div class="row">
                            <style>
                                label { top: 6px; }
                            </style>
                            <label id="3_1i2c6e_LABEL" class="col-sm-1">Client</label>
                            <div id="3_1i2c6e_FIELD" class="col-sm-5">
                                <input type="email" class="form-control" disabled="disabled" placeholder="0000001" />
                            <div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Those IDs being dynamic doesn't make a difference, make them as dynamic as you wish. I've also gone to the trouble of tidying up your Bootstrap.

Thing with labels in this format is that they do seem to appear without any vertical alignment, so you can add a top of 6px, or whatever you feel is appropriate to get it dead center. I've obviously put it in the markup for my example, but I advise you put it in your CSS and target the label(s).

Upvotes: 1

Related Questions