Twitter Bootstrap Inline Form Example

Hi, this is another one of those quick twitter bootstrap tutorials which shows you how to create inline form using bootstrap css. As said many times, using bootstrap simplifies the task of building websites, especially web forms. Web Forms or otherwise called as HTML Forms are the inherent part of web development and a simple modern day website should include a contact form at the least. But to style those forms with css is a tedious task and using twitter bootstrap framework greatly simplifies it.

Twitter Bootstrap Inline Form Layout

HTML Forms can be laid out in different ways but at times you may have to make it packed in little available space, like having a login form in top navigation menu. This type of layout is called as 'inline form layout' and there is a separate class named '.form-inline' is available in bootstrap css.

Using this css class along with the html <form> tag will automatically align the form elements side-by-side to create a compact looking form.

Example for Inline Form in Bootstrap

Let's take login form as example and see how to create a simple inline form in bootstrap. This inline login form should contain two input fields for 'username' and 'password' and one submit button.

Below is the html markup for creating this inline form.

<div class="col-md-6 well">
    <form id="loginform" class="form-inline" role="form">
        <div class="form-group">
            <label for="email" class="sr-only">Email</label>
            <input type="email" id="email" placeholder="Email" class="form-control" />
        </div>
        <div class="form-group">
            <label for="password" class="sr-only">Password</label>
            <input type="password" id="password" placeholder="Password" class="form-control" />
        </div>
        <button type="submit" class="btn btn-success">Login</button>
    </form>
</div>

The above html code will get you a compact looking inline login form like this,

Inline Login Form in Bootstrap

As you can see all the three form elements are aligned side by side. Generally it is recommended to label all the form elements, but in case of inline form layout we can hide the label using '.sr-only' class. Instead we can use the HTML5 placeholder attribute to let the user to key-in proper input.

How to Add Inline Login Form to Twitter Bootstrap Navigation Menu

Well! If you want to place this same login form in the top navigation menu, add the form inside <nav> element and use the '.navbar-form' class.

Here is the html markup for doing it.

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topnavbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">PlayZone</a>
        </div>
        <div class="collapse navbar-collapse" id="topnavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Just Born</a></li>
                <li><a href="#">Toddlers</a></li>
                <li><a href="#">Below 12</a></li>
            </ul>
            
            <!-- login form -->
            <form class="navbar-form navbar-right form-inline" id="loginform" role="form">
                <div class="form-group">
                    <label for="email" class="sr-only">Email</label>
                    <input type="email" id="email" placeholder="Email" class="form-control" />
                </div>
                <div class="form-group">
                    <label for="password" class="sr-only">Password</label>
                    <input type="password" id="password" placeholder="Password" class="form-control" />
                </div>
                <button type="submit" class="btn btn-success">Login</button>
            </form>
        </div>
    </div>
</nav>

The above markup will get you a navigation menu with inline login form like this,

Inline Login Form in Bootstrap Navigation Menu

And that was all about creating inline forms in twitter bootstrap.

Also Read: How to Add Dropdown Menu and Search Form to Twitter Bootstrap Navigation Menu

Don't Miss: How to Create a Working Contact Form in Twitter Bootstrap using PHP

Learn more about bootstrap css in our twitter bootstrap tutorials section.