Bootstrap - Typography
Welcome, future web developers! Today, we're diving into the wonderful world of Bootstrap typography. As your friendly neighborhood computer teacher, I'm here to guide you through this journey with plenty of examples, explanations, and maybe a dad joke or two. So, let's get started!
Bootstrap Default / Global Settings
Bootstrap comes with some default typography settings that make your text look great right out of the box. It's like having a personal stylist for your website!
Here's a basic example of how Bootstrap styles text:
<p>This is a paragraph styled by Bootstrap.</p>You might be thinking, "That looks just like regular text!" And you're right! But Bootstrap has made some subtle improvements. It's set a default font-family (usually a sans-serif font), a comfortable font-size, and a pleasing line-height. It's these little things that make Bootstrap so powerful.
Headings
Headings in Bootstrap are like the different sizes of coffee at your favorite cafe - they come in six flavors, from h1 to h6.
<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
<h5>This is a heading 5</h5>
<h6>This is a heading 6</h6>Each heading has its own size and weight, creating a clear hierarchy in your content. It's like organizing your closet - everything has its place!
Customizing Headings
But what if you want to use heading styles without actually using a heading tag? Bootstrap's got you covered with the .h1 to .h6 classes.
<p class="h1">This paragraph looks like a heading 1</p>
<span class="h3">This span looks like a heading 3</span>This is great when you want the look of a heading without the semantic meaning. It's like wearing a tuxedo t-shirt - formal, but not too formal.
Display Headings
When regular headings just won't cut it, Bootstrap offers "display" headings. These are like the supermodels of headings - big, bold, and attention-grabbing.
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>These display headings are perfect for those times when you need to make a big statement. Use them wisely, though - too many and your page might start shouting!
Lead
The .lead class is Bootstrap's way of making a paragraph stand out. It's like giving your text a megaphone.
<p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p>Use this for introductory text or important information you want to highlight.
Abbreviations
Bootstrap styles abbreviations and acronyms with a dotted underline. It's like giving your readers a secret decoder ring!
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>Hover over the abbreviation, and you'll see the full term appear.
Blockquote
Blockquotes in Bootstrap are styled to stand out from the rest of your text. They're like the cool kids of the paragraph world.
<blockquote class="blockquote">
<p>Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.</p>
</blockquote>Naming a Source
You can add a source to your blockquote using the <footer> tag with a class of blockquote-footer.
<blockquote class="blockquote">
<p>Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.</p>
<footer class="blockquote-footer">Albert Einstein</footer>
</blockquote>It's like giving credit where credit is due, but with style!
Alignment
Bootstrap allows you to align your text easily with classes. It's like teaching your text to dance - left, center, right!
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>Inline Text Elements
Bootstrap provides styles for various inline text elements. It's like a Swiss Army knife for your text!
Here's a table of commonly used inline text elements:
| Element | Description |
|---|---|
<mark> |
Highlighted text |
<del> |
Deleted text |
<s> |
Strikethrough text |
<ins> |
Inserted text |
<u> |
Underlined text |
<small> |
Smaller text |
<strong> |
Bold text |
<em> |
Italicized text |
Example:
<p>You can use these elements to <mark>highlight</mark>, <del>delete</del>, <s>strikethrough</s>, <ins>insert</ins>, <u>underline</u>, make text <small>smaller</small>, <strong>bold</strong>, or <em>italicized</em>.</p>Lists
Bootstrap styles lists to make them more visually appealing. It's like giving your lists a makeover!
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
</ol>Description List Alignment
Bootstrap allows you to align terms and descriptions in description lists. It's like organizing a dictionary, but cooler!
<dl class="row">
<dt class="col-sm-3">Coffee</dt>
<dd class="col-sm-9">Black hot drink</dd>
<dt class="col-sm-3">Milk</dt>
<dd class="col-sm-9">White cold drink</dd>
</dl>This creates a two-column layout for your description list.
Responsive Font Sizes
Bootstrap 4 introduced responsive font sizes. It's like your text does yoga - it flexes and adapts to different screen sizes!
To enable responsive font sizes, add this line to your CSS:
html {
font-size: 1rem;
}Then, use the .font-size-responsive class on your elements:
<p class="font-size-responsive">This text will adjust its size on different devices.</p>And there you have it, folks! A comprehensive guide to Bootstrap typography. Remember, typography is the voice of your content - make it sing! Happy coding, and may your websites always look fabulous!
Credits: Image by storyset