Typography Modifications

go.raybo.org/49sw

Speaker Notes:

There's some typography styles that are more related to the way fonts and text look on your layouts. Let's take a look at those.

Text Wrapping/Breaking

  • text-{TYP}
    • TYP: wrap nowrap break

Try it

There are different ways to control how text wraps controlling wether spaces wrap or not and also if very long words should break.

Text Transform

  • text-{TYP}
    • TYP: lowercase uppercase capitalize

Try it

Just like in CSS, you can capitalize text using these different classes. It's always better to use these instead of manually capitalizing things since they're more flexible. The interesting one and probably less useful is text-capitalize, which only changes the letter of each word.

Vertical Alignment

  • align-{TYP}
    • baseline top middle bottom text-top text-bottom

Try it

This is one of the lesser useful set of classes, but it sometimes helps you align items to elements within the same line.

Misc

  • RTL 

<html lang="ar" dir="rtl">

font-monospace text-reset

Try it

There are some other text related classes that are important, but not very complicated, so let's talk about them.

First, is RTL or Right To Left. This new version of bootstrap supports languages that are written from right to left like arabic.

All you need to do is specify the language and the direction in your HTML tag.

There's a couple of other small tags, text-monospace changes the font to mono-spaced type

Text reset is prety interesting. It lets you