Bootstrap Block Help Text Examples

While creating any application, the developers always try to make it user-friendly. More specifically, user-friendly websites have many factors, including effective navigation, device compatibility, error handling, etc. For instance, adding help text with various components is one such feature that helps the user in the process of adding text in the input fields.

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:

• Block elements
• Inline element

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.