fat fantasma fat fantasma - 1 year ago 117
CSS Question

Bootstrap 3: How to get two form inputs on one line and other inputs on individual lines?

I trying to format my registration page with Bootstrap 3.1.1. I would like the first two inputs to be on the same line while the other inputs are one there own line. I have played around with the bootstrap classes "row", "form-inline", and "form-horizontal" to no avail.

Does anybody know how to do it?

Here is the Fiddle

.reg_name {

<form name="registration_form" id='registration_form' class="form-inline">

<div class="form-group">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
title="Enter first name"
placeholder="First name"/>

<div class="form-group">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
title="Enter last name"
placeholder="Last name"/>

<div class="form-group">
<label for="username" class="sr-only"></label>
<input id="username" class="form-control input-group-lg" type="text" autocapitalize='off' name="username"
title="Enter username"

<div class="form-group">
<label for="password" class="sr-only"></label>
<input id="password" class="form-control input-group-lg" type="password" name="password"
title="Enter password"


Answer Source

Use <div class="row"> and <div class="form-group col-xs-6">

Here a fiddle :http://jsfiddle.net/core972/SMkZV/2/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download