Bootstrap 4 – Typography

Trong bài này, mình sẽ trình bày các style Bootstrap 4 thường dùng. Để xem chính xác ví dụ, bạn sử dụng chức năng preview code để mở ra màn hình lớn.

Body Text

Bootstrap 4 mặc định font-size là 16px (font-size: 1rem;) và line-height là 1.5

Bootstrap 4 dùng font-family là “Helvetica Neue”, Helvetica, Arial, sans-serif.

Thẻ heading (H1-H6) và thẻ <p> được bỏ margin-top. Heading có margin-bottom là .5rem còn <p> là 1rem.

Headings <h1> – <h6>

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>h1 Bootstrap heading (2.5rem = 40px)</h1>
  <h2>h2 Bootstrap heading (2rem = 32px)</h2>
  <h3>h3 Bootstrap heading (1.75rem = 28px)</h3>
  <h4>h4 Bootstrap heading (1.5rem = 24px)</h4>
  <h5>h5 Bootstrap heading (1.25rem = 20px)</h5>
  <h6>h6 Bootstrap heading (1rem = 16px)</h6>
</div>

</body>
</html>

Heading Classes

Ngoài <h1> đến <h6>, Bootstrap 4 còn cung cấp các class .h1 đến .h6 để định dạng văn bản có style như thẻ Heading. Ví dụ bên dưới là dùng các class này đển dịnh dạng có văn bản trong thẻ <p>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <p class="h1">.h1 (2.5rem = 40px)</p>
  <p class="h2">.h2 (2rem = 32px)</p>
  <p class="h3">.h3 (1.75rem = 28px)</p>
  <p class="h4">.h4 (1.5rem = 24px)</p>
  <p class="h5">.h5 (1.25rem = 20px)</p>
  <p class="h6">.h6 (1rem = 16px)</p>
</div>

</body>
</html>

Sub-Headings

Bạn có thể tạo ra Sub-Heading bằng cách dùng thẻ <small> bên trong thẻ headings. Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Heading 1 <small>Sub-heading</small></h1>
  <h2>Heading 2 <small>Sub-heading</small></h2>
  <h3>Heading 3 <small>Sub-heading</small></h3>
  <h4>Heading 4 <small>Sub-heading</small></h4>
  <h5>Heading 5 <small>Sub-heading</small></h5>
  <h6>Heading 6 <small>Sub-heading</small></h6>
</div>

</body>
</html>

Display Headings

Display Heading sẽ giúp định dạng thẻ heading nổi bật hơn bình thường. Bootstrap 4 cung cấp 4 kích thước (.display-1, .display-2, .display-3, and .display-4). Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <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>
</div>

</body>
</html>

Lead Text

Bạn có thể định dạng 1 đoạn văn bản nổi bật hơn với class lead của Bootstrap 4. Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<p class="lead">This is the article lead — it stands out at the start of the article.</p>
<p>This is normal text at the normal size etc...</p>
</div>

</body>
</html>

Marked Text

Bootstrap 4 style <mark> với background màu vàng và thêm padding để đánh dấu văn bản. Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <p>Sample <mark>marked text</mark>.</p>
</div>

</body>
</html>

Viết tắt <abbr>

Trong Bootstrap 4. Từ viết tắt sẽ được hiển thị với đường chấm nhỏ bên dưới. Khi rê chuột vào, title được hiển thị ra. Title thường là từ đầy đủ mà bạn viết tắt. Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <abbr title="Professor">Prof.</abbr>
</div>

</body>
</html>

Initialism

Thêm class .initialism vào <abbr> sẽ tạo ra từ viết tắt với font-size nhỏ hơn bình thường. Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <abbr title="Structured Query Language" class="initialism">SQL</abbr> is used to query databases.
</div>

</body>
</html>

Blockquotes

Để định dạng cho thẻ <blockquote> dùng .blockquote. ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <blockquote class="blockquote">
    <p>The most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now.</p>
  </blockquote>
</div>

</body>
</html>

Blockquotes — <cite> và <footer>

Sử dụng <footer> và <cite> trong <blockquote> để tạo style cho nguồn trích dẫn. Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <blockquote class="blockquote">
    <p>Most of us are awash with beliefs of all sorts. We are steeped in the common sense and prevailing wisdom of our culture, traditions, communities, profession, family, and friends.</p>
    <footer>Tom Campbell in <cite>My Big Toe</cite></footer>
  </blockquote>
