Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap CSS Typography Reference


Bootstrap's Default Settings

Bootstrap's global default font-size is 14px, with a line-height of 1.428.

This is applied to the <body> and all paragraphs.

In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default).


Typography

The elements below are HTML elements that will be styled a little bit differently by Bootstrap than browser defaults. Look at the "Try it" examples to see the result/differences.

The classes below is used to style the elements further.

Element/Class Description Example
<h1> - <h6>
or
.h1 - .h6
h1 - h6 headings Try it
<small> Creates a lighter, secondary text in any heading

Heading (secondary text)

Try it
.small Indicates smaller text (set to 85% of the size of the parent): Smaller text Try it
.lead Makes a text stand out: Stand out text Try it
<mark>
or
.mark
Highlights text: Highlighted text Try it
<del> Indicates deleted text: Deleted text Try it
<s> Indicates no longer relevant text: No longer relevant text Try it
<ins> Indicates inserted text: Inserted text Try it
<u> Indicates underlined text: Underlined text Try it
<strong> Indicates bold text: Bold text Try it
<em> Indicates italic text: Italic text Try it
.text-left Indicates left-aligned text Try it
.text-center Indicates center-aligned text Try it
.text-right Indicates right-aligned text Try it
.text-justify Indicates justified text Try it
.text-nowrap Indicates no wrap text Try it
.text-lowercase Indicates lowercased text: LOWERCASED TEXT Try it
.text-uppercase Indicates uppercased text: uppercased text Try it
.text-capitalize Indicates capitalized text: capitalized text Try it
<abbr> The <abbr> element indicates an abbreviation or acronym. Abbreviations with a title attribute have a dotted bottom border and a help cursor on hover, providing additional context on hover. Try it
.initialism Displays the text inside the <abbr> element in a slightly smaller font size Try it
<address> Presents contact information Try it
<blockquote> Indicates blocks of content from another source Try it
.blockquote-reverse Indicates a blockquote with right-aligned content Try it
<ul> Indicates an unordered list Try it
<ol> Indicates an ordered list Try it
.list-unstyled Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) Try it
.list-inline Places all list items on a single line Try it
<dl> Indicates a description list Try it
.dl-horizontal Lines up the terms and descriptions in the <dl> element side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side Try it

Code

Element/Class Description Example
<var> Indicates variables: x = ab + y Try it
<kbd> Indicates input that is typically entered via the keyboard: CTRL + P Try it
<pre> Indicates multiple lines of code Try it
<pre class="pre-scrollable"> Indicates multiple lines of code with scrollbar Try it
<samp> Indicates sample output from a computer program: Sample output Try it
<code> Indicates inline snippets of code: span, div Try it

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.