Bootstrap5 text typesetting
Bootstrap 5 default settin
Bootstrap 5 default font-size for 16px line-height 1.5.
Default font-family For “Helvetica Neue”, Helvetica, Arial, sans-serif.
In addition, all <p> element margin-top: 0 、 margin-bottom: 1rem (16px).
< H1 >-< h6 >
The style of all HTML headings (H1 to H6) is defined in Bootstrap. Take a look at the following example:
Example
<div class="container">
<h1>h1 Bootstrap title</h1>
<h2>h2 Bootstrap title</h2>
<h3>h3 Bootstrap title</h3>
<h4>h4 Bootstrap title</h4>
<h5>h5 Bootstrap title</h5>
<h6>h6 Bootstrap title</h6>
</div>
You can also use it. .h1 to .h6 class to style the element:
Example
<div class="container">
<p class="h1">h1 Bootstrap title</p>
<p class="h2">h2 Bootstrap title</p>
<p class="h3">h3 Bootstrap title</p>
<p class="h4">h4 Bootstrap title</p>
<p class="h5">h5 Bootstrap title</p>
<p class="h6">h6 Bootstrap title</p>
</div>
Display title class
Bootstrap also provides four Display classes to control the style of titles: .display-1 , .display-2 , .display-3 , .display-4 .
Example
<div class="container">
<h1>Display title</h1>
<p>Display Titles can output larger and bolder font styles.</p>
<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>
< small >
HTML in Bootstrap 5 <small> element is used to create smaller, lighter text:
Example
<div class="container">
<h1>Smaller Text Title</h1>
<p>small Elements are used for smaller font sizes and lighter color text:</p>
<h1>h1 Title <small>subtitle</small></h1>
<h2>h2 Title <small>subtitle</small></h2>
<h3>h3 Title <small>subtitle</small></h3>
<h4>h4 Title <small>subtitle</small></h4>
<h5>h5 Title <small>subtitle</small></h5>
<h6>h6 Title <small>subtitle</small></h6>
</div>
< mark >
Bootstrap 5 definition <mark> labels and .mark class has a yellow background and has a certain inner margin:
Example
<div class="container">
<h1>Highlight Text</h1>
<p>Use the mark element to <mark>Highlight</mark>Text.</p>
</div>
< abbr >
Bootstrap 5 defines HTML <abbr> the style of the element is a dashed border displayed at the bottom of the text:
Example
<div class="container">
<h1>Abbreviations</h1>
<p>The abbr element is used to mark up an abbreviation or acronym:</p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>
< blockquote >
For referenced content, you can use the <blockquote> add on .blockquote class:
Example
<div class="container">
<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from another source:</p>
<blockquote class="blockquote">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<footer class="blockquote-footer">From WWF's website</footer>
</blockquote>
</div>
< dl >
Bootstrap 5 defines HTML <dl> the style of the element is as follows:
Example
<div class="container">
<h1>Description Lists</h1>
<p>The dl element indicates a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
< code >
Bootstrap 5 defines HTML <code> the style of the element is as follows:
Example
<div class="container">
<h1>code snippet</h1>
<p>You can put some code elements inside the code elements:</p>
<p>The following HTML elements: <code>span</code>, <code>section</code>, 和 <code>div</code>Used to define partial document content.</p>
</div>
< kbd >
Bootstrap 5 defines HTML <kbd> the style of the element is as follows:
Example
<div class="container">
<h1>Keyboard Inputs</h1>
<p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>
< pre >
Bootstrap 5 defines HTML <pre> the style of the element is as follows:
Example
<div class="container">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
</div>
More typesetting classes
The following table provides examples of more Bootstrap5 typesetting classes:
Class name |
Description |
|---|---|
|
Make the paragraph more prominent |
|
Specify smaller text (85% of the parent element) |
|
Align left |
|
In the middle |
|
Align right |
|
Set the text alignment, and automatically wrap the text beyond the screen inthe paragraph |
|
The part beyond the screen in the paragraph does not wrap. |
|
Set lowercase text |
|
Set text capitalization |
|
Set the first letter of a word in uppercase |
|
The text displayed in the < abbr > element is displayed in a small font and can be converted from lowercase to uppercase. |
|
Remove the default list style and align the list items to the left (in < ul > and < ol >). This class applies only to direct sublist items (if you need to remove nested list items, you need to use this style in nested lists) |
|
Place all list items in the same row |