Typography
We stick to Bootstrap’s global settings for typography. We use Bootstrap typography and text classes when needed. We use the default fonts from Bootstrap with the default font-size of 16px
.
Example
Headings
h1 Heading 1
h2 Heading 2
h3 Heading 3
h4 Heading 4
h5 Heading 5
h6 Heading 6
Paragraph with .h1
Paragraph with .h2
Paragraph with .h3
Paragraph with .h4
Paragraph with .h5
Paragraph with .h6
h1 Heading 1 with faded text
Inline Text Elements
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text
This line of text is meant to be treated as no longer accurate
This line of text is meant to be treated as an addition to the document
This line of text will render as underlined
This line of text is meant to be treated as fine print
This line rendered as bold text
This line rendered as italicized text
Text Utilities
This is a regular paragraph
This paragraph stands out with .lead
This paragraph has a highlighted word with .mark
This paragraph has a smaller word with .small
This is in monospace
THIS IS IN LOWERCASE
this is in uppercase
this is capitalized
Bold text
Normal weight text
Light weight text
Italic text
Regular paragraph left aligned with .text-left on all viewport sizes
Regular paragraph center aligned with .text-center on all viewport sizes
Regular paragraph right aligned with .text-right on all viewport sizes
Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
%hr
%h5 Headings
%hr
%h1 h1 Heading 1
%h2 h2 Heading 2
%h3 h3 Heading 3
%h4 h4 Heading 4
%h5 h5 Heading 5
%h6 h6 Heading 6
%p.h1 Paragraph with .h1
%p.h2 Paragraph with .h2
%p.h3 Paragraph with .h3
%p.h4 Paragraph with .h4
%p.h5 Paragraph with .h5
%p.h6 Paragraph with .h6
%h1
h1 Heading 1
%small.text-muted with faded text
%hr
%h5 Inline Text Elements
%hr
%p
You can use the mark tag to
%mark highlight
text.
%p
%del This line of text is meant to be treated as deleted text
%p
%s This line of text is meant to be treated as no longer accurate
%p
%ins This line of text is meant to be treated as an addition to the document
%p
%u This line of text will render as underlined
%p
%small This line of text is meant to be treated as fine print
%p
%strong This line rendered as bold text
%p
%em This line rendered as italicized text
%hr
%h5 Text Utilities
%hr
%p This is a regular paragraph
%p.lead This paragraph stands out with .lead
%p
This paragraph has a
%span.mark highlighted
word with .mark
%p
This paragraph has a
%span.small smaller
word with .small
%p.text-monospace This is in monospace
%p.text-lowercase THIS IS IN LOWERCASE
%p.text-uppercase this is in uppercase
%p.text-capitalize this is capitalized
%p.font-weight-bold Bold text
%p.font-weight-normal Normal weight text
%p.font-weight-light Light weight text
%p.font-italic Italic text
%p.text-left Regular paragraph left aligned with .text-left on all viewport sizes
%p.text-center Regular paragraph center aligned with .text-center on all viewport sizes
%p.text-right Regular paragraph right aligned with .text-right on all viewport sizes