Bootstrap Text

Bootstrap has a lot of utilities for controlling the styling and display of text content on web applications.

You can control the tex alignment, size, color and much more. Here we will be discussing all such features.

Bootstrap Text alignment

Firstly, let’s start with the text alignment. The horizontal alignment of the text can be controlled using four Bootstrap contextual classes namely:

  • .text-left: For left aligning the text
  • .text-right: For right aligning the text
  • .text-center: For center aligning the text
  • .text-justify: For a justified alignment (all lines with same width)

Check the code below for illustration:

To control the alignment as per the screen size you can use the text-* classes.

Here, the start can be replaced with sm for small, md for medium and lg for large screen size.

The following code snippet shows the use of this classes with left alignment.

Bootstrap Text wrapping and overflow

You can also prevent the text content from wrapping within a limited width. This can be done by using the .text-nonwrap class. For example:

You can also use the .text-truncate class for longer content.

This will truncate the text with an ellipsis.

Please note that display: inline-block or display: block is required for this to work properly.

Here’s the code for inline:

Bootstrap Text transform

You can transform some text for its case. In other words, Bootstrap provides you some utility classes that help you change the case of the , .

These classes are:

  • .text-lowercase: Transforms whole text into lower case
  • .text-uppercase: Transforms whole text into upper case
  • .text-capitalize: Transform only the first letter of each word to uppercase

Bootstrap Font weight and italics

So far we studied how Bootstrap helps us control the alignment, size, flow, and case of the text.

But as far as styling is concerned, there’s one more important thing that we need to know, It is called the text weight.

The text weight basically decides whether the text is bold, normal or light. The code below will show you the uses of the classes, .font-weight-bold, .font-weight-normal, font-weight-light for the same.

Another thing that you can see is italicising the text using the .font-italic class.

Have a look: