CODEWITHSUNDEEP
htmlcssformstwitter-bootstrap
sergej.art
sergej.art

Reputation: 149

Html form label line breaks

i need a twitter bootstrap form with input text boxes on the same line, but its labels must be on the top of input boxes.

So far i have:

<form action="#">
  <label for="city">City</label>
  <input type="text" id="city"/>
  <label for="street">Street</label>
  <input type="text" id="street"/>
</form>

http://jsfiddle.net/A8RaG/

So i need inputs on the same line and labels must be on the top of each input.

How do i do that?

Upvotes: 2

Views: 20681

Answers (4)

wazaminator
wazaminator

Reputation: 245

you can put a div around each label and block, and in the css put this div in inline-bloc

like :

<form action="#">
 <div class = "css">


 <label for="city">City</label>
  <input type="text" id="city"/>
   </div><div class="css">
  <label for="street">Street</label>
  <input type="text" id="street"/>
   </div>
</form>

and in the CSS:

.css{
    display : inline-block;
}

Upvotes: 1

mpgn
mpgn

Reputation: 7251

If you use Bootstrap you need to use the css of bootstrap ! Use class="form-horizontal" or class="form-inline"

You can try this with no css added : 

<form action="#" class="form-horizontal">
        <label for="city">City</label>
        <input type="text" id="city"/>
        <label for="street">Street</label>
        <input type="text" id="street"/>
</form>

Simple no ?

Upvotes: 1

Rick Hoving
Rick Hoving

Reputation: 3575

Another solution is putting a div around each label/input combination and setting the css to float left HTML

<form action="#">
    <div>
        <label for="city">City</label>
        <input type="text" id="city"/>
    </div>
    <div>
        <label for="street">Street</label>
        <input type="text" id="street"/>
    </div>
</form>

CSS

form div{
   float: left
}

jsFiddle

Upvotes: 3

user2281674
user2281674

Reputation:

You could also just use <br />. It will work for a form as well.

Upvotes: 1

Related Questions