</div>

</body>
</html>

Blockquotes — canh chỉnh văn bản.

Sử dụng .text-center, .text-right nếu bạn muốn canh giữa hay phải text trong Blockquotes.

.text-center

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <blockquote class="blockquote text-center">
    <p>Most of us are awash with beliefs of all sorts. We are steeped in the common sense and prevailing wisdom of our culture, traditions, communities, profession, family, and friends.</p>
    <footer>Tom Campbell in <cite>My Big Toe</cite></footer>
  </blockquote>
</div>

</body>
</html>

.text-right

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <blockquote class="blockquote text-right">
    <p>Most of us are awash with beliefs of all sorts. We are steeped in the common sense and prevailing wisdom of our culture, traditions, communities, profession, family, and friends.</p>
    <footer>Tom Campbell in <cite>My Big Toe</cite></footer>
  </blockquote>
</div>

</body>
</html>

Lists

Bootstrap có nhiều styles khác nhau để định dạng cho list.

Lists — Unstyled

Dùng .list-unstyled để định dạng cho list với list-style: none; và padding-left: 0;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <ul class="list-unstyled">
    <li>Cats</li>
    <li>Dogs</li>
    <li>Elephants</li>
  </ul>
</div>

</body>
</html>

Lists — Inline

Bạn có thể dùng class .list-inline và .list-inline-item để tạo list với thuộc tính display: inline-block; margin và padding.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <ul class="list-inline">
    <li class="list-inline-item">Cats</li>
    <li class="list-inline-item">Dogs</li>
    <li class="list-inline-item">Elephants</li>
  </ul>
</div>

</body>
</html>

Description Lists <dl>

Bootstrap 4 render thẻ <dl> như sau:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <dl>
    <dt>Arahat</dt>
    <dd>The "Perfected One", who has overcome The Three Poisons of Desire, Hatred and Ignorance. </dd>
    <dt>Bodhi</dt>
    <dd>Awakened wisdom.</dd>
    <dt>Zen</dt>
    <dd>Meditative absorption in which all dualistic distinctions are eliminated.</dd>
  </dl>
</div>

</body>
</html>

Description Lists — Horizontal

Bạn có thể render <dd> <dt> theo cột bằng hệ thống Grid.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <dl class="row">
    <dt class="col-sm-2">Arahat</dt>
    <dd class="col-sm-10">The "Perfected One", who has overcome The Three Poisons of Desire, Hatred and Ignorance. </dd>
    <dt class="col-sm-2">Bodhi</dt>
    <dd class="col-sm-10">Awakened wisdom.</dd>
    <dt class="col-sm-2">Zen</dt>
    <dd class="col-sm-10">Meditative absorption in which all dualistic distinctions are eliminated.</dd>
  </dl>
</div>

</body>
</html>

Code

Bootstrap 4 render <code> như sau:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  The <code>accesskey</code> attribute can be used on any HTML5 element.
</div>

</body>
</html>

Keyboard Input – <kbd>

Bootstrap 4 render <kbd> như sau:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  To save the document on a Mac, press <kbd><kbd>Command</kbd>+<kbd>S</kbd></kbd>
</div>

</body>
</html>

Preformatted Text – <pre>

Bootstrap 4 render <pre> như sau:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <pre>This text has
    been formatted using
       the HTML pre tag. The browser should
          display all white space
    as it was entered.
  </pre>
</div>

</body>
</html>

Bạn cũng có thể dùng .pre-scrollable để set max-height là 350 với overflow-y: scroll;

Sample Text – <samp>

Bootstrap 4 render <samp> như sau:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  Computer says <samp>Not enough memory</samp>. I always thought I had a good memory!
</div>

</body>
</html>

Variables – <var>

Bootstrap 4 render <var> như sau:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <var>E</var> = <var>m</var> <var>c</var><sup>2</sup>
</div>

</body>
</html>

Các class Typography khác:

  • .font-weight-bold
  • .font-italic
  • .font-weight-light
  • .font-weight-normal
  • .lead
  • .small
  • .text-left
  • .text-*-left
  • .text-center
  • .text-*-center
  • .text-right
  • .text-*-right
  • .text-justify
  • .text-monospace
  • .text-nowrap
  • .text-lowercase
  • .text-uppercase
  • .text-capitalize
  • .initialism
  • .list-unstyled
  • .list-inline
  • .pre-scrollable