HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Bootstrap's global default font-size is 14px, with a line-height of 1.428
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).
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: |
Try it |
<s> | Indicates 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 |
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 |