CODEWITHSUNDEEP
csstwitter-bootstrap
Vishnu Sureshkumar
Vishnu Sureshkumar

Reputation: 2316

How to show a label and text box in a same row using Twitter Bootstrap

<div class="control-group">
    <label for="name" class="control-label"><p class="text-info">Name&nbsp;<i class="icon-star"></i></p></label>
    <div class="controls">
        <input type="text" id="name" placeholder="Enter your name" class="span3">
    </div>

this is not working for me, I dont wanna use 'form-horizontal' class or a table for this. I have tried with row and row-fluid class but its not working.

Upvotes: 1

Views: 24918

Answers (2)

Sandeep
Sandeep

Reputation: 1154

You want horizontal form layout. This can be achieved by wrappping your code between a div having class as form-horizontal.

<div class="form-horizontal">
   <div class="control-group">
    <label for="name" class="control-label"><p class="text-info">Name&nbsp;<i class="icon-star"></i></p></label>
    <div class="controls">
        <input type="text" id="name" placeholder="Enter your name" class="span3">
    </div>
</div>

To learn more click here

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

You can wrap your code with <div class="form-horizontal">. You don't need to have a form to use form-horizontal.

Example:

<div class="form-horizontal">
    <div class="control-group row-fluid form-inline">
        <label for="name" class="control-label"><p class="text-info">Name&nbsp;<i class="icon-star"></i></p></label>
        <div class="controls">
            <input type="text" id="name" placeholder="Enter your name" class="span3">
        </div>
    </div>
</div>

Upvotes: 11

Related Questions