How to Use Special Bootstrap Typography in Joomla 4

Your new Joomla 4 site (whether you are on Joomla VPS hosting or a different plan) comes with the Bootstrap CSS framework built in. This means you can introduce responsive style elements easily into your content. In this article, you will see several helpful Bootstrap typography elements that you can only access by providing a bit of HTML input into your content.

• TinyMCE VS CodeMirror Editor
• Creating a Lead Sentence
• Blockquote With Attribution
• Description Lists

Integrating Bootstrap Typography

Many of the typographical elements you will use often, like italics and bold character marking, will be available with a click in the TinyMCE editor. However, there are special elements in Bootstrap that are not available as a button in the editor. Those special typographical elements you can only use by editing HTML will be featured in this article.

TinyMCE VS CodeMirror Editor

If you use the TinyMCE editor, you will need to “toggle” the main editor off in order to customize the HTML output properly.

If you want to a plain HTML text editor (instead of the default TinyMCE editor) check out the full guide on how to enable the CodeMirror editor.

Creating a Lead Sentence

There are occasions in which you may want to emphasize the first paragraph of your article or create a “lead” sentence. The “lead” class in Bootstrap allows you to easily identify a lead sentence and point it out to your reader:

<p class="lead">
      Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

<p>
  Regular paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>

Blockquote With Attribution

A blockquote provides you with an easy way to isolate a segment of text meant to be attributed to someone else. You can also use blockquotes as a form for repeating a part of your text that you want to reinforce to the reader with additional emphasis. A basic blockquote is available in the TinyMCE editor. However, in order to add a nice line for attribution, you will want to add a line break (with a <br> tag) and a blockquote footer via Bootstrap:

<blockquote class="blockquote">
  <p class="mb-0">Give me the liberty to know, to utter, and to argue freely according to conscience, above all liberties.</p>
<br>
  <footer class="blockquote-footer">John Milton <cite title="Source Title">Areopagitica</cite></footer>
</blockquote>

Alternatively, you can align your blockquote from the center:

<blockquote class="blockquote text-center">
  <p class="mb-0">Give me the liberty to know, to utter, and to argue freely according to conscience, above all liberties.</p>
<br>
  <footer class="blockquote-footer">John Milton <cite title="Source Title">Areopagitica</cite></footer>
</blockquote>

Description Lists

Description lists allows to lay out terms and associated descriptions with a grid. This is yet another way to represent relationships between different terms in a form that is easier for most readers to comprehend:

<dl class="row">
  <dt class="col-sm-3">Bootstrap</dt>
  <dd class="col-sm-9">A CSS framework you can use in Joomla.</dd>

  <dt class="col-sm-3">Using paragraphs as definitons</dt>
  <dd class="col-sm-9">
    <p>First paragraph, describing the element.</p>
    <p>Second paragraph, provides additional information.  It's optional.</p>
  </dd>

  <dt class="col-sm-3">Nest more terms</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested term</dt>
      <dd class="col-sm-8">Nested definition.</dd>
    </dl>
  </dd>
</dl>