Welcome to the 4th day of learning Bootstrap 😌 Today we will learn about the Bootstrap 4 typography. It is important to understand and use the typography options well. They will give you the possibility to present the information on your page the best way possible. Typography is one of the most important elements of a design and done properly it will capture the user’s attention, establish information hierarchy and create harmony in the page.
The article will be divided into the following parts:
- Bootstrap 4 Typography
- Bootstrap 4 Text Utilities
- Bootstrap 4 Headers
- Inline Elements
- Code Blocks
- Further Reading
Photo credit to aliyarmikayilov for his shot.
Bootstrap 4 Typography
Bootstrap 4’s default font-size is 16px – this is defined for the
<body>tag has its
1rem. “Rem” stands for “root em”. It is an unit of measurement that is relative to the root
<html>element. That means that all elements in Bootstrap 4 have their font size defined as a percentage of the
<html>font size, which is 16px. So, if you would want an element to have 20px, you would specify 20px/16px = 1.25rem.
All headings and paragraphs have their margin-top removed. Headings have a margin-bottom of 0.5rem and paragraphs have 1rem as margin-bottom.
Bootstrap 4 Font Stack
Bootstrap 4 is using a “native font stack” to define the font-family. That means that it specifies the font family used for every device and OS.
$font-family-sans-serif: // Safari for OS X and iOS (San Francisco) -apple-system, // Chrome < 56 for OS X (San Francisco) BlinkMacSystemFont, // Windows "Segoe UI", // Android "Roboto", // Basic web fallback "Helvetica Neue", Arial, sans-serif, // Emoji fonts "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
-apple-systemtargets San Francisco in Safari on Mac OS X and iOS; it doesn’t specifically mention San Francisco because it is not obviously accessible, but is more of a “hidden font” on Mac and iOS;
BlinkMacSystemFontis the equivalent of San Francisco on Chrome;
Segoe UIis used for Windows and Windows Phone;
Robototargets Android and Chrome OS;
Helvetica Neueis for versions of the Max OS older than El Capitan;
Arial and sans-serifare the default sans-serif fallback font;
- the emoji fonts are dropped as last.
Bootstrap 4 Text Utilities
Bootstrap 4 has classes for basic utilities such a alignment, colouring, transforming and styling. You can use classes to make your text align to the right, for example, instead of adding a class to your text element and writing the
text-align: right;in your CSS file. These classes are useful as they take away duplicate code.
There are three options for text-alignment: .
text-center. Left alignment is the default one. You can also specify that the text goes end-to-end with
.text-justify. Here are examples for each one:
<p class="text-left">Trying to define yourself is like trying to bite your own teeth.</p> <p class="text-center">Always do right. This will gratify some people and astonish the rest.</p> <p class="text-right">When the cup is full, carry it level.</p> <p class="text-justify">The brain is a wonderful organ; it starts working the moment you get up in the morning, and does not stop until you get to work.</p>
The classes for colours are defined as
.text-[context]. This procedure is common for all Bootstrap 4 components. The contexts are
primary for blue,
secondary for black ,
success for green ,
danger for red,
warning for yellow,
info for light-blue. So, for colouring the text red you would use the class
.text-danger. In the next days we will see how colouring buttons is the same (
.btn-danger) or alerts (
.alert-danger) or rows in tables (
.table-danger) or others.
Here is an example to illustrate how the default colour classes look in Bootstrap 4. The classes for text colouring work for links too.
<p class="text-primary">It takes a special kind of courage to face what we all have to face. </p> <p class="text-secondary">There is never time to do it right, but always time to do it over. </p> <p class="text-success">Integrity has no need for rules.</p> <p class="text-danger">Our policy is, when in doubt, do the right thing. </p> <p class="text-warning">Life is too short to be taken seriously.</p> <p><a href="#a" class="text-info">You don't have to explain something you never said.</a></p> <p><a href="#a" class="text-muted">Wishing without work is like fishing without bait.</a></p>
There are three options for transforming text:
<p class="text-lowercase">He who minds his own business is never unemployed.</p> <p class="text-uppercase">If your happiness depends on what somebody else does, I guess you do have a problem.</p> <p class="text-capitalize">I'm so miserable without you, it's almost like you're here.</p>
Font Weight and Style
You can also use Bootstrap 4 classes if you want to change the
font-weight of your text or make it italic:
<p class="font-weight-bold">It's not easy to play the clown when you've got to run the whole circus.</p> <p class="font-weight-normal">Anything free is worth what you pay for it.</p> <p class="font-weight-light">Another megabytes the dust.</p> <p class="font-italic">Yes, but every time I try to see things your way, I get a headache. </p>
Bootstrap 4 Headers
All headings, from
<h6> are available. To get the styling for a header you can use the
<h[number]> tag or
<h1>To err is human, to purr feline.</h1> <h2>To err is human, to purr feline.</h2> <h3>To err is human, to purr feline.</h3> <h4>To err is human, to purr feline.</h4> <p class="h5">To err is human, to purr feline.</p> <p class="h6">To err is human, to purr feline.</p>
If you want to have a header with a bigger title, you can use the
.display-[size] classes. These will create a bigger and larger heading style.
<h1 class="display-1">No guts, no glory.</h1> <h1 class="display-2">No guts, no glory.</h1> <h1 class="display-3">No guts, no glory.</h1> <h1 class="display-4">No guts, no glory.</h1>
Photo credit to Eddy Gannfor his shot.
The common HTML 5 elements are taken into consideration for the Bootstrap 4 typography and have a special design:
- to highlight a part of the text, use the
- to make a part of your text smaller than its parent, use the
- to strike through the text, use the
- to underline text, use the
- to make the text bold, use the
<strong></strong>tags or the font-weight class
.font-weight-boldmentioned in utilities;
- to make the text italic, use the
<em></em>tags or the font-style class
.font-italicclass mentioned in the utilities.
Here are some example to show how each one looks:
<p>This isn't right.<mark>This isn't even wrong.</mark></p> <p><s>Patch griefs with proverbs.</s></p> <p><u>Statistics are no substitute for judgement.</u></p> <p><small>I'd never join any club that would have the likes of me as a member. </small></p> <p><strong>Almost everything in life is easier to get into than out of.</strong></p> <p><em>When all else fails, read the instructions.</em></p>
The HTML 5
<abbr></abbr> tags are used for abbreviations and acronyms. When added to a piece of text it will add an underline and will change the cursor into a question mark on hover, showing the expanded version (given with the
title attribute). Here is an example:
<p><abbr title="Keep it simple, stupid!">K.I.S.S.</abbr></p>
In order to quote a piece of text inside your file, you can use the
.blockquote class on the
<blockquote> tag. Inside the blockquote you can use multiple elements (headings, paragraphs). To add the source of the quote, there is a special class called .
blockquote-footer. If you use the
<cite> tag to specify the name of your source, it will appear as italic.
Here is an example (you can also use the utilities mentioned above).
<blockquote class="blockquote text-center text-success"> <p>It was a Roman who said it was sweet to die for one's country. The Greeks never said it was sweet to die for anything. They had no vital lies.</p> <footer class="blockquote-footer">Edith Hamilton, <cite title="The Greek Way">The Greek Way</cite></footer> </blockquote>
You can write code inline by wrapping your code in
<code></code> tags. For proper rendering, you need to escape the HTML angle brackets from the code you want to render. If you have multiple lines of code, then you need to use the
<pre></pre> tags. Here are some examples:
If you want to highlight text as an input typically entered by keyboard, you can use the
<p>Typography is easy with the <code>.h</code> classes. You can also use them with the <code><p></code> tag. </p> <p>Here is the quicksort algorithm: <pre> qsort  =  qsort (x:xs) = qsort (filter (< x) xs) ++ [x] ++ qsort (filter (>= x) xs) </pre> </p> <p>To easily get out of trouble, press <kbd>ctrl + c</kbd>.</p>
Bootstrap 4 doesn’t come with its own pack of icons. So, if you want to use icons in your project you will need to use an outside library. Here are a few free suggestions:
- Font Awesome– it’s the most popular library of icons and it comes with a free and pro version;
- Material Design Icons– this is a set of open-source icons that have been created with the material design principles in mind;
- Feather– this is a set of beatiful icons that are lighter then the previous sets;
- Icons 8– a set of flat icons;
- and also worth mentioning: ByteSize Icons, Iconic, Octicons.
Throughout our days of Bootstrap 4 we will use Font Awesome. I have been working with it for a couple of years and want to recommend it to you too. Of course, you can choose another font from the list and the process of using it is roughly the same (each library has a guide on how to use it).
Importing Font Awesome
The easiest way to use Font Awesome is to use their CDN. To get started, you need to place the following link between the
<head></head> tags of your file.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
If you are working with NPM or other package managers, please check their documentation.
Using Font Awesome
Once you have imported their library, you can start inserting icons into your project. Each icon has a class that you need to add to an
<i> element to get the desired style.
Here are some examples:
<i class="fas fa-coffee fa-xs"></i> <i class="fas fa-coffee fa-sm"></i> <i class="fas fa-coffee"></i> <i class="fas fa-coffee fa-lg"></i> <i class="fas fa-heart fa-2x text-danger"></i> yourself. Beauty comes from the inside out. The beauty of a living thing is not the <i class="fas fa-atom text-info"></i> that go into it, but the way those <i class="fas fa-atom text-info"></i> are put together.
You can see each icon has a
.fa-[object] class. To search for the class needed for a certain icons, please go here. You can modify the size of the icons with classes provided by Font Awesome. Besides
.fa-lg you can also specify the number of rems you want the icons to have with the class
.fa-[number]x. So, if you want your icon to have a font size of 2rem, you would use
.fa-2x, for 3rem
.fa-3x and so on.
In the examples above I have used the text colouring utilities to show how icons accept all text utilities. So, you can apply the text utilities explained before on icons too.
These are the basics of typography in Bootstrap 4. If you come across something and don’t know exactly how to tackle it, leave a comment below and I will try to help you. If you have more time to invest on this topic, check out the official Bootstrap documentation too:
Photo credit for featured image to Dark Cube Studio for their shot.