Robert's Resume

Typography

Code

<h1> to <h6>

.display-1 to .display-6

<small>

<mark>

<abbr>

<blockquote>

<dl>

<code>

<kbd>

<pre>

.lead

.text-start

.text-break

.text-center

.text-decoration-none

.text-end

.text-nowrap

.text-lowercase

.text-uppercase

.text-capitalize

.initialism

.list-unstyled

.list-inline

Top

Definitions

<h1-h6>|.h1|2|3|4|5|6
▪ Used to create header text.
display-1|2|3|4|5|6
▪ Used to stand out more than normal headings (larger font-size and light font-weight).
<small>|.small
▪ Used to create a smaller, secondary text in any heading.
<mark>|.mark
▪ Used to highlight text.
<abbr>
▪ Used to indicate an abbreviation with tooltip hover.
<blockquote>
▪ Used when quoting blocks of content and when naming sources.
<dl>
▪ Used to create a definition list (such as this one!).
<code>
▪ Used to style text to be understood as code.
<kbd>
▪ Respresents textual user input from a text entry device (keyboard, voice, etc.).
<pre>
▪ Represents preformatted text which is to be shown exactly as written in the HTML file.
.lead
▪ Makes a paragraph stand out.
.text-start
▪ Left-aligns text.
.text-break
▪ Prevents long text from breaking the layout.
.text-center
▪ Center-aligns text.
.text-decoration-none
▪ Removes the underline from links.
.text-end
▪ Right-aligns text.
.text-nowrap
▪ Indicates no wrap text.
.text-lowercase
▪ Makes all text lowercased.
.text-uppercase
▪ Makes all text uppercased.
text-capitalize
▪ Capitalizes text.
.initialism
▪ Displays the text inside an <abbr> element in a slightly smaller font size.
.list-unstyled
▪ Removes the default list-style and left margin on list items.
.list-inline
▪ Places all list items on a single line.
Top

Key Points

  • BS5 uses a default font size of 1rem (default 16px).
  • BS5 uses a default line height of 1.5.
  • All <p> elements have a top margin of 0 and a bottom margin of 1rem.
  • Font sizes for headings:
  • h1 = 1.375rem + 1.5vw
  • h2 = 1.325rem + 0.9vw
  • h3 = 1.300rem + 0.6vw
  • h4 = 1.275rem + 0.3vw
  • h5 = 1.250rem
  • h6 = 1.000rem
  • NOTE: h5 and h6 are not responsive.
  • Top

These are the header elements:

Bootstrap h1 Heading

Bootstrap h2 Heading

Bootstrap h3 Heading

Bootstrap h4 Heading

Bootstrap h5 Heading
Bootstrap h6 Heading

Use <h1> through <h6>.

Top

The <small> element is used to create a smaller, secondary text in any heading.

Bootstrap h1 Heading Secondary Text

Bootstrap h2 Heading Secondary Text

Bootstrap h3 Heading Secondary Text

Bootstrap h4 Heading Secondary Text

Bootstrap h5 Heading Secondary Text
Bootstrap h6 Heading Secondary Text

Use <small> inside any heading element.

Top

The <mark> element in BS5 adds a yellow background and some padding.

Here is an example of highlighted text.

Use <mark> to encase the text you want highlighted.

NOTE: The highlighting takes vertical space - consider changing the line-height or padding.

Top

The <abbr> element in BS5 adds a dotted border bottom and a question mark cursor on hover.

Here is an ex of an abbreviation.

Use <abbr> and specify a title property.

Top

A <blockquote> element example.

War never changes.

Sole Survivor, Fallout

Add .blockquote to a <blockquote>.

Add .blockquote-footer to a <footer> inside the <blockquote> to style the source.

Top

Bootstrap will style a <dl> by bolding the term.

Bootstrap
1. a loop at the back of a boot, used to pull it on.
2. computing

a technique of loading a program into a computer by means of a few initial instructions which enable the introduction of the rest of the program from an input device.

Use <dt> as normal.

NOTE: BS5 will not add any bullets or numbers to your definitions. You must do this yourself.

Top

Bootstrap will style a <code> element by making the font-color red and narrowing the text.

The following HTML elements define a section in the document: span, section and div.

Encase text in a <code> element.

Top

Bootstrap will style a <kbd> element by using a dark background with rounded corners.

Pressing Windows + D will show the desktop.

Encase text in a <kbd> element.

Top

Bootstrap will preserve formatting when using the <pre> element.

            Here is a
            sentence that has
            breaks      and spaces
            throughout it.

Encase text in a <pre> element.

NOTE: This preserved space includes any normal tabs placed in your code in the editor.

Top

You can use classes on other elements to make them behave as headings.

Bootstrap h1 Heading

Bootstrap h2 Heading

Bootstrap h3 Heading

Bootstrap h4 Heading

Bootstrap h5 Heading

Bootstrap h6 Heading

Use .h1|h2|h3|h4|h5|h6 on a <p> element.

Top

Display headings are used to stand out more than normal headings (they have a larger font and lighter font-weight).

Bootstrap Display-1 Heading

Bootstrap Display-2 Heading

Bootstrap Display-3 Heading

Bootstrap Display-4 Heading

Bootstrap Display-5 Heading

Bootstrap Display-6 Heading

Use .display-1|2|3|4|5|6 on a heading tag.

Top

To make a paragraph stand out...

This is a normal paragraph.

This paragraph uses the lead class.

This is another normal paragraph.

Use .lead on a <p> element.

Top

To display the text inside an <abbr> element in a slightly smaller font size...

Normal: The WWE was founded in 1953.

Initialism: The WWE was founded in 1953.

Use .initialism on a <abbr> element.

Top

Remove the default list-style and left margin on list items (immediate children only).

  1. Do Laundry
  2. Wash Dishes
  3. Take Out Trash
    1. Kitchen
    2. Bathroom
    3. Bedroom

Use .list-unstyled on a <ul> or <ol> element.

Top

Place all list items on a single line.

  1. Do Laundry
  2. Wash Dishes
  3. Take Out Trash

Use .list-inline on a <ul> or <ol> element and .list-inline-item an each <li> element.

Top

Left Align Text.

This text is left aligned.

Use .text-start on an element.

Top

Prevent Long Text from breaking your layout.

WITH: AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

W/O: AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

Use .text-break on an element.

Top

Center Align Text.

This text is center aligned.

Use .text-center on an element.

Top

Remove the Underline from Links.

My Portfolio

Use .text-decoration-none on an <a> element.

Top

Right Align Text.

This text is right aligned.

Use .text-end on an element.

Top

Stop text from wrapping.

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

Use .text-nowrap on an element.

Top

Make all text lowercase.

This Is PascalCase.

This Is No Longer PascalCase.

Use .text-lowercase on an element.

Top

Make all text uppercase.

This Is camelCase.

This Is No Longer camelCase.

Use .text-uppercase on an element.

Top

Capitalize the first letter of each word.

This is a normal line of text.

This is not a normal line of text.

Use .text-capitalize on an element.

Top