Responsive Form Bootstrap CSS Class

Responsive form, means the form will fit in any device of different width and resolution, in bootstrap framework, there are ready-to-use css class which make it easy to create browser compatible responsive form design, learn how to design responsive form using bootstrap framework.

Here you learn how To Create a Responsive Form using Bootstrap CSS, In bootstrap there are ready set of css class, which can help creating a responsive beautiful form in just few minutes.

You need to include following files reference in your page

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="3.4.1/jquery.min.js"></script>
<script src="3.4.0/js/bootstrap.min.js"></script>

Bootstrap classes for form

• class="form-group"

  This class can be used to create a section or sub section of a form controls, for example you want to capture user personal and professional information, so you can use two section, this class helps creating standard look and feel

• class="form-control"

  This class is for each control in form, this class makes every controls look standard, also make them responsive, means it adjust the width of control according to screen width

• class="btn btn-default"

  this class can be used for any submit button in form

<div class="form-group">
<div>Address</div>
@Html.TextBoxFor(m => m.Address, new { @class = "form-control" })
</div>

<button type="submit" class="btn btn-default">Submit</button>

<button type="submit" class="btn btn-success">Submit</button>

When you want to create an inline form, means all form elements are in line

Add a class "form-inline" to the <form> tag

Here is how the html code will look like.

Note: You must use label for every input control, You can hide labels for all devices by using the "sr-only" class, but still labels will be readable to reader

<form class="form-inline">
<div class="form-group">
    <label class="sr-only" for="username">Username:</label>
    <input type="email" class="form-control" id="username" placeholder="Enter username" name="username">
</div>
<div class="form-group">
    <label class="sr-only" for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>             
<button type="submit" class="btn btn-success">Submit</button>
</form>