Lesson 3 - Bootstrap - Typography

HTML and CSS Bootstrap 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:

Heading classes in Bootstrap
headings_clas­ses.html

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

Heading classes in Bootstrap
headings_displa­y.html

Emphasizing paragraphs

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

Emphasizing paragraphs in Bootstrap
paragraphs_le­ad.html

Subheadings

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

Subheadings in Bootstrap
subheading.html

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.

Abbreviations in Bootstrap
abbreviations.html

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.

Quotes in Bootstrap
quotes.html

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.

Lists without bullets
Lists without bullets.html

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.

Inline lists in Bootstrap
inline_lists.html

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.

Block code in Bootstrap
block_code.html

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.

Input and output
input_output.html

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.


 

 

Article has been written for you by David Capka
Avatar
Do you like this article?
1 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn College The author learned IT at the Unicorn College - a prestigious college providing education on IT and economics.
Thumbnail
Previous article
Bootstrap - Reboot
Thumbnail
All articles in this section
Bootstrap
Thumbnail
Next article
Bootstrap - Images
Activities (3)

 

 

Comments

To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

No one has commented yet - be the first!