Typography

Bootstrap Typography is used to set basic global display, typography, and link styles. Bootstrap styles and formats text, providing customized headings, subheadings, lists, paragraphs, and font styles. It supports global settings for font stack, headings, link styles, ensuring consistency across devices.

When more control is needed, check out the text utility classes.

There are too many typography properties available in Bootstrap to list them all here so please refer to the docs page for more information. Here are a few examples:

Headings

You still have use of all of the HTML Headings (h1 to h6) but the format changes to
< hx>hx.Bootstrap heading< /hx>

or you can use the format: < p class="h1">h1. Bootstrap heading< /p>, like so:

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

There are many more typography elements available for use. Refer to the Bootstrap Typography, Text Utilities, and Colors pages for more information.

Text Colors & Utilities

You can change text alignment, transform, style, weight, line-height, decoration and color with our text utilities and color utilities. Text utilities elements that can be added to a property, to change or enhance the property. A text utility might add a shadow, or change the color, etc.

Bootstrap uses it's own color scheme which designates a color, based on it's bootstrap name. These colors can be overwritten at any time by including a local stylesheet that in "linked" after any bootstrap links. Some of those colors are:

< span class="p-3 mb-3 text-bg-primary rounded-3">Primary< /span>

Primary Secondary Success Danger Warning Info Light Dark

Some Text Colors

< p class="text-primary">.text-primary< /p>

.text-primary

.text-primary-emphasis

.text-secondary

.text-secondary-emphasis

.text-success

.text-success-emphasis

.text-danger

.text-danger-emphasis

.text-warning

There are many more possibilities. These are but just a few. Consult the bootstrap docs for more info and examples.

Bootstrap Buttons

Bootstrap Buttons are a base .btn class that sets up basic styles such as padding and content alignment. By default, .btn controls have a transparent border and background color, and lack any explicit focus and hover styles. The .btn class is intended to be used in conjunction with our button variants, or to serve as a basis for your own custom styles.

The .btn classes are designed to be used with the < button> element. However, you can also use these classes on < a> or < input> elements (though some browsers may apply a slightly different rendering).

When using button classes on < a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

Button Examples | Primary | Secondary | Success | Danger | Warning | Info

*note: the button names are some of the default bootstrap colors. These colors can be changed at any time with your own stylesheet overwriting them. Also, there are many different variations of buttons such as disabled, outline, large, and small. More info is documented on the Bootstrap website.