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
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.
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.
Although headings are already styled, it's sometimes useful to use a heading style for an element which isn't a heading.
Bootstrap provides the classes from
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
Similarly, we can emphasize paragraphs optically as well, using the
A smaller gray heading can be displayed next to another heading using the
<small> element with the
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.
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
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
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.
Similar situation occurs when we need to render the list items next to each
other, not below. We can do that by assigning the
class to the list element and
.list-inline-item to the
Predefined styles are available even for the code or input/output tags.
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
<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
<pre>s for inline codes,
elements for variables,
<kbd> for keyboard inputs, and
<samp> for sample outputs.
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".
For text alignment, we can use some of these classes:
.text-left- Aligns left
.text-right- Aligns right
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
and, of course, we can use them on images and other inline elements as well if
they're in some container.
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:
We can prevent text from wrapping using the
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
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
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.
No one has commented yet - be the first!