CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
basickarl
basickarl

Reputation: 40454

Bootstrap Horizontal Form not vertical

I would like to create a form and have it vertical. However on my computer the fields are all inline:

<div class="container">
    <div class="col-sm-6 col-md-offset-3">
        <form role="form" ng-submit="submit()" ng-controller="formCtrl">
            <div class="col-sm-6 form-group">
                <input type="email" data-ng-model="form.email" placeholder="[email protected]" class="form-control">
            </div>
            <div class="col-sm-6 form-group">
                <input type="password" data-ng-model="form.password" placeholder="password" class="form-control">
            </div>
            <div class="col-sm-4 form-group">
                <button type="submit" class="btn btn-success">sign in</button>
            </div>
        </form>
        <div id="messages"></div>
    </div>
</div>

I would like a slightly more narrow form as seen in the code. class="form-horizontal" does not help at all. Picture below shows the result!

enter image description here

Upvotes: 1

Views: 617

Answers (1)

m4n0
m4n0

Reputation: 32255

Reduce the parent container class to col-sm-3 and increase the child container's class to be col-sm-12.

So the parent container will have 25% width while the child containers will occupy the full width(100%) of the parent.

Readjust the centering of the form by modifying the offset-* classes.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="col-sm-3 col-sm-offset-4">
        <form role="form" ng-submit="submit()" ng-controller="formCtrl">
            <div class="col-sm-12 form-group">
                <input type="email" data-ng-model="form.email" placeholder="[email protected]" class="form-control">
            </div>
            <div class="col-sm-12 form-group">
                <input type="password" data-ng-model="form.password" placeholder="password" class="form-control">
            </div>
            <div class="col-sm-4 form-group">
                <button type="submit" class="btn btn-success">sign in</button>
            </div>
        </form>
        <div id="messages"></div>
    </div>
</div>

Upvotes: 2

Related Questions