Heading 1 [h1]
Heading 2 [h2]
Heading 3 [h3]
Heading 4 [h4]
Heading 5 [h5]
Heading 6 [h6]
Use the lead
class on a paragraph to make it stand out, like this one.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque sollicitudin tempor. Nullam scelerisque vel arcu vel dignissim. Ut feugiat facilisis dui malesuada mollis.
- Nulla egestas velit venenatis, facilisis metus finibus, finibus libero.
- Sed porta est eros.
- Duis sagittis sit amet leo et mollis.
Fusce et porta neque, eget ullamcorper turpis. Sed massa enim, posuere sed vehicula et, bibendum a diam. Donec quam justo, euismod at nibh sit amet, aliquet fermentum nisi.
- Mauris congue est ac urna commodo, at venenatis nulla pulvinar.
- Phasellus viverra fermentum mattis.
- Nunc tincidunt arcu ipsum, in facilisis urna vulputate sed.
Donec sed pellentesque libero. Duis efficitur mi eu odio imperdiet semper. In egestas diam quam, eleifend pulvinar odio cursus ut. This is a text link.
Buttons
Default
Primary Secondary Success Danger Warning Info Light Dark Link
<a href="#" class="btn btn-primary">Primary</a> <a href="#" class="btn btn-secondary">Secondary</a> <a href="#" class="btn btn-success">Success</a> <a href="#" class="btn btn-danger">Danger</a> <a href="#" class="btn btn-warning">Warning</a> <a href="#" class="btn btn-info">Info</a> <a href="#" class="btn btn-light">Light</a> <a href="#" class="btn btn-dark">Dark</a> <a href="#" class="btn btn-link">Link</a>
Outline
Primary Secondary Success Danger Warning Info Light Dark
<a href="#" class="btn btn-outline-primary">Primary</a> <a href="#" class="btn btn-outline-secondary">Secondary</a> <a href="#" class="btn btn-outline-success">Success</a> <a href="#" class="btn btn-outline-danger">Danger</a> <a href="#" class="btn btn-outline-warning">Warning</a> <a href="#" class="btn btn-outline-info">Info</a> <a href="#" class="btn btn-outline-light">Light</a> <a href="#" class="btn btn-outline-dark">Dark</a> <a href="#" class="btn btn-link">Link</a>
Sizes
<a href="#" class="btn btn-outline-primary btn-lg">Large</a>
<a href="#" class="btn btn-outline-primary btn-sm">Small</a>
<a href="#" class="btn btn-outline-primary btn-block">Block</a>
Images
Alignment
This is an image that is aligned to the left. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque sollicitudin tempor. Nullam scelerisque vel arcu vel dignissim. Ut feugiat facilisis dui malesuada mollis. Nulla egestas velit venenatis, facilisis metus finibus, finibus libero. Sed porta est eros. Duis sagittis sit amet leo et mollis. Fusce et porta neque, eget ullamcorper turpis. Sed massa enim, posuere sed vehicula et, bibendum a diam. Donec quam justo, euismod at nibh sit amet, aliquet fermentum nisi. Mauris congue est ac urna commodo, at venenatis nulla pulvinar. Phasellus viverra fermentum mattis. Nunc tincidunt arcu ipsum, in facilisis urna vulputate sed. Donec sed pellentesque libero. Duis efficitur mi eu odio imperdiet semper. In egestas diam quam, eleifend pulvinar odio cursus ut.
This is an image that is aligned to the right. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque sollicitudin tempor. Nullam scelerisque vel arcu vel dignissim. Ut feugiat facilisis dui malesuada mollis. Nulla egestas velit venenatis, facilisis metus finibus, finibus libero. Sed porta est eros. Duis sagittis sit amet leo et mollis. Fusce et porta neque, eget ullamcorper turpis. Sed massa enim, posuere sed vehicula et, bibendum a diam. Donec quam justo, euismod at nibh sit amet, aliquet fermentum nisi. Mauris congue est ac urna commodo, at venenatis nulla pulvinar. Phasellus viverra fermentum mattis. Nunc tincidunt arcu ipsum, in facilisis urna vulputate sed. Donec sed pellentesque libero. Duis efficitur mi eu odio imperdiet semper. In egestas diam quam, eleifend pulvinar odio cursus ut.
This is an image that is aligned to the center.
Styles
This image is huge, but it resizes with the screen thanks to the img-fluid
class.
Use the rounded-circle
class to turn your images into circles.
Use the img-thumbnail
class to add padding and a border to your images.