Introduction to Bootstrap Form Layout
HTML and CSS are the basic languages for website form design. All basic templates made by HTML, but we have to design and create unique then needed separately CSS file. This method is complicated because of class and id references. To overcome all problems in HTML and CSS files comes bootstrap. Bootstrap is an advanced technique for web design. For validation and required format of form, bootstrap has own class for Textarea, input, and other controls like form-control, input-group, etc. Using the bootstrap layout we can decide the format of form. We can easily make vertical, horizontal and inline form formats using bootstrap.
Types of Bootstrap Form Layout
Bootstrap form layout makes a different type of form. it makes design and validation without CSS and JavaScript files. Because of form layout, reduce more coding and complications. Bootstrap has own class to overcome all complex CSS and JavaScript code.
Bootstrap has three types of form layout.
- Vertical form
- Horizontal form
- Inline form
Let us see these three types in detail:
1. Vertical Form
In vertical form layout, label and textual elements are vertically and every form-group is vertical. The vertical form is default form in bootstrap. There is no additional rule for vertical form format.
2. Horizontal Form
In horizontal form layout, label and textual elements are horizontally but every form-group is vertical. Add two main classes for horizontal form.
Add the class in the form element.
<form class=”form-horizontal”>
Add the class in the label elements.
<label class=”control-label”>
3. Inline Form
In inline form, label and elements are inline and left-aligned. Viewport at least have 768px wide. Add a class for inline form.
Add the class to the form elements.
<form class=”form-inline”>
Bootstrap form layout has some default class for form convention mentioned below:
4.5 (4,793 ratings)
View Course
- .form-group: This class used for form spacing and bind the label. It is flexible for bind the <input>, <label>, form validation messages and more for form.
- .form-control: This class used for all textual element and space for form <input>, <textarea>, etc. It is used for all styles like size, focus.
- .form-control-lg and .form-control-sm are used for input element size large and small respectively.
Supported Element and Class
Some supported elements and classes for Bootstrap form validation without JavaScript. It makes easy and overcomes much server-side validation coding.
1) .form-control-file: This class is used to add a file like pdf, Docx, etc. instead of using class form-control, in file data this class is using in <input>.
Example:
<input type=”file” class=”form-control-file”>
2) Readonly: This is a Boolean attribute used for input elements. In this attribute, the user can not modify the value and disable the cursor to write.
Example:
<input type=”text” class=”form-control” placeholder=”read here only not write” readonly>
3) .form-control-plaintext: this class work as like as read-only but comes with correct margin and padding.
Example:
<input type=”text” readonly class=”form-control-plaintext” value=”read here only not write”>
Example of Bootstrap Form Layout
The given examples are given below:
1. Example of Vertical form(Default Form)
<form>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id=”name" placeholder=”Enter name”>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder=”Enter email”>
</div>
<button type=”submit”
Class=”btn btn-default”>Login
</ button >
</form>
OUTPUT:
Name:
Enter name
Enter email
lOGIN
- The vertical form is simple and default form in bootstrap.
- The above example has two input fields and a login button vertically with the label.
- Using only class form-group and class form-control, the vertical form created.
- You can modify the size of input elements without size adjustment of the CSS file. The user only needs a class which is .form-control-lg and .form-control-sm for large and small size respectively.
2. Example of Horizontal form
<form
class=”form-horizontal”>
<div class="form-group">
<label class=”control-label col-sm-2” for="name">Name:</label>
<div class=”col-sm-10”>
<input type="text" class="form-control" id=”name" placeholder=”Enter name”> </div>
</div>
<div class="form-group">
<label class=”control-label col-sm-2” for="email">Email:</label>
<div class=”col-sm-10” >
<input type="email" class="form-control" id=”email" placeholder=”Enter email”> </div>
</div>
<div class="form-group">
<div class=”col-sm-offset-2 col-sm-10”>
<button type=”submit”
Class=”btn btn-default”>Login
</ button >
</div>
</div>
</form>
OUTPUT:
Enter name
Name:
Enter email
Email:
- Using class form-horizontal, the user makes a horizontal form. Label and input element is inline but class form-group is vertical. Class “control-label col-sm-2” and =”col-sm-10” used for divided column. Two-column assign For label and Ten columns assign for input elements.
- Class ”col-sm-offset-2 col-sm-10” used for Login button. Offset used for space, col-sm-offset-2 used two-column spaces from left in a form.
- See horizontal form example and its output to understand layout. Its seen name and input text are in one line then email and elements are in another line.
- On large and medium screen form looks horizontal layout but on small screen (767px and below) form seems vertical form.
- The horizontal form is complicated using traditional method but the bootstrap layout helps to make easy using class and label control.
3. Example of Inline form
<form
class=”form-inline”>
<div class="form-group">
<label class=”sr-only” for="name">Name:</label>
<input type="text" class="form-control" id=”name" placeholder=”Enter name”>
</div>
<div class="form-group">
<label class=”sr-only” for="email">Email:</label>
<input type="email" class="form-control" id="email"
placeholder=”Enter email”>
</div>
<button type=”submit”
Class=”btn btn-default”>Login
</ button >
</form>
OUTPUT:
Enter email
Enter name
- In inline form, all labels and elements are in one row. All form-groups are in a single row. Class form-inline is the default for this layout. The user placed this class in <form>. The inline form used more for radio buttons, checks buttons, and so on.
- This form mostly works on at least 576px viewport after that it shows like default form. In label, class sr-only used. This class is a screen reader, used to hide the label and shows the only element.
- If the input element in the inline form then the user must come with a placeholder in an input element to recognize the element.
Conclusion – Bootstrap From Layout
To understand Bootstrap technology, the user needs to know about HTML, CSS, and JavaScript. The bootstrap form is the easiest way to work standard format form. It has own classes to remove coding and not required CSS and JavaScript different file. Using Bootstrap form, the user gets speed to coding and Avoiding block coding design and style. Bootstrap is a framework for front end web design which is lightweight and self-implemented.
Recommended Articles
This is a guide to Bootstrap Form Layout. Here we discuss the introduction to Bootstrap Form Layout along with the types and examples. You can also go through our other suggested articles to learn more–
