Bootstrap has some very usefully styled typography and a range of additional versatile typography classes that can come in handy when creating an easy to read web page.
Starting code for this tutorial
In this tutorial we’ll be starting with a simple container, row and column inside of the simple page template that we created in tutorial 3.
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8 bg-danger">
<!-- your code here -->
</div>
</div>
</div>
Some basic typography
Headings, leading text and the small tag
All headings from
<h1> to <h6> are available in Bootstrap. Of course you know exactly what heading tags do, so I won’t bore you with the details, but it is worth mentioning that we can place a <small> tag around text in our heading to create some secondary text. The same can be done with paragraphs to create fine print.
<h1>This is a header<small>Secondary text</small></h1>
<p><small>Terms and conditions or fine print</small></p>
Since we have the power to make paragraph text smaller, we can also make it bigger to create a leading paragraph. This is useful for the first paragraph on a page.
<p class="lead"> This is a leading paragraph </p>
<p> This is a normal paragraph </p>
You can read more about Bootstrap’s default heading styling here.
Highlighted text, striked through text and deleted text
You might want to highlight text to make it stand out. Bootstrap’s default styling for the
<mark> tag does exactly that. The next to tags are a little tricky, because although they look the same visually, they have semantically different meanings.- The
<del>tag means that text is removed or deleted from the document - The
<s>tag means that the text within is no longer accurate or relevant
You can <mark>highlight</mark> text using the <mark>mark</mark> tag.
<del>Deleted text</del>
<s>Striked through text</s>
Aligning text
Bootstrap includes some alignment classes that let you easily align text to the left, right, center or even justify it.
<p class="text-left">Left aligned text.</p>
<p class="text-left">Centered text.</p>
<p class="text-left">Right aligned text.</p>
<p class="text-left">Justified aligned text.</p>
Transforming text
You can quickly transform upper case and lowercase text using Bootstraps
.text-uppercase or .text-lowercase classes.
<p class="text-uppercase">this is uppercase</p>
<p class="text-lowercase">THIS IS LOWERCASE</p>
Blockquotes and reverse blockquotes
In html you can quote someone with a blockquote, but sometimes you might want to reverse that blockquote to display on the right hand side. Bootstrap takes care of this with a useful class.
<blockquote>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
<footer>Someone famous</footer>
</blockquote>
<blockquote class="blockquote-reverse">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
<footer>Someone famous</footer>
</blockquote>
0 comments