Bootstrap 3 vertical form with one inline row of inputs

Question

How should I restructure the following markup such that the second row's inputs are inline with the label for time between them? I thought I might be able to use 'form-inline' on a div but it doesn't appear to apply the correct styling.

http://bootply.com/80058

<div class="well">
    <form role="form">
        <div class="row">
            <fieldset>
                <div class="form-group">
                    <div class="col-md-12">
                        <label for="address">To take me to</label>
                        <input type="text" name="address" id="address" class="form-control" placeholder="Enter a location" required>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="row">
            <fieldset>
                <div class="form-group">
                    <div class="col-md-12">
                        <label for="date">Date &amp; Time</label>
                        <input type="text" name="date" id="date" placeholder="Enter a date" class="form-control" required>
                        <label for="time">@</label>
                        <input type="text" name="time" id="time" placeholder="Enter a time" class="form-control" required>
                    </div>
                </div>
            </fieldset>
        </div>
    </form>
</div>

What I want is to end up with

Take me to
<Address>

Date & Time
<Date> @ <Time>

But in such as way as to have the date @ time row's inputs expand and contract responsively. It would be nice if they also acted like a col-md-n so that on smaller screens I end up with

Take me to
<Address>

Date & Time
<Date>
@
<Time>

Pier-Luc Gendreau · Accepted Answer · 2014-11-17 02:17:53Z

22

The following solution works perfectly with Bootstrap 3:

<form>
    <div class="form-group">
        <div class="row">
            <div class="col-md-6">
                <label>First name</label>
                <input type="text" class="form-control">
            </div>
            <div class="col-md-6">
                <label>Last name</label>
                <input type="text" class="form-control">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label>Address</label>
        <input type="text" class="form-control">
    </div>
</form>

This will display first and last name side by side with labels above the fields.

edited Nov 17, 2014 at 2:17

answered Apr 19, 2014 at 15:32

Pier-Luc Gendreau

13.8k4 gold badges63 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pier-Luc Gendreau Over a year ago

I read your question a second time and realized this isn't exactly what you were looking for. I'll leave the answer there anyway if it can be useful to anyone else.

Unferth Over a year ago

Was very useful to me, was exactly what I was looking for.

Shimmy Weitzhandler Over a year ago

I think form-group is supposed to wrap a label and control.

Magmatic Over a year ago

This solution works, but not perfectly. The vertical margin between Last name and Address will be wrong on a narrow screen.

Mike Oram · Accepted Answer · 2013-09-10 09:33:34Z

10

You are correct to think you can use form-inline

You want something like this:

<div class="row form-inline">
        <fieldset>
            <div class="col-md-12">
                <label for="date">Date &amp; Time</label>
            </div>
            <div class="form-group">
                <input type="text" required="" class="form-control" placeholder="Enter a date" id="date" name="date">
            </div>
            <div class="form-group">
                <label for="time">@</label>
            </div>
            <div class="form-group">
                <input type="text" required="" class="form-control" placeholder="Enter a time" id="time" name="time">                
            </div>
        </fieldset>
    </div>

answered Sep 10, 2013 at 9:33

Mike Oram

7658 silver badges22 bronze badges

2 Comments

gpcola Over a year ago

That's pretty much what I was after, thank you. I've update my OP with the markup I'm likely to use unless I come across a better solution.

gpcola Over a year ago

actually I just realised I had missed out the form-inline... Plus I see that if I add input-groups with input-group-addons it forces the time field on to a new line bootply.com/80077

Clak · Accepted Answer · 2014-08-08 19:18:14Z

I came up with this solution. Include the styles below and then format your form row as follows. You can leave out the unordered list, that's just what I needed for my site.

<div class="form-group">
    <label>Date &amp; Time</label>
    <ul class="list-unstyled">
        <li>
            <div class="input-group">
                <span class="input-group-input-addon"><input class="form-control input" type="text" style="width: 100px;" placeholder="Enter a date" /></span>
                <span class="input-group-addon">@</span>
                <input class="form-control" type="text" placeholder="Enter a time" />
            </div>
        </li>
    </ul>
    <a href="javascript:void(0);" class="btn btn-default btn-sm">
        <span><span class="glyphicon glyphicon-plus"></span> Add Material</span>
    </a>
</div>


<style>
@media (min-width: 768px) {
  .form-inline .input-group .input-group-input-addon{
    width: auto;
  }
}

.input-group > .input-group-input-addon > .input {
  border-radius: 6px;
}

.input-group-lg > .input-group-input-addon > .input {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}
select.input-group-lg > .input-group-input-addon > .input {
  height: 46px;
  line-height: 46px;
}
textarea.input-group-lg > .input-group-input-addon > .input,
select[multiple].input-group-lg > .input-group-input-addon > .input {
  height: auto;
}
.input-group-sm > .input-group-input-addon > .input {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
select.input-group-sm > .input-group-input-addon > .input {
  height: 30px;
  line-height: 30px;
}
textarea.input-group-sm > .input-group-input-addon > .input,
select[multiple].input-group-sm > .input-group-input-addon > .input {
  height: auto;
}
.input-group-input-addon {
  display: table-cell;
}
.input-group-input-addon:not(:first-child):not(:last-child) > .input {
  border-radius: 0;
}
.input-group-input-addon {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}
.input-group-input-addon:first-child > .input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group-input-addon:last-child > .input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group-input-addon {
  position: relative;
  font-size: 0;
  white-space: nowrap;
}
.input-group-input-addon > .input {
  position: relative;
}
.input-group-input-addon > .input + .input {
  margin-left: -1px;
}
.input-group-input-addon > .input:focus,
.input-group-input-addon > .input:active,
.input-group > .form-control:focus,
.input-group > .form-control:active {
  z-index: 3;
}
.input-group-input-addon:not(:last-child) > .input {
  margin-right: -1px;
}
.input-group-input-addon:last-child > .input {
  margin-left: -1px;
}

@media (min-width: 768px) {
  .navbar-form .input-group .input-group-input-addon {
    width: auto;
  }
}
</style>

Magmatic · Accepted Answer · 2019-12-17 17:02:45Z

Pier-Luc's solution has problems with vertical margin spacing when the screen is narrow or wide. This solution solves the margin problem:

<form>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group" style="margin-bottom:15px">
                <label>First name</label>
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group" style="margin-bottom:15px">
                <label>Last name</label>
                <input type="text" class="form-control">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label>Address</label>
        <input type="text" class="form-control">
    </div>
</form>

Collectives™ on Stack Overflow

Bootstrap 3 vertical form with one inline row of inputs

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related