Bootstrap Block Help Text Examples
This post will guide you about the block help text examples in Bootstrap.
What is Bootstrap Block Help Text?
The Bootstrap block help text can be created using the “.form-text” class. In the Bootstrap 3 version, the “help-block” class was used to add help text.
Types of Bootstrap Block Help Text
These enlisted types of elements can be utilized to specify the help text:
How to Add Bootstrap Block Help Text Using Block Elements?
The block-level elements, such as “<div>”, “<p>”, or more, can be utilized to add help text. For this purpose, the “form-text” class is used. This class has the “display: block” property. Moreover, it also contains the top margin property that helps the text to display at some space from other input fields.
Example
Check out the example below:
- Add the “<form>” element to create a form.
- To include a caption to the input field, add a “<span>” element.
- After that, add the “<input>” element with the “form-control” and “input-field” to create an input field.
- Then, add the “<small>” element with the classes “form-text” and “text-muted” to add a help text:
The classes used in the above code snippet are described here:
- “form-control” class contains some global styling for the input elements.
- “form-text” class adds styles to the help text.
- “text-muted” adds general styles to the help text.
Output
How to Add Bootstrap Block Help Text Using Inline Elements?
The inline elements such as “<span>” or “<small>” can be used to add help text to the web page.
Example
The example below demonstrates the use of the “<small>” inline element to specify the help text:
It can be observed that the help text has been successfully added:
This is all about the Bootstrap block help text.
Conclusion
To add help text in Bootstrap, the “form-text” class is used to add the block-level help text. The “text-muted” class is utilized to create inline help text. In Bootstrap 3, the “help-block” class is used. More specifically, the help text can be specified with the inline or block-level elements. This post has explained how to add help text in Bootstrap with the help of examples.
Source: linuxhint.com