---

Search posts under Bootstrap:

---

Inline form in Bootstrap

How to create inline forms using Bootstrap?

Inline-form

Bootstrap creates form in a line using form-inline property in the form element

 <h2>Inline forms</h2>
    <form class="form-inline">
        <div class="form-group">
            <label for="username">Username:</label>
            <input type="email" class="form-control" id="username" placeholder="username">
        </div>
        <div class="form-group">
            <label for="pwd">Password:</label>
            <input type="password" class="form-control" id="pwd" placeholder="Password">
        </div>
        <div class="checkbox">
            <label><input type="checkbox">Remember</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>

• In the above code snippet we created form-inline, we have class attribute value  as form-inline in  form element
• In the next line we have class attribute value as form-group in the div  to create input type with email and class attribute value as form-control with label as username, id=username and placeholder="username"
• In the next line we have class attribute value as form-group in the div to create input type with password and class attribute value as form-control with label as password , id=pwd and placeholder= "password"
• In the next line we have class attribute value as checkbox in the div to create input type with checkbox  with label as Remember
• In the last step we created  submit button with value as submit and class attribute  value as  btn btn-primary which creates the submit button in primary color

output