Text/Typography

Default Settings

In Bootstrap the default font size is font-size 1rem (which equals 16px by default), with a line height of 1.5.
Additionally, all <p> tags come with a top margin of 0 and a bottom margin of 1rem (which is usually 16px)

Class	Full Form	Description
container	Container	Centers content and provides responsive left/right padding. Adapts width as per screen size.
mt-3	Margin-Top	Adds top margin of approximately (16px) to the element using Bootstrap's spacing utility.

This example demonstrates how to create two columns of different widths starting from tablet-sized screens and adjusting up to large desktop displays.

Output :

Tag	Default Font Size	Bootstrap Class	Usage
<h1>	(40px)	.h1	Main heading / Page title
<h2>	(32px)	.h2	Section heading
<h3>	(28px)	.h3	Subsection heading
<h4>	(24px)	.h4	Smaller section heading
<h5>	(20px)	.h5	Minor heading
<h6>	(16px)	.h6	Least important heading

You can also use .h1 to .h6 classes on other elements to make them behave as headings if you want:

Output :

Display Headings

Class	Font Size (px)	Usage
.display-1	80px	Very large title or main banner
.display-2	72px	Sub-main heading
.display-3	64px	Section title
.display-4	56px	Emphasized heading
.display-5	48px	Feature section or label
.display-6	40px	Smaller standout heading

Display headings are designed to be more prominent than standard headings, featuring bigger font sizes and lighter font weights. There are six available classes:.display-1 through .display-6

Output :

<small>

Tag / Element	Role	Output
<h1>	Main heading (largest heading)	h1 heading
<small> or .small	Displays smaller, secondary or subtle text	secondary text

In Bootstrap the <small> tag or .small class is used to display smaller, less prominent text within headings.

Output :

<mark>

Tag / Class	Description	Default Styling	Output
<mark>	Used to highlight or mark important text	Yellow background with slight padding	highlight
.mark (class)	Bootstrap utility class that works like <mark>	Same yellow background and padding	highlight

Bootstrap applies a yellow background and slight padding to the <mark> tag and .mark class for highlighting text.

Output :

<abbr>

Tag / Element	Description	Default Styling	Output
<abbr>	Used to define an abbreviation or acronym with a tooltip	Dotted underline and question mark cursor on hover	HTML

In Bootstrap the <abbr> element is styled with a dotted underline and shows a help cursor (question mark) when hovered over.

Output :

<blockquote>

Class / Tag	Description	Purpose	Example Output
<blockquote> .blockquote	Used for quoting large text from an external or notable source	Displays quotation with proper indentation and font style	The Earth is what we all have in common.
.blockquote-footer	Used to cite the source of the quote	Displays source name in smaller and lighter text	The Earth is what we all have in common.

Use the .blockquote class on a <blockquote>element to style quotations from external sources. When referencing the origin of the quote, such as "from @example.com website", apply the .blockquote-footer class

Output :

<dl>

Tag	Full Form	Purpose	Example Output
<dl>	Description List	Used to display list of terms and their descriptions	HTML HyperText Markup Language

Bootstrap will style the HTML <dl>element in the following way:

Output :

<code>

Tag	Full Form	Purpose
<code>	Code	Used to display inline computer code in monospace font

Bootstrap will style the HTML <code>element in the following way

Output :

<pre>

Tag	Full Form	Purpose
<pre>	Preformatted Text	Used to display text exactly as written (preserves spaces, line breaks, and indentation)

Bootstrap will style the HTML <pre> element in the following way:

Output :