Bootstrap - Text

Aligning Text with Bootstrap Classes

Bootstrap has classes for aligning text within elements. The text-start class aligns the text to the left side of the container, while text-center centers the text horizontally. To align text to the right, use the text-end class. You can apply these classes to inline or block-level elements, such as paragraphs, headings, or spans.

<p class="text-start">This text is aligned to the left.</p>
<p class="text-center">This text is centered.</p>
<p class="text-end">This text is aligned to the right.</p>

Bootstrap also has responsive text alignment classes that let you change the alignment based on the screen size.

<p class="text-sm-start text-md-center text-lg-end">
  This text is aligned to the left on small screens, centered on medium screens, and aligned to the right on large screens.
</p>

By combining these text alignment classes with other Bootstrap utilities, you can create visually appealing and well-structured text content that improves the readability and overall user experience of your website or application.

Controlling Text Wrapping

Bootstrap has classes to control how text wraps in a container. The text-wrap class lets text wrap naturally, breaking onto a new line when needed. The text-nowrap class prevents text from wrapping and keeps it on a single line.

<p class="text-wrap">
  This text will wrap naturally and break onto a new line if it exceeds the available width.
</p>
<p class="text-nowrap">
  This text will not wrap and will remain on a single line, even if it exceeds the available width.
</p>

When dealing with long words that might overflow the container, you can use the text-break class. This class breaks words that are too long to fit in the container, preventing them from overflowing.

<p class="text-break">
  This paragraph contains a very long word: supercalifragilisticexpialidocious. The `text-break` class will break it to prevent overflow.
</p>

Managing Text Overflow

When you have text that might overflow its container, Bootstrap has the text-truncate class. This class truncates the text with an ellipsis (...) if it exceeds the width of the container. It's useful for showing long text snippets or titles in a limited space.

<p class="text-truncate">
  This is a long paragraph that will be truncated if it exceeds the width of its container. The truncated text will end with an ellipsis.
</p>

Another way to manage text overflow is by applying the overflow-hidden class to the container element. This class hides any overflowing text, preventing it from being visible outside the container's boundaries.

<div class="overflow-hidden">
  <p>
    This text is inside a container with the `overflow-hidden` class. Any overflowing text will be clipped and hidden from view.
  </p>
</div>

By using these text wrapping and overflow classes, you can control how text behaves in its container, improving the readability and visual consistency of your web pages.

Transforming Text

Bootstrap provides classes to transform the case of text within elements.

<p class="text-lowercase">This Text Will Be Converted To Lowercase.</p>
<p class="text-uppercase">This text will be converted to uppercase.</p>
<p class="text-capitalize">each word in this text will be capitalized.</p>

These text transformation classes are useful for creating consistent text formatting and improving readability. They can be used for headings, labels, or any other text elements that need to have a specific case style.

Applying Font Styles

Bootstrap has classes to apply common font styles to text elements.

<p>This is <span class="fw-bold">bold</span> text.</p>

<p>This is <span class="fst-italic">italicized</span> text.</p>

<p>This is <span class="font-monospace">monospace</span> text.</p>

By applying these font style classes, you can easily modify the appearance of text elements to create visual emphasis, differentiate content, or match a specific design style. Combine them with other Bootstrap classes to further customize your text styles.

Adjusting Text Size

Bootstrap has classes for setting the font size of text elements. The classes range from fs-1 to fs-6, with fs-1 being the largest and fs-6 being the smallest. These classes set consistent font sizes throughout your project.

<p class="fs-1">This text is using the fs-1 class.</p>
<p class="fs-2">This text is using the fs-2 class.</p>
<p class="fs-3">This text is using the fs-3 class.</p>
<p class="fs-4">This text is using the fs-4 class.</p>
<p class="fs-5">This text is using the fs-5 class.</p>
<p class="fs-6">This text is using the fs-6 class.</p>

If you need more control over the font size, you can use the fs-* classes to set custom font sizes. Replace the * with a value representing the font size in pixels or relative units like em or rem.

<p class="fs-7">This text is using a custom fs-7 class.</p>
<p class="fs-8">This text is using a custom fs-8 class.</p>

Controlling Text Spacing

Bootstrap provides classes for adjusting the line height and adding margins to text elements. The lh-* classes let you set the line height of text, which is the space between lines. Replace the * with a value like 1, sm, base, or lg to set different line heights.

<p class="lh-1">This text has a line height of 1.</p>
<p class="lh-sm">This text has a small line height.</p>
<p class="lh-base">This text has the base line height.</p>
<p class="lh-lg">This text has a large line height.</p>

To add margins to text elements, you can use the mb-* and mt-* classes. These classes add bottom and top margins, respectively. Replace the * with a value from 0 to 5 or auto to set different margin sizes.

<p class="mb-0">This text has no bottom margin.</p>
<p class="mb-1">This text has a small bottom margin.</p>
<p class="mb-3">This text has a medium bottom margin.</p>
<p class="mt-2">This text has a small top margin.</p>
<p class="mt-4">This text has a large top margin.</p>

By using these text sizing and spacing classes, you can control the size and spacing of your text elements, creating a readable layout. Mix and match these classes to style your text for your web pages.

Applying Text Colors

Bootstrap has text color classes that set the color of text elements. These classes include text-primary, text-secondary, text-success, text-danger, text-warning, text-info, text-light, text-dark, and text-body. Each class applies a color to the text.

<p class="text-primary">This text is blue.</p>
<p class="text-secondary">This text is gray.</p>
<p class="text-success">This text is green.</p>
<p class="text-danger">This text is red.</p>
<p class="text-warning">This text is yellow.</p>
<p class="text-info">This text is light blue.</p>
<p class="text-light bg-dark">This text is light.</p>
<p class="text-dark">This text is dark.</p>
<p class="text-body">This text is the default body color.</p>

If you need more control over text colors, you can use the text-* classes, where * is a color name or a hex value. Bootstrap has color names like text-red, text-blue, text-green, etc., but you can also use hex values.

<p class="text-red">This text is red.</p>
<p class="text-blue">This text is blue.</p>
<p class="text-green">This text is green.</p>
<p class="text-#ff0000">This text is red using a hex value.</p>
<p class="text-#00ff00">This text is green using a hex value.</p>
<p class="text-#0000ff">This text is blue using a hex value.</p>

Controlling Text Opacity

Bootstrap provides text opacity classes that control the transparency of text elements. The classes are in the format text-opacity-*, where * is a value from 10 to 100 in increments of 10. A value of 10 means 10% opacity (mostly transparent), while a value of 100 means 100% opacity (fully opaque).

<p class="text-opacity-10">This text has 10% opacity.</p>
<p class="text-opacity-25">This text has 25% opacity.</p>
<p class="text-opacity-50">This text has 50% opacity.</p>
<p class="text-opacity-75">This text has 75% opacity.</p>
<p class="text-opacity-100">This text has 100% opacity.</p>

You can combine text opacity classes with text color classes to create text with different levels of transparency and color. This is useful for creating text overlays, subtitles, or watermarks.

<p class="text-primary text-opacity-50">This text is blue with 50% opacity.</p>
<p class="text-success text-opacity-75">This text is green with 75% opacity.</p>
<p class="text-warning text-opacity-25">This text is yellow with 25% opacity.</p>