CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user2706463
user2706463

Reputation: 99

Display input and label same line with Bootstrap

I would like to display, label and inputs on same line :

I tried in CSS:

form  label {
    display:block;
    float:left;

}

http://jsfiddle.net/kY5LL/18/

Upvotes: 3

Views: 18708

Answers (4)

Paulo Fidalgo
Paulo Fidalgo

Reputation: 22331

If you are using Bootstrap 3.x:

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputType" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="inputCity" placeholder="Input text">
        </div>
    </div>
</form>

Fiddle

Upvotes: 1

RbG
RbG

Reputation: 3213

here it is 

.span6{
overflow:hidden;
 display:inline;
}
.span6 label, .span6 input {
display:inline-block;
}
.span6 input {
width:70%;
margin-left:3%;
}

UPDATED FIDDLE

Upvotes: 4

Nicole Stutz
Nicole Stutz

Reputation: 516

I did this in my script. I created a div container box and inside the container, a label left to an input element.

. HTML

<div class="container">
    <label>Firstname</label>
    <input type="text">
</div>

CSS

div.container{
  overflow:hidden;
}
label{
    width:70px;
    display:block;
    float:left;
    text-align:left;
}
input{
  width:240px;
  float:left;
}

Upvotes: 0

Girish Thimmegowda
Girish Thimmegowda

Reputation: 2179

remove the class input-block-level given to input tag

Upvotes: -1

Related Questions