Responsive Form Bootstrap CSS Class

Learn how to design responsive form using bootstrap framework.

Responsive Bootstrap form template

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

"form-group" and "form-control" Class example
<div class="form-group">
<div>Address</div>
@Html.TextBoxFor(m => m.Address, new { @class = "form-control" })
</div>
"btn-default" or "btn btn-success" Class example
<button type="submit" class="btn btn-default">Submit</button>

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

Inline form design using Bootstrap class

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>
 
Tab Dropdown Menu
Bootstrap Tutorial
Bootstrap Examples | Join CSS Course