CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Chad Johnson
Chad Johnson

Reputation: 21895

Inline Bootstrap form layout with labels above inputs

I'd like to create a form with the following layout using Bootstrap 3:

enter image description here

I have a jsfiddle with an attempt here: http://jsfiddle.net/quyB6/

And the markup I've tried:

<form>
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Line Height</label>
        <input type="number" value='' class="form-control" id="lineHeight">
    </div>
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Padding Top</label>
        <input type="number" value='' class="form-control" id="paddingTop" />
    </div>
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Padding Bottom</label>
        <input type="number" value='' class="form-control" id="paddingBottom">
    </div>
</div>

Upvotes: 41

Views: 82577

Answers (6)

Nikhil
Nikhil

Reputation: 3950

this will work:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap 4 Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <form>
            <div class="row">
                <div class="col-md-4">
                    <label for="name" class="control-label">Line Height</label>
                </div>
                <div class="col-md-4">
                    <label for="name" class="control-label">Padding Top</label>
                </div>
                <div class="col-md-4">
                    <label for="name" class="control-label">Padding Bottom</label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <input type="number" value='' class="form-control  bg-secondary text-white" id="lineHeight">
                </div>

                <div class="col-md-4">
                    <input type="number" value='' class="form-control  bg-secondary text-white" id="paddingTop" />
                </div>
                <div class="col-md-4">
                    <input type="number" value='' class="form-control  bg-secondary text-white" id="paddingBottom">
                </div>
            </div>
    </div>

</body>

</html>

check:https://jsfiddle.net/89h0vrLq/

Upvotes: 1

user3051780
user3051780

Reputation:

With Bootstrap 4.4:

Use the class "form-row" in the form element.

<form class="form-row">
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Line Height</label>
        <input type="number" value='' class="form-control" id="lineHeight">
    </div>
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Padding Top</label>
        <input type="number" value='' class="form-control" id="paddingTop" />
    </div>
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Padding Bottom</label>
        <input type="number" value='' class="form-control" id="paddingBottom">
    </div>
</form>

Upvotes: 15

jenniwren
jenniwren

Reputation: 351

Putting <div style="clear: both;"></div> between the <label> and the <input> worked for me. I tried a bunch of the above ideas with no luck. This is with Bootstrap 3.3.7.

So 

<label for="name" class="control-label">Line Height</label> 
<div style="clear: both;"></div>
<input type="number" value='' class="form-control" id="lineHeight">

I also included "pull-right" as a class (i.e. class="control-label pull-right" and class="form-control pull-right" to get the label and the input on the right-hand side of the page.

Upvotes: 1

Jack
Jack

Reputation: 446

Replace <label> tag with <div> and it will line up on top perfectly.

Upvotes: 11

F.D.Castel
F.D.Castel

Reputation: 2362

For bootstrap v4 you can use d-flex flex-column:

<div class="form-group col-md-4">
    <div class="d-flex flex-column">
        <label for="name" class="control-label">Line Height</label>
        <input type="number" value='' class="form-control" id="lineHeight">
    </div>
</div>

Upvotes: 12

nicholaschris
nicholaschris

Reputation: 1401

I think the simplest solution would be to add col-xs-4 to the class of each div. That will make sure the divs will be inline for the jsfiddle example. Additionally, you should close the form tag with </form>.

<form>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Line Height</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Ime">
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Padding Top</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Ime">
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Padding Bottom</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Ime">
    </div>
</form>

Upvotes: 45

Related Questions