English
Deutsch
Українська
España
Русский
Heading styles Default heading sizes and font weights
H1 Heading Thin 25px
H2 Heading Thin 23px
H3 Heading Thin 21px
H4 Heading Thin 19px
H5 Heading Thin 17px
H6 Heading Thin 15px
H1 Heading Light 25px
H2 Heading Light 23px
H3 Heading Light 21px
H4 Heading Light 19px
H5 Heading Light 17px
H6 Heading Light 15px
H1 Heading Regular 25px
H2 Heading Regular 23px
H3 Heading Regular 21px
H4 Heading Regular 19px
H5 Heading Regular 17px
H6 Heading Regular 15px
Heading elements Optional icons, labels and badges
List options Basic list examples with optional classes
Default unordered list
Default unordered list using .list class
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
Unstyled list
Unstyled list using .list-unstyled class
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
Square list type
Square list style using .list-square class
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
Default ordered list
Default ordered list using .list class
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
Circle list type
Circle list style using .list-circle class
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
List with icons
List with icons using .list-icons class
List vertical sizing List item vertical sizing options
Condensed list
Condensed list using .list-condensed class
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
Default list size
Default size using .list class
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
Extended list
Extended list using .list-extended class
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
Inline lists Inline list display options
Default inline list
Inline list using .list-inline class
- 1. First item
- 2. Second item
- 3. Third item
Condensed inline list
Using .list-inline-condensed class
- 1. First item
- 2. Second item
- 3. Third item
Separated inline list
Using .list-inline-separate class
- First item
- Second item
- Third item
Description lists Vertical and horizontal description lists
Vertical description list
Vertical list of terms with their associated descriptions.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
Horizontal description list
Horizontal list of terms with their associated descriptions.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Blockquote options Basic blockquotes styling
Left blockquote
Default left blockquote with source
Paid a cobra along or the sloth dear much eagle gosh from disagreeably lethargic before.
Left blockquote with image
Left blockquote with optional image
Dear far dove lynx inaudibly between after under after on some far warthog regardless wrote.
Right blockquote
Optional right blockquote using .blockquote-reverse class.
Or a more far thought close mammoth that so doused one bee more fidgeted checked and written.
Right blockquote with image
Right blockquote with optional image
Well blocks Inset content block options
Large well block
Optional large well using .well-lg class
Look, I'm in a large
well block!
Default well block
Basic example of well block
Look, I'm in a
well block!
Small well block
Optional small well using .well-sm class
Look, I'm in a small
well block!
White well block
White background using .well-white class
Look, I'm in a
white well block!
Optional border
Add optional border to any or all sides
Look, I'm in a
bordered well block!
Solid color wells
Change background color using .bg-* class
Look, I'm in a
.bg-primary well block!