Typography
Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
Headings
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Body Text
Maecenas eget metus quis justo semper malesuada id id leo. Mauris tristique libero mauris, vitae rutrum mi ultricies a. Vestibulum volutpat eu leo sit amet feugiat.
Pellentesque pellentesque elementum sem, eu interdum magna. Aenean vestibulum, erat vel tincidunt luctus, ex orci interdum est, ut vehicula erat massa ut purus. Nam sit amet odio quis ante bibendum faucibus. Mauris eleifend lobortis justo vel dictum. Aenean lobortis eleifend turpis, sit amet ullamcorper dui euismod at.
Inline Text
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.
Inline Text
Left aligned text.
Pellentesque vulputate arcu sed risus auctor tincidunt. Morbi eget massa turpis. Fusce aliquet dolor eu posuere tincidunt. Fusce ultricies luctus dui, dapibus pharetra risus semper non. .
Center aligned text.
Pellentesque vulputate arcu sed risus auctor tincidunt. Morbi eget massa turpis. Fusce aliquet dolor eu posuere tincidunt. Fusce ultricies luctus dui, dapibus pharetra risus semper non. .
Right aligned text.
Pellentesque vulputate arcu sed risus auctor tincidunt. Morbi eget massa turpis. Fusce aliquet dolor eu posuere tincidunt. Fusce ultricies luctus dui, dapibus pharetra risus semper non. .
list
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Buttons
Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Buttons
Radio Buttons
Color
Similar to the contextual text color classes, easily set the background of an element to any contextual class.
Color
Background Color
Color
.text-default
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Alerts Examples
Basic Alerts
Link Alerts
Additional Content
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Accordions
Using the card component, you can extend the default collapse behavior to create an accordion.
Accordion Style One
Tabs
Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin.
Tabs Style
Tab #1
Luctuset ultrices posuere cubiliaurae urabitur nonex rutrum elit lacinia faucibust eget est erosivamus egettitor nisiat volutpat felisras sed nisl dictum sagittis metus
etegestas diamenean in ante vitae sem sagittis condimentLuctuset ultrices posuere cubiliaurae urabitur nonex rutrum elit lacinia faucibust eget est erosivamus egettitor nisiat volutpat felisras sed nisl dictum sagittis metus etegestas diamenean in ante vitae sem sagittis cond ummetus etegestas diamenean in ante vitae sem sagittismetus etegestas diameneanin ante vitae.
Tab #2
Faucibus orci luctuset ultrices posuere cubiliaurae urabitur nonex rutrum elit lacinia faucibust eget est erosivamus eget porttitor nisiat volutpat felisras sed nisl dictum sagittis metus etegestas diamenean in ante vitae sem sagittis condiment ummetus etegestas diamenean in ante vitae sem sagittismetus etegestas diamenean.
Morbi tempor suscipit augue sit amet sodaleuis volutpat pellentesque magnaut fringilla lacus tincidunt acaecenast estvel ut fringilla lacus tincidunt acaecenas idseron.
Tab #3
Urabitur nonex rutrum elit lacinia faucibust eget est erosivamus eget porttitor nisiat volutpat felisras sed nisl dictum sagittis metus etegestas diamenean in ante vitae sem sagittis condiment ummetus etegestas diamenean in ante vitae sem sagittismetus etegestas diameneanin ante vitae.
Lacus sapienonec nibh just viverra sitamet exac lobortis faucibus est. Morbi suscipit est in luctus volutpatenean sollicitudin tincidunt estvel ut fringilla lacus tincidunt acaecenas idseron.
Pills Style
Tab #1
Luctuset ultrices posuere cubiliaurae urabitur nonex rutrum elit lacinia faucibust eget est erosivamus egettitor nisiat volutpat felisras sed nisl dictum sagittis metus
etegestas diamenean in ante vitae sem sagittis condimentLuctuset ultrices posuere cubiliaurae urabitur nonex rutrum elit lacinia faucibust eget est erosivamus egettitor nisiat volutpat felisras sed nisl dictum sagittis metus etegestas diamenean in ante vitae sem sagittis cond ummetus etegestas diamenean in ante vitae sem sagittismetus etegestas diameneanin ante vitae.
Tab #2
Faucibus orci luctuset ultrices posuere cubiliaurae urabitur nonex rutrum elit lacinia faucibust eget est erosivamus eget porttitor nisiat volutpat felisras sed nisl dictum sagittis metus etegestas diamenean in ante vitae sem sagittis condiment ummetus etegestas diamenean in ante vitae sem sagittismetus etegestas diamenean.
Morbi tempor suscipit augue sit amet sodaleuis volutpat pellentesque magnaut fringilla lacus tincidunt acaecenast estvel ut fringilla lacus tincidunt acaecenas idseron.
Tab #3
Urabitur nonex rutrum elit lacinia faucibust eget est erosivamus eget porttitor nisiat volutpat felisras sed nisl dictum sagittis metus etegestas diamenean in ante vitae sem sagittis condiment ummetus etegestas diamenean in ante vitae sem sagittismetus etegestas diameneanin ante vitae.
Lacus sapienonec nibh just viverra sitamet exac lobortis faucibus est. Morbi suscipit est in luctus volutpatenean sollicitudin tincidunt estvel ut fringilla lacus tincidunt acaecenas idseron.
Badges
Documentation and examples for badges, our small count and labeling component.
Badges Examples
Default Badges
Default Primary Secondary Success Danger Warning Info Light DarkContextual Variations
Default Primary Secondary Success Danger Warning Info Light DarkPill Badges
Default Primary Secondary Success Danger Warning Info Light DarkDot Badges
Default Primary Secondary Success Danger Warning Info Light DarkNotification Badges
Notifications 4Tooltips & Popover
Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
Tooltips & Popovers
Tooltip
Popovers
Four Directions
Modals
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Examples
Live Demo
Launch demo modalPaginations
Examples for showing pagination to indicate a series of related content exists across multiple pages.
Pagination
Default Pagination
Sizing
Working with icon
Images
Progress Bars
Progress sm
Progress md
Progress lg
Progress xl
Breadcrumb
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
Breadcrumbs
List Group
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
List Group
Basic example
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Flush List
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Contextual classes
- Dapibus ac facilisis in
- A simple primary list group item
- A simple secondary list group item
- A simple success list group item
- A simple danger list group item
- A simple warning list group item
- A simple info list group item
- A simple light list group item
- A simple dark list group item
List with badge
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
Custom content
List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
