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.
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.
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.
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.
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.