Bootstrap 5 style guide
1. Read about Bootstrap
theming
2. Customize your theme by defining variables in /themes/custom/your-theme/scss/overrides/_variables.scss.
For example:
$font-family-base: roboto-thin,roboto,sans-serif;
$font-weight-normal: 300;
$body-color: rgb(40, 40, 40);
$enable-rounded: false;
$enable-validation-icons: false; // true by default
This reference guide includes commonly used elements:
Navbars
Utilities
Modifiers
{ xs | sm | md | lg | xl } - available sizes for classes, example .d-sm-none
-
hide on mobile and smaller
{ x | y | t | b | l | r} - available positions x - horizontal, y - vertical, t - top, b -
bottom etc, example .mx-0
- remove margin horizonally only
Useful classes
.d-none or .d-{xs|sm|md|lg|xl}-none - hide element
.sr-only - hide element, but make available for screen reader only
.text-left | .text-center | .text-right - text alignment
.m{x|y|t|b|l|r}-{xs|sm|md|lg|xl}-{0-5} - apply margin, eg .m-0
- no margin for
all sizes, .my-md-2
- vertical margin for tablet+ of .5 $spacer
.p{x|y|t|b|l|r}-{xs|sm|md|lg|xl}-{0-5} - apply padding, eg .m-0
- no padding
for all sizes, .px-md-2
- horizontal padding for tablet+ of .5 $spacer
.row-g-0 - no margins on row element
more infoButtons
Button group - horizontal
Button group - checkbox
Button group - radio
Button group - vertical
Button toolbar
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading with muted text
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Lead
This is a lead paragraph. It stands out from regular paragraphs.
Inline text 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.
Unstyled list
- This is a list.
- It appears completely unstyled.
- Structurally, it's still a list.
- However, this style only applies to immediate child elements.
- Nested lists:
- are unaffected by this style
- will still show a bullet
- and have appropriate left margin
- This may still come in handy in some situations.
Inline list
- This is a list item.
- And another one.
- But they're displayed inline.
Inline code
<section>
should be wrapped as inline.
Code block
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
Variables
User input
To edit settings, press ctrl + ,
Sample
Text transform
Lowercased text.
Uppercased text.
CapiTaliZed text.
Font size
.fs-1 text
.fs-2 text
.fs-3 text
.fs-4 text
.fs-5 text
.fs-6 text
Font weight and italics
Bold text.
Bolder weight text (relative to the parent element).
Normal weight text.
Light weight text.
Lighter weight text (relative to the parent element).
Italic text.
Text with normal font style
Emphasis classes
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
Blockquotes
A well-known quote, contained in a blockquote element.
A well-known quote, contained in a blockquote element.
A well-known quote, contained in a blockquote element.
A well-known quote, contained in a blockquote element.
Images
Responsive images
Thumbnail
Aligning images
Figure
Collapse
Collapse
Accordion
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
Tables
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Table - variants
Class | Heading | Heading |
---|---|---|
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 |
Accented tables
Striped rows
# | 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 |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Hoverable rows
# | 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 |
Active tables
# | 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 |
Forms
Horizontal form
Horizontal form label sizing
File input
Range
Input groups
Floating labels
Validation
Color
Datalists
Indicators
Alerts
Warning!
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Badges
Progress
Spinners
Basic
Contextual alternatives
Multiple bars
Striped
Animated
Containers
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
List groups
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
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.Cards
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another link