Working with Forms in Bootstrap part-1

Goud.Kv
Posted by in Bootstrap category on for Beginner level | Points: 250 | Views : 4870 red flag
Rating: 5 out of 5  
 1 vote(s)

Bootstrap gives the predefined CSS to make us use of them to get high level of attraction in web designs.
Recommendation
Read Glyphicons in Bootstrap before this article.

Introduction

So far we have seen how to create lists with predefined icons using Bootstrap in here. Now lets see the different types of Form layouts in Bootstrap.

Objective

The main objective of this article is to learn different types of form layouts in Bootstrap by using predefined form classes of Twitter Bootstrap.

Using the code

Forms are the sectional parts of web pages. As we know that we can style the form using CSS. But it is difficult to control the styling for different sizes of screen. Twitter bootstrap comes with predefined CSS styles for different types of Form-Layots such as Horizontal, Vertical etc. 

Creating Horizontal Form using Bootstrap 

Just give form-horizontal class to your Html form tag like below. Below code is the sample example for creating horizontal form.
<form class="form-horizontal">
        <div class="form-group">
            <label for="inputFirstName" class="control-label col-xs-2">FirstName</label>
            <div class="col-xs-10">
                <input type="text" class="form-control" id="inputFirstName" placeholder="First Name">
            </div>
        </div>
        <div class="form-group">
            <label for="inputLastName" class="control-label col-xs-2">LastName</label>
            <div class="col-xs-10">
                <input type="text" class="form-control" id="inputLastName" placeholder="Last Name">
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail" class="control-label col-xs-2">Email</label>
            <div class="col-xs-10">
                <input type="email" class="form-control" id="inputEmail" placeholder="Email">
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="control-label col-xs-2">Password</label>
            <div class="col-xs-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password">
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <button type="submit" class="btn btn-primary">Sign Up</button>
            </div>
        </div>
</form>
Now Save and Run your project and you will see the following output in your browser

In the above figure if you observe, the elements are in horizontal manner.

Creating Vertical Form using Bootstrap

If you want to make the above alignment as vertical, change your Form style by changing the class of form tag.
<form>
        <div class="form-group">
            <label for="inputFirstName">FirstName</label>
            <input type="text" class="form-control" id="inputFirstName" placeholder="First Name">
        </div>
        <div class="form-group">
            <label for="inputLastName">LastName</label>
            <input type="text" class="form-control" id="inputLastName" placeholder="Last Name">
        </div>
        <div class="form-group">
            <label for="inputEmail">Email</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="form-group">
            <label for="inputPassword">Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-primary">Sign Up</button>
</form>
In the above example code snippet, we have removed the form-horizontal class as by default it will be in Vertical alignment. 
Check out the above code in your browser

Observe the figure, all elements are aligned vertically.

Creating Inline Form using Bootstrap

Now we will see the Inline Form. 
Give the form-inline class to your form tag.
<form class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="inputUserName">Username</label>
            <input type="text" class="form-control" id="inputUserName" placeholder="Username">
        </div>
        <div class="form-group">
            <label class="sr-only" for="inputPassword">Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-primary">Login</button>
        <button type="submit" class="btn btn-primary">Sign up</button>
</form>
'sr-only' is the predefined class in bootstrap.css which covers overflow, position properties. sr-only looks like below
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
Now refresh your browser and observe the output

In the above figure, all the Html elements are aligned inline.

Creating Inline Form with Glyphicons using Bootstrap

We have already seen that there are some Glyphicons in Twitter Bootstrap. Now we are going to use them in here.
See the below example Code snippet of adding icons to the elements.
<form>
        <div class="row">
            <div class="col-xs-2">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    <input type="text" class="form-control" placeholder="Username">
                </div>
            </div>
            <div class="col-xs-2">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                    <input type="password" class="form-control" placeholder="Password">
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Login</button>
            <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-cog"></span> Settings</button>
        </div>
</form>
The output of the above code will be

In the above figure, Glyphicons have made the form more beautiful and nice look and feel.

Changing Height of Inputs and Dropdowns

Below example shows different sizes of Inputs and Select Boxes in terms of height.
<form>
        <div class="row">
            <div class="col-xs-3">
                <input type="text" class="form-control input-lg" placeholder="Input Large">
            </div>
            <div class="col-xs-3">
                <select class="form-control input-lg">
                    <option>Large1</option>
                    <option>Large2</option>
                    <option>Large3</option>
                </select>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-xs-3">
                <input type="text" class="form-control" placeholder="Input Default">
            </div>
            <div class="col-xs-3">
                <select class="form-control">
                    <option>Default1</option>
                    <option>Default2</option>
                    <option>Default3</option>
                </select>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-xs-3">
                <input type="text" class="form-control input-sm" placeholder="Input Small">
            </div>
            <div class="col-xs-3">
                <select class="form-control input-sm">
                    <option>Small1</option>
                    <option>Small2</option>
                    <option>Small3</option>
                </select>
            </div>
        </div>
</form>
Run the above code in your browser and you will see different sizes of Inputs like below

input-lg, input-sm are the predefined classes for larger and smaller inputs respectively.

Changing Width of Inputs and Dropdowns

Below example shows different sizes of Inputs and Select Boxes in terms of width.
<form>
    <div class="row">
        <div class="col-xs-1">
            <textarea class="form-control"></textarea>
        </div>
        <div class="col-xs-2">
            <textarea class="form-control"></textarea>
        </div>
        <div class="col-xs-3">
            <textarea class="form-control"></textarea>
        </div>
        <div class="col-xs-4">
            <textarea class="form-control"></textarea>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-xs-1">
            <select class="form-control">
                <option>Option1</option>
                <option>Option2</option>
            </select>
        </div>
        <div class="col-xs-2">
            <select class="form-control">
                <option>Option1</option>
                <option>Option2</option>
            </select>
        </div>
        <div class="col-xs-3">
            <select class="form-control">
                <option>Option1</option>
                <option>Option2</option>
            </select>
        </div>
        <div class="col-xs-4">
            <select class="form-control">
                <option>Option1</option>
                <option>Option2</option>
            </select>
        </div>
    </div>
</form>
Now Save and Run the above example to see textareas and dropdowns with different width.

You can observe that width of elements is changed in your browser because of col-xs-1(column extra small), col-xs-2col-xs-3 and col-xs-4 classes of Bootstrap.

Conclusion

In this article we have seen different types of Form-Layouts of using Bootstrap and also seen changing height and width of Html elements. Hope you understand. we will see more Bootstrap features on forms in next chapter. If you have any doubts or confusions, please ask in the comment box below.

Thanks for reading.

Recommendation
Read Working with Forms in Bootstrap part-2 after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Posted by: Jayakumars on: 7/4/2014 | Points: 25
hi
Goud

how to add controller here and method to stored to db for edmx concept can u send me source code
my email id: kumaraspcode2009@gmail.com
Posted by: Gurumatrix2004 on: 7/18/2014 | Points: 25
This article was very useful for me..Thanks
Posted by: Goud.Kv on: 7/18/2014 | Points: 25
Thanks Gurunath,

Hope you will get more satisfaction with other Bootstrap articles also.
You can download entire Bootstrap tutorials as an e-book.

Regards,
Krishna.

Login to post response

Comment using Facebook(Author doesn't get notification)