Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
All HTML headings, <h1>
through <h6>
, are available.
Heading | Example |
---|---|
|
h1. Bootstrap heading |
|
h2. Bootstrap heading |
|
h3. Bootstrap heading |
|
h4. Bootstrap heading |
|
h5. Bootstrap heading |
|
h6. Bootstrap heading |
.h1
through .h6
classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
Styling for common inline HTML5 elements.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
Change text alignment, transform, style, weight, and color with our text utilities and color utilities.
Easily realign text to components with text alignment classes.
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Left aligned text on viewports sized SM (small) or wider.
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
Transform text in components with text capitalization classes.
Lowercased text.
Uppercased text.
CapiTaliZed text.
Quickly change the weight (boldness) of text or italicize text.
Bold text.
Normal weight text.
Light weight text.
Italic text.
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white
Contextual text classes also work well on anchors with the provided hover and focus states. Note that the .text-white
and .text-muted
class has no link styling.
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color
, so in some cases you’ll want to use .text-*
utilities.
All lists—<ul>
, <ol>
, and <dl>
—have their margin-top
removed and a margin-bottom: 1rem
. Nested lists have no margin-bottom
.
For simpler styling, clear hierarchy, and better spacing, description lists have updated margin
s. <dd>
s reset margin-left
to 0
and add margin-bottom: .5rem
. <dt>
s are bolded.
Remove the default list-style
and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
Remove a list’s bullets and apply some light margin
with a combination of two classes, .list-inline
and .list-inline-item
.
Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a .text-truncate
class to truncate the text with an ellipsis.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table
to any <table>
, then extend with custom styles or our various included modifier classes.
Using the most basic table markup, here’s how .table
-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
You can also invert the colors—with light text on dark backgrounds—with .table-dark
.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Similar to tables and dark tables, use the modifier classes .thead-light
or .thead-dark
to make <thead>
s appear light or dark gray.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Use .table-striped
to add zebra-striping to any table row within the <tbody>
.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Add .table-bordered
for borders on all sides of the table and cells.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Add .table-hover
to enable a hover state on table rows within a <tbody>
.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Use contextual classes to color table rows or individual cells.
Class | Heading | Heading |
---|---|---|
Active | Cell | Cell |
Default | Cell | Cell |
Primary | Cell | Cell |
Secondary | Cell | Cell |
Success | Cell | Cell |
Danger | Cell | Cell |
Warning | Cell | Cell |
Info | Cell | Cell |
Light | Cell | Cell |
Dark | Cell | Cell |
Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.
Wrap inline snippets of code with <code>
. Be sure to escape HTML angle brackets.
<section>
should be wrapped as inline.
The Sphinx Bootstrap Theme uses Bootstrap styling for inline code text
and
multiline
code text
It also works with existing Sphinx highlighting:
/**
* Greet.
*/
function hello(): {
return "Hello World";
}
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
The Sphinx Bootstrap Theme uses the Bootstrap alert
classes for Sphinx
admonitions.
Note
Requires Git version >=1.9
Warning
Read the Docs does not itself run under Python 3 (though it does support building documentation for Python 3 projects). Please ensure the subsequent steps are performed using Python 2.7.
Important
Are you a marketer? Learn more about how you can connect with the millions of developers who Read the Docs each month.
Note
Besides the Python specific dependencies, you will also need Redis.
Ubuntu users could install this package as following:
sudo apt-get install redis-server
Use the .alert-link
utility class to quickly provide matching colored links within any alert.