Bootstrap Form CSS Layouts, Responsive Form in Bootstrap, Dropdown Menu, List, Learn Bootstrap CSS Framework

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>
 
Bootstrap Tutorial
learn bootstrap
Tab Dropdown Menu
Bootstrap Tutorial

Bootstrap Examples | Join CSS Course