Bootstrap has a lot of utilities for controlling the styling and display of text content on web applications.
You can control the
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:
1 2 3 4 5 6 | <p class="text-left">Left aligned text on all screen sizes.</p> <p class="text-center">Center aligned text on all screen sizes.</p> <p class="text-right">Right aligned text on all Screen sizes.</p> <p class="text-justify">Justified text content The width of all the lines will be same. The text-justify classis being used for it.</p> |
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.
1 2 3 4 | <p class="text-sm-left">Left aligned text on SM (small) screen or wider.</p> <p class="text-md-left">Left aligned text on MD (medium) screen or wider.</p> <p class="text-lg-left">Left aligned text on viewports sized LG (large) screen or wider.</p> <p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) screen or wider.</p> |
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-
class. For example:
1 | <div class="text-nowrap" style="width: 8rem;"> This text will not stay wrapped inside the parent. </div> |
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.
1 2 3 4 5 | <div class="row"> <div class="col-2 text-truncate"> Praeterea iter est quasdam res quas ex communi. </div> </div> |
Here’s the code for inline:
1 | <span class="d-inline-block text-truncate" style="max-width: 150px;"> Hello How are you. </span> |
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
1 2 3 | <p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">CapiTaliZed text.</p> |
Bootstrap Font weight and italics
So far we studied how Bootstrap helps us control the alignment, size, flow
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 .font-italic
class.
Have a look:
1 2 3 4 | <p class="font-weight-bold">Bold text.</p> <p class="font-weight-normal">Normal weight text.</p> <p class="font-weight-light">Light weight text.</p> <p class="font-italic">Italic text.</p> |