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:

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:

<span>Enter Password</span>

<input class="form-control input-field" type="password">

<div class="form-text text-muted">Your password must be 8 characters long. </div>


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:

<form class="form-inline">

<div class="form-group">

<span>Enter Your Name</span>

<input class=" form-control input-field" type="password">

<small class="text-muted">Must be filled.</small>



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.

About the author

Nadia Bano

I am an enthusiastic and forward-looking software engineer with an aim to explore the global software industry. I love to write articles on advanced-level designing, coding, and testing.