Text

    Easily realign text to components with text alignment classes.

    For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

    Text - 图2

    2. <p class="text-center">Center aligned text on all viewport sizes.</p>
    3. <p class="text-right">Right aligned text on all viewport sizes.</p>
    4. <p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
    5. <p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
    6. <p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
    7. <p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

    Text wrapping and overflow

    Wrap text with a .text-wrap class.

    1. <div class="badge badge-primary text-wrap" style="width: 6rem;">
    2.   This text should wrap.
    3. </div>

    Text - 图4

    For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.

    1. <!-- Block level -->
    2. <div class="row">
    3.   <div class="col-2 text-truncate">
    4.   </div>
    5. </div>
    7. <!-- Inline level -->
    9.   Praeterea iter est quasdam res quas ex communi.
    10. </span>

    Transform text in components with text capitalization classes.

    Text - 图6

    1. <p class="text-lowercase">Lowercased text.</p>
    2. <p class="text-uppercase">Uppercased text.</p>
    3. <p class="text-capitalize">CapiTaliZed text.</p>

    Note how .text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.

    Font weight and italics

    Change a selection to our monospace font stack with .text-monospace.

    Text - 图8

    <p class="text-monospace">This is in monospace</p>

    Reset color

    Reset a text or link’s color with .text-reset, so that it inherits the color from its parent.

    <p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

    Remove a text decoration with a .text-decoration-none class.