Bootstrap4 Colors Bootstrap4 Grid System

Bootstrap4 Text layout

Bootstrap 4 Default settings

Bootstrap 4 default font-size is 16px, line-height is 1.5.

default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif.

In addition, all <p> elements margin-top: 0, margin-bottom: 1rem (16px).

<h1> - <h6>

Bootstrap defines all HTML headings (h1 to h6The style. Please see the following example:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>h1　Bootstrap headings (2.5rem =　40px)</h1>
　　<h2>h2　Bootstrap headings (2rem =　32px)</h2>
　　<h2>h2　Bootstrap headings (1.75rem =　28px)</h2>
　　<h4>h4　Bootstrap headings (1.5rem =　24px)</h4>
　　<h5>h5　Bootstrap headings (1.25rem =　20px)</h5>
　　<h6>h6　Bootstrap headings (1rem =　16px)</h6>
</div>
</body>
</html>

Test it out ‹/›

Display heading classes

Bootstrap also provides four Display classes to control heading styles: .display-1, .display-2, .display-3, .display-4.

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Display headings</h1>
　　<p>Display headings can output larger, 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>
</body>
</html>

Test it out ‹/›

<small>

In Bootstrap 4 In HTML, the <small> element is used to create smaller, lighter colored text:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Smaller text title</h1>
　　<p>The small element is used for smaller, lighter colored text:</p>　　　　　　　
　　<h1>h1　Title <small>Subtitle</small>/<small></h1>
　　<h2>h2　Title <small>Subtitle</small>/<small></h2>
　　<h2>h2　Title <small>Subtitle</small>/<small></h2>
　　<h4>h4　Title <small>Subtitle</small>/<small></h4>
　　<h5>h5　Title <small>Subtitle</small>/<small></h5>
　　<h6>h6　Title <small>Subtitle</small>/<small></h6>
</div>
</body>
</html>

Test it out ‹/›

<mark>

Bootstrap 4 Define <mark> as yellow background with some padding:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Highlight text</h1>　　　　
　　<p>Use the mark element to <mark>highlight</mark> text:/<mark>Text.</mark>/p>
</div>
</body>
</html>

Test it out ‹/›

<abbr>

Bootstrap 4 The style of the HTML <abbr> element is defined to display a dashed border at the bottom of the text:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Abbreviations</h1>
　　<p>The abbr element is used to mark abbreviations or acronyms:</p>
　　<p><abbr title="World Health Organization">WHO</abbr>/<abbr>Founded1948year./p>
</div>
</body>
</html>

Test it out ‹/›

<blockquote>

You can add the .blockquote class to the <blockquote> for quoted content:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Blockquotes</h1>
　　<p>The blockquote element is used to present content from other sources:</p>
　　<blockquote class="blockquote">
　　　　<p>5For 0 years, the World Wide Fund for Nature has been protecting the future of nature. The World Wide Fund for Nature (WWF) is a leading global conservation organization in100 countries/regions,
　　　　has been working in the United States120 million members and nearly global500 million members' support.</p>
　　　　<footer class="blockquote-footer">From WWF's website</footer>
　　</blockquote>
</div>
</body>
</html>

Test it out ‹/›

<dl>

Bootstrap 4 The style of the HTML <dl> element is defined as follows:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1Description list</h1>　　　　
　　<p>The dl element represents a description list:</p>
　　<dl>
　　　　<dt>Coffee</dt>
　　　　<dd>-　Hot drink</dd>
　　　　<dt>Milk</dt>
　　　　<dd>-　Cold drink</dd>
　　</dl>　　　　　
</div>
</body>
</html>

Test it out ‹/›

<code>

Bootstrap 4 The style of the HTML <code> element is defined as follows:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Code snippet</h1>
　　<p>Some code elements can be placed inside the <code> element:</p>
　　<p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code>Used to define part of the document content.</p>
</div>
</body>
</html>

Test it out ‹/›

kbd>

Bootstrap 4 Define the style of the HTML <kbd> element as follows:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Keyboard input</h1>
　　<p>To indicate input that is typically entered through the keyboard, use the kbd element:</p>
　　<p>Use <kbd>ctrl　+　p</kbd>Open the "Print" dialog./p>
</div>
</body>
</html>

Test it out ‹/›

<pre>

Bootstrap 4 Define the style of the HTML <pre> element as follows:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Multi-line code</h1>
<p>For multi-line code, use the pre element:</p>
<pre>
Text within the preceding element
Display at a fixed width
font, while preserving
Space and
Line breaks.
</pre>
</div>
</body>
</html>

Test it out ‹/›

More formatting classes

The following table provides Bootstrap4 More examples of formatting classes:

Class name	Description	Example
.font-weight-bold	Bold text	Try It
.font-weight-normal	Normal text	Try It
.font-weight-light	Thinner text	Try It
.font-italic	Italic text	Try It
.lead	Make the paragraph stand out	Try It
.small	Specify smaller text (for the parent element's 85% )	Try It
.text-left	left-aligned	Try It
.text-center	Center	Try It
.text-right	Right alignment	Try It
.text-justify	Set text alignment, automatically wrap the text that exceeds the screen width in paragraphs	Try It
.text-nowrap	Do not wrap the text that exceeds the screen width in paragraphs	Try It
.text-lowercase	Set text to lowercase	Try It
.text-uppercase	Set text to uppercase	Try It
.text-capitalize	Capitalize the first letter of the word	Try It
.initialism	Display text within the <abbr> element in small font, and can convert lowercase letters to uppercase	Try It
.list-unstyled	Remove the default list style, align the list items to the left in the list items (in <ul> and <ol>). This class only applies to direct child list items 　　(If you need to remove nested list items, you need to use this style in the nested list)	Try It
.list-inline	Place all list items on the same line	Try It
.pre-scrollable	Make the <pre> element scrollable, with the maximum height of the code block area set to340px, once the height exceeds this, a scrollbar will appear on the Y-axis	Try It

Bootstrap4 Colors Bootstrap4 Grid System

Bootstrap4 Basic Tutorial

Bootstrap4 Text layout

Bootstrap 4 Default settings

<h1> - <h6>

Display heading classes

<small>

<mark>

<abbr>

<blockquote>

<dl>

<code>

kbd>

<pre>

More formatting classes