CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Stefanos Vakirtzis
Stefanos Vakirtzis

Reputation: 448

Inline form twitter bootstrap

Sorry for asking such an easy question but how can i make a form like this inline?

<form class="form-inline">
  <div class="field">
      <label>test</label> 
      <input type="text" class="input-small" placeholder="Email">  
  </div>

  <div class="field">
      <label>test</label> 
      <input type="password" class="input-small" placeholder="Password">  
  </div>

  <div class="field">
      <label>test</label>  
      <input type="checkbox">
  </div>

  <button type="submit" class="btn">Sign in</button>  
</form>

Here is the JsFiddle

Upvotes: 0

Views: 79

Answers (1)

Arbel
Arbel

Reputation: 30999

.field {
    display:inline-block;
}

Demo http://jsfiddle.net/rtPdz/2/

The reason, very short and friendly, is that divs are block level elements and by default have their display property set to block, which occupy all the width available to them in the document flow context that they are located in. To change that behavior one way is to change the default display value of block to inline-block.

block: This value causes an element to generate a block box.

inline-block: This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

Read more on the display property: http://www.w3.org/TR/CSS21/visuren.html#propdef-display

Upvotes: 2

Related Questions