CODEWITHSUNDEEP
htmltwitter-bootstrapcsstwitter-bootstrap-3
GargantuanTezMaximus
GargantuanTezMaximus

Reputation: 1118

Bootstrap Inline styling

I am trying to display a series of elements inline as in the following picture using bootstrap:

Issue Image

After I add the "form-control" class to the input it moves below the other elements. I have tried several different combinations and can't come up with the correct set of classes and styling.

The html is below:

<div class="row">
    <div class="form-group col-xs-12 col-md-5 col-lg-6">
        <label class="control-label">
            Unique ID @Model.Ordering:
            <input class="form-control" type="number" required />
        </label>
        <strong>Name:</strong> @Model.Name
        <strong>DOB:</strong> @Model.DateOfBirth
        <strong>Gender: </strong>@Model.Gender
    </div>
</div>

Here is my updated code which now works correctly.

<div class="row">
    <div class="form-group form-inline">
        <div class="form-group">
            <label class="control-label">
                Unique ID @Model.Ordering:
            </label>
        </div>
        <div class="form-group">
            <input class="form-control" type="number" />
        </div>
        <div class="form-group">
            <strong>Name:</strong> @Model.Name
        </div>
        <div class="form-group">
            <strong>DOB:</strong> @Model.DateOfBirth
        </div>
        <div class="form-group">
            <strong>Gender: </strong>@Model.Gender
        </div>
    </div>
 </div>

Upvotes: 0

Views: 2460

Answers (2)

blue_zinc
blue_zinc

Reputation: 2500

You are looking for <form class="form-inline"> look at the inline documentation

Upvotes: 2

Mike Skott
Mike Skott

Reputation: 191

It looks like you are looking for bootstrap's inline form class. Have you already added .form-inline to your form tag?

Upvotes: 2

Related Questions