A simple blog article

November 6, 2021 · 4 min read

The goal of this article is to see how content, paragraph, typography, could look like in any blog article. This about a "showcase" of the blogging abilities of Bootiful. Vertical spacing, coding excerpt, quotes, and so on. How should they look like ? This article tries to bring answers.

Some paragraphs

Lorem ipsum dolor sit amet, test link adipiscing elit. This is strong. Nullam dignissim convallis est. Quisque aliquam. This is emphasized. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. To copy a file type COPY filename. Dinner’s at 5:00. Let’s make that 7. This text has been struck.

Text-level semantics

One a element sample
One abbr element and abbr element with title samples
One b element sample
One cite element sample
One code element sample
One del element sample
One dfn element and dfn element with title samples
One em element sample
One i element sample
One ins element sample
One kbd element sample
One mark element sample
One q element inside a q element sample
One s element sample
One samp element sample
One small element sample
One span element sample
One strong element sample
One sub element sample
One sup element sample
One var element sample
One u element sample


Let’s keep it simple. Italics are good to help set it off from the body text. Be sure to style the citation.

If you look at what you have in life, you'll always have more. If you look at what you don't have in life, you'll never have enough. Oprah Winfrey

And here’s a bit of trailing text.


Ordered List

  1. Ordered Item 1
  2. Ordered Item 2
  3. Special Item 3
    1. Nested Number One
    2. Nested Number Two
  4. Ordered Item 4
  5. Ordered Item 5

Unordered List

  • Ordered Item 1
  • Ordered Item 2
  • Special Item 3
    • Nested Number One
    • Nested Number Two
  • Ordered Item 4
  • Ordered Item 5

Now some code

Let's see how code could look like.

  .article {
    h1, h2, h3, h4 {
      line-height: 1.2;
      margin-bottom: $space-xs;

    ul, ol, p, blockquote {
      line-height: 1.5;
      margin-bottom: $space-md;

Highlightjs helps to style nicely code excerpts. Normally it would be displayed mostly black and white, even if there are some special HTML tags dedicated for code.


Lorem, ipsum, dolor sit amet consectetur adipisicing elit. Dolorum ut ipsa architecto cum optio voluptas laboriosam rem, quod, magnam aspernatur iste in, dolore! Cupiditate minima quam, repellendus vel fuga cum..

Lorem ipsum dolor sit amet, consectetur, adipisicing elit. Consequuntur quod tenetur repellat excepturi, sunt vel. Atque, earum ipsum, dolorum quasi provident veritatis ea cumque sunt sequ.

In this article aer mlazer mlazekr malzekjr aezrjez gamlvka zemlkrj azerfmlvakjze fmlazekjr mlezajkr.

A word about Bootiful
Bootiful is a clean, modern, open-source Bootstrap v5 template. You can view the full source on GitHub. You can like, clone, or fork the project on GitHub to help the project to be developed. Thanks !