Clever Geek Handbook

Inserting an input field inside a row with a title tag

I want to have text and h3 input on the same line (h3 is left aligned, input is right aligned, with the same vertical position).

I tried the class form-inline

but it doesn't work the way I want.

code:

   <div class="col-md-6">
      <form class="form-inline">
        <div class="form-group">
          <h3 class="pull-left">Upcoming Events</h3>
          <input type="text" class="form-control pull-right" placeholder="Country/Region">
        </div>
      </form>
    </div>

This is how it looks (I added a second column with hardcoded margins to show how I want it to look): http://www.bootply.com/f7QEh7oeqF

Any idea how I can format it the way I want?

+3


source to share


3 answers


Get rid of display: inline-block;

the class form-group

.



Then you can change the margin-top

title class attribute as you like to vertically align the title with the input field.

+1


source


Just add margin and set .form-group width to 100%. http://www.bootply.com/uvjb30F2ji



0


source


Do this for your forms:

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-6 h3">Upcoming Events</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" placeholder="Country/Region" />
        </div>
    </div>
</form>

and add this CSS:

.h3 {
    margin-top: 0;
    line-height: 34px;
}

and if the forms are too far from the lists, you can add the following CSS:

.form-group {
    margin-bottom: 0;
}

NOTE. I changed the tags h3

to tags label

to class .h3

because format controls need a shortcut associated with it for screen readers. This is usually not very expensive, but it helps with affordability.

See plnkr

0


source






More articles:


All Articles