CODEWITHSUNDEEP
csstwitter-bootstrapalignment
Jeff Storey
Jeff Storey

Reputation: 57172

bootstrap label next to input

I'm trying to put an input field's label next to it instead of above it using bootstrap. Wrapping this in form-horizontal works, but it's not actually in a form (just an ajax call that reads the value). Is there a way to simply move the label to the left side of the input?

    <div class="controls-row">
        <div class="control-group">
            <label class="control-label" for="my-number">ALabel</label>

            <div class="controls">
                <input id="my-number" type="number"/>
            </div>
        </div>
    </div>

The fiddle is at http://jsfiddle.net/7VmR9/

Upvotes: 17

Views: 57723

Answers (4)

user2021917
user2021917

Reputation:

You can take help directly from website they provided, well documented.

Here is a link to a Fiddle with Bootstrap css.

<div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
        <input type="text" id="inputEmail" placeholder="Email"/>
    </div>
</div>

Upvotes: 1

zoran404
zoran404

Reputation: 2936

The div is a block element, that means it will take as much width as it can and the input element is in it.

If you want the label to be next to the input element: either put the label in the div or make the div an inline-block element.

Upvotes: 6

Marco Lackovic
Marco Lackovic

Reputation: 6487

<form class="form-inline">
    <div class="form-group">
        <label for="my-number">ALabel</label>
        <input type="number" id="my-number" class="form-control">
    </div>
</form>

Source: https://getbootstrap.com/docs/3.3/css/#forms-inline

Upvotes: 3

Dhaval Ptl
Dhaval Ptl

Reputation: 494

Yes, you can do this by bootstrap column structure.

<div class="form-group">
  <label for="name" class="col-lg-4">Name:</label>
    <div class="col-lg-8">
      <input type="text" class="form-control" name="name" id="name">
    </div>
</div>

Here is a Bootply Demo

Upvotes: 16

Related Questions