How to Use Special Bootstrap Typography in Joomla 4

Bootstrap Typography

Your new Joomla 4 site 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.

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.

Toggle the HTML editor in Joomla 4 TinyMCE editor

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>
Using a lead sentence to emphasize text with Bootstrap in Joomla 4

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>
Using a block quote with attribution.

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>
Center aligned text

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>
Using a description list with Bootstrap in Joomla 4

If you need an optimized solution for your Joomla 4 site, check out our Managed VPS Hosting.

CM
Christopher Maiorana Content Writer II

Christopher Maiorana joined the InMotion community team in 2015 and regularly dispenses tips and tricks in the Support Center, Community Q&A, and the InMotion Hosting Blog.

More Articles by Christopher

Was this article helpful? Let us know!