Lesson 3 - Bootstrap - Typography

In the previous lesson, Bootstrap - Reboot, we described how Bootstrap resets CSS styles using Reboot. We already know that it puts into practice new conventions e.g. using rem units, using bottom margins only, or setting the box-sizing property globally. In today's lesson, we're going to talk about explicit styles, the ones we can use by assigning a Bootstrap's CSS class to a given element.

Typography

Let's start with typography. We already know the default typography settings of text and elements containing text from Reboot. Bootstrap, of course, provides additional classes which alter elements behavior. Let's describe them.

Headings

Although headings are already styled, it's sometimes useful to use a heading style for an element which isn't a heading.

Heading classes

Bootstrap provides the classes from .h1 to .h6 styling a given element as the corresponding heading:

If we need text which stands out even more, we can make use of classes from .display-1 up to .display-4:

Emphasizing paragraphs

Similarly, we can emphasize paragraphs optically as well, using the .lead class:

Subheadings

A smaller gray heading can be displayed next to another heading using the <small> element with the .text-muted class:

Abbreviations

There is the .initialism class available for the <abbr> element which reduces the text size to 90%. It's probably because abbreviations are usually using CAPITAL LETTERS and therefore stands out optically in the text, which is unwanted effect. If the abbreviation is written in lower case, we won't assign the class. The abbreviation's meaning is shown when the cursor is hovered over.

Quotes

We assign the .blockquote class to <blockquote> elements. If we want to provide the quotation source as well, we can use the <footer> element in the quote with the .blockquote-footer class.

Lists

As far as lists are concerned, except for the the default style we can also modify them using several more classes.

Lists without bullets

You have surely been in a situation when you needed to hide the list bullets, e.g. of a navigation. Bootstrap provides the .list-unstyled class for that. It doesn't work recursively, so if you needed to hide the bullets of a multilevel list, you'd have to assign the class to all the nested listed.

Inline lists

Similar situation occurs when we need to render the list items next to each other, not below. We can do that by assigning the .list-inline class to the list element and .list-inline-item to the <li> elements.

Code

Predefined styles are available even for the code or input/output tags.

Block code

If we need to place a part of source code somewhere on our website, we do it in the same way we used to, i.e. in the <pre> and <code> elements, to achieve the correct semantics. Bootstrap offers us only the `.pre-scrollable class for block codes, which sets the maximum height of the <pre> element to 350px and the rest of the contents scrolls vertically. Don't forget to convert the special HTML characters to entities.

Variables, input and output

Pre-styled are also the <code> elements which are used without <pre>s for inline codes, <var> elements for variables, <kbd> for keyboard inputs, and <samp> for sample outputs.

Utility classes

Except for classes used for particular elements, there are also utility classes in Bootstrap. These are little helpers which we can use basically everywhere and which save us from writing unnecessary custom styles for trivial formatting. All styles use !important internally so they always have "the final say".

Text alignment

For text alignment, we can use some of these classes:

• .text-left - Aligns left
• .text-center - Centers
• .text-right - Aligns right
• .text-justify - Justifies

We can restrict the alignment to specific viewports only, e.g. center the text only on tablets and leave it left-aligned on mobile phones. We'll explain viewports in detail later in our Bootstrap course. We'd center text for different viewports as follows:

• .text-sm-center - The text is centered on small devices and larger
• .text-md-center - The text is centered on medium size devices and larger
• .text-lg-center - The text is centered on large devices and larger
• .text-xl-center - The text is centered on extra large devices and larger

Styles are internally implemented using the text-align property and, of course, we can use them on images and other inline elements as well if they're in some container.

Media breakpoints

When we talk about small, medium, large, and extra large devices, it should be also mentioned how are these devices defined. Bootstrap introduces so-called breakpoints which is a defined screen size in pixels from which Bootstrap treats the device as a larger one. The breakpoints are set as follows by default:

Extra small device	Small device	Medium device	Large	Extra large
up to 575px	576px - 767px	768px - 991px	992px - 1199px	1200px and more
landscape-mode phone	landscape-mode phone	tablet	laptop/desktop	desktop with a big screen

The breakpoints are between the table columns, from the left: sm, md, lg, xl.

Text wrapping

We can prevent text from wrapping using the .text-nowrap class.

Truncating text

If a long text is a problem, we can truncate it using the .text-truncate class. Internally, it uses the text-overflow CSS 3 property with the value of ellipsis. Text truncating works only on elements with the display property set to block or inline-block.

Text transformation

We can convert text to uppercase or lowercase using the following CSS classes:

• .text-lowercase - lowercase text only
• .text-uppercase - UPPERCASE TEXT ONLY
• .text-capitalize - The First Letter Of Each Word Is Capitalized

Bold text and italic

We can change the font optically using a set of several other classes. Such text wouldn't have any special meaning for browser and that's why we should rather use semantic elements instead.

• .font-weight-bold - Bold text
• .font-weight-normal - Regular text
• .font-weight-light - Thin text
• .font-italic - Italic

In this lesson, we saw some predefined styles which can save us a lot of work. We'll explore the Bootstrap's value-added more and more in further lessons. In the next one, Bootstrap - Images, we'll talk about images and everything related to them.