Bootstrap 5 CheatSheet 🚀
An interactive list of Bootstrap 5 classes, variables, and mixins. 🎁 The only Bootstrap 5 CheatSheet you will ever need. 🎊
-
Max width changes at each breakpoint
-
100% wide until small breakpoint100% wide until medium breakpoint100% wide until large breakpoint100% wide until extra large breakpoint100% wide until extra extra large breakpoint
-
Always 100% wide
-
-
col-3col-5col-4
-
col-sm-3col-sm-5col-sm-4
-
col-md-3col-md-5col-md-4
-
col-lg-3col-lg-5col-lg-4
-
col-xl-3col-xl-5col-xl-4
-
col-xxl-3col-xxl-5col-xxl-4
-
1 of 31 of 31 of 3
-
1 of 31 of 31 of 3
-
1 of 3Variable width content3 of 31 of 3Variable width content3 of 3
-
ColumnColumnColumnColumn
-
ColumnColumnColumnColumnColumnColumn
-
Level 1: .col-sm-3Level 2: .col-8 .col-sm-6Level 2: .col-4 .col-sm-6
-
col-3col-3 offset-6
-
col-3col-3 offset-md-6
-
Custom column paddingCustom column padding
-
Custom column paddingCustom column padding
-
Custom column paddingCustom column padding
-
Custom column paddingCustom column padding
-
Custom column paddingCustom column padding
-
Custom column paddingCustom column padding
-
.col-sm-6 .col-md-8.col-6 .col-md-4
-
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
-
Fancy display heading With faded secondary text
-
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
-
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
-
You can use .mark class to highlight text.
-
This line of text is meant to be treated as fine print.
-
attr
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title -
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Aenean sit amet erat nunc
- Eget porttitor lorem
-
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
-
# First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter -
Class Heading Heading Default Cell Cell .table-primary Cell Cell .table-secondary Cell Cell .table-success Cell Cell .table-danger Cell Cell .table-warning Cell Cell .table-info Cell Cell .table-light Cell Cell .table-dark Cell Cell -
# First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter -
# First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter -
# First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter -
# First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter -
# First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter -
# First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter -
List of users # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter -
# Heading Heading Heading Heading Heading Heading Heading Heading Heading 1 Cell Cell Cell Cell Cell Cell Cell Cell Cell 2 Cell Cell Cell Cell Cell Cell Cell Cell Cell 3 Cell Cell Cell Cell Cell Cell Cell Cell Cell -
# Heading Heading Heading Heading Heading Heading Heading Heading Heading 1 Cell Cell Cell Cell Cell Cell Cell Cell Cell 2 Cell Cell Cell Cell Cell Cell Cell Cell Cell 3 Cell Cell Cell Cell Cell Cell Cell Cell Cell
-
This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow. -
This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.
-
A simple primary alert—check it out!
-
A simple secondary alert—check it out!
-
A simple success alert—check it out!
-
A simple danger alert—check it out!
-
A simple warning alert—check it out!
-
A simple info alert—check it out!
-
A simple light alert—check it out!
-
A simple dark alert—check it out!
-
A simple primary alert with an example link. Give it a click if you like.
-
Holy guacamole! You should check in on some of those fields below.
-
Primary
-
Secondary
-
Success
-
Danger
-
Warning
-
Info
-
Light
-
Dark
-
Pill Badge
-
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere -
This is some text within a card body.
-
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another link -
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
-
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere -
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere -
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi alias praesentium illo omnis adipisci ipsa suscipit rerum quidem doloribus magnam?Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, asperiores provident ea eaque quis omnis adipisci in exercitationem necessitatibus dolorem.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit rem accusamus officia quia eos ducimus consequuntur! Impedit aliquid vero suscipit.
-
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
-
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
-
-
Card title
This is a wider card with supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
-
Header
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
-
Header
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
-
Header
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
-
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
-
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
-
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
-
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
-
- Cras justo odio
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
-
- Cras justo odio
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
-
- Cras justo odio
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
-
- Cras justo odio
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
-
- Cras justo odio
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
-
- Cras justo odio
- Morbi leo risus
- Vestibulum at eros
-
- Cras justo odio
- Morbi leo risus
- Vestibulum at eros
-
- 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
-
- Cras justo odio
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
-
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. -
-
offcanvas-start(Default)
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
-
offcanvas-end
Offcanvas End
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.offcanvas-topOffcanvas Top
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.offcanvas-bottomOffcanvas Bottom
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Scrollspy-
@fat
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corrupti perspiciatis distinctio, officia ipsam debitis animi hic? Iusto autem est accusantium quas recusandae consectetur eligendi at et praesentium placeat dignissimos, quasi ipsum neque explicabo non, maxime nemo reprehenderit corporis doloribus amet ab omnis dolorum, debitis ipsam? Nulla veritatis, fugiat cum possimus minima reiciendis eos exercitationem numquam a officia sunt voluptatibus. Ducimus et porro non necessitatibus quae possimus voluptate libero ratione, iure sint! Aspernatur autem saepe doloribus perferendis eos eaque quo ex. Reiciendis neque quidem odio, beatae, similique eaque iusto voluptatem quae eveniet unde accusamus iure pariatur consequatur distinctio qui error?
@mdo
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam corporis esse fugiat alias, aut libero assumenda saepe neque doloribus ducimus sit pariatur repudiandae sequi sed dolore culpa vero itaque! Iure quos rerum odit, ducimus culpa quidem nisi voluptas possimus accusantium iusto, harum hic vel? Unde illum, odit repellendus impedit magni dolores. Minus sunt laboriosam quisquam eligendi cumque aliquam quas pariatur minima ut ea odio ipsum accusamus amet nostrum, consectetur ullam deleniti esse debitis repellat harum nemo illum saepe. Molestias autem inventore libero nam aliquam molestiae, aliquid temporibus magnam quod iste ut laudantium, adipisci illo enim mollitia cupiditate reiciendis veniam pariatur.
one
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates rem quidem ea exercitationem adipisci non a quaerat ducimus reprehenderit officiis ad aliquid laborum tempora repellendus cupiditate, perferendis officia inventore unde temporibus. Assumenda iste maiores vitae ea quibusdam omnis vero porro doloremque. Dolore officia cumque ad consectetur harum asperiores, expedita sit dolores dolorum laboriosam laudantium dolor repellendus, tempora, aliquam omnis quis itaque totam laborum quaerat. Iure tempora ab vero. Doloribus maxime distinctio dignissimos alias est error incidunt repudiandae. Tenetur incidunt cupiditate dolore, odio possimus ab voluptatem minima! Odit non culpa ad fugit ab. Accusamus dicta beatae rem, obcaecati corrupti aut quaerat!
two
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod asperiores unde illo labore, neque rerum. Dignissimos cum voluptatum expedita recusandae ullam suscipit ipsam in perferendis porro error autem nulla consequuntur delectus ipsa sint magnam voluptate asperiores excepturi dolor, nisi perspiciatis? Consequatur doloremque laudantium facere quae impedit nemo deleniti in delectus recusandae enim neque officia molestiae voluptatibus sed ad, maxime ratione? Fugit reprehenderit iusto voluptates, facilis, impedit delectus quis eum praesentium, expedita qui hic fuga neque nobis. Et ad necessitatibus illum blanditiis suscipit excepturi nobis autem ipsam nulla laboriosam quasi fugiat aliquid quas dolorem, fugit accusantium eaque ex neque atque ea!
three
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit eum quod autem temporibus, voluptatem doloribus optio alias deleniti aperiam architecto sit rem accusamus voluptas eius facilis! Aperiam, vitae laboriosam ullam doloremque iure ut ipsam blanditiis aliquid non sunt quae voluptatem hic nisi cum. Nulla, incidunt harum perferendis provident ad odit perspiciatis quis accusamus maiores nam saepe at necessitatibus temporibus corrupti in voluptas, aut fugit quod rerum est minima esse iste! Mollitia modi officia temporibus repellat praesentium reiciendis quam officiis magnam perspiciatis nulla nobis tenetur nesciunt reprehenderit autem deserunt animi sed a quae, earum quasi! Expedita nisi nemo accusamus nesciunt ipsum!
-
Item 1
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur assumenda voluptates minima natus, consequatur dolor porro. Facilis dolorem dolor necessitatibus architecto hic iste porro consectetur officia rem velit voluptates expedita, in quia ab nesciunt magnam. Aut cum repellat laudantium eligendi. Debitis quis, ex mollitia consequuntur maxime deleniti atque beatae omnis iste excepturi iusto inventore tenetur autem ipsum placeat vero modi neque quibusdam architecto id? Placeat soluta, enim, vero blanditiis iusto ad aperiam hic a atque delectus impedit, in repellat molestiae nulla libero sit? Iste corrupti quisquam cumque eveniet iure error voluptatum quasi incidunt, maiores quam blanditiis repellat, in sint neque.
Item 1-1
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae, nihil sed id nostrum possimus iste commodi! Necessitatibus, magni, est cupiditate animi voluptas sequi sapiente dolor ullam voluptatem assumenda tempore. Natus necessitatibus aliquid, reiciendis assumenda officiis doloribus nam eaque. Eum magni eos odio vel cum magnam, tenetur iusto esse illum voluptate possimus, dolorem quos alias, suscipit porro at ratione quasi repellendus facilis dolor eligendi a! Maxime, aliquam earum, suscipit labore sint, repellat minus doloremque rerum beatae ratione quas fugiat iste eum veritatis quod modi quae quasi adipisci ullam nobis nam? Quae, asperiores. Cumque architecto doloremque blanditiis quas ad aut temporibus eum.
Item 1-2
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores distinctio earum qui eius ducimus ab ratione culpa aspernatur error repellendus! Possimus facere aliquam architecto, quam tenetur nemo, magnam aut quidem laborum quae vel, totam libero? Quos in aperiam consequatur provident nesciunt pariatur ipsa, illo nemo aut fuga porro, architecto maiores. Cupiditate, qui tempore. Vero porro delectus assumenda quia neque tempora unde debitis voluptates fuga? Reprehenderit neque iure id voluptate quam deserunt officiis minima, eligendi accusamus labore porro, sapiente repudiandae debitis beatae est non quia culpa incidunt excepturi praesentium distinctio voluptas iste! Enim, autem porro quod cum similique ab at hic.
Item 2
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, quo. Odio veniam dicta fugiat nobis sed suscipit quos eos quaerat molestiae atque rem distinctio sit consectetur nemo quia reprehenderit nesciunt exercitationem harum ipsum aliquam, alias necessitatibus eum ullam! Sit quibusdam, fugiat quos sapiente pariatur ipsam ipsum esse nostrum voluptatem, ipsa neque, cumque a aspernatur. Eveniet itaque dicta, saepe explicabo dignissimos corrupti ab ipsa quod minus repellendus obcaecati id, consectetur distinctio fugiat sequi nulla numquam magnam voluptatum veniam? Aut praesentium omnis asperiores iure tenetur mollitia repudiandae excepturi sapiente voluptatem exercitationem, voluptate dolorum? Omnis eveniet natus, nemo vel aliquam vitae dignissimos. Sapiente!
Item 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, architecto consequuntur voluptatem voluptatum debitis quidem ipsum! Vel repellat aspernatur quod delectus? Assumenda iusto beatae pariatur tenetur aliquam veritatis modi unde repudiandae voluptates laudantium perferendis maxime necessitatibus inventore rem earum quasi dolor dolore sapiente nemo cum voluptate, ut quibusdam culpa facilis! Reprehenderit accusantium neque ipsum autem! Officia impedit libero aspernatur placeat atque a eos, aperiam aut incidunt fugit cum minus quasi numquam dolor eius adipisci earum sunt iste quos distinctio mollitia sint id optio vel? Et nesciunt expedita ad nemo tempora provident doloremque. Voluptatibus iste ad, autem eligendi saepe blanditiis aut!
Item 3-1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique tempore culpa voluptatibus nostrum ut nulla mollitia. Nisi dignissimos unde adipisci dolorum suscipit nesciunt maxime ducimus iusto et quos modi provident nihil, magni commodi facilis, omnis at, error eius. Labore, ipsam! Perspiciatis molestiae rem ipsam consequuntur voluptatibus quia non consectetur, enim, nisi eum impedit? Eligendi minima iste minus perspiciatis quo enim, dignissimos culpa reiciendis optio nisi, corporis aliquam iusto corrupti laborum. Expedita, eum quibusdam explicabo, harum perferendis optio placeat perspiciatis earum delectus animi, beatae corporis fugit repudiandae dicta voluptate iste. Tenetur aspernatur quaerat ab impedit dignissimos reiciendis atque iure pariatur earum!
Item 3-2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto numquam quidem, fugit accusantium magnam quod tenetur et libero aliquam quibusdam corporis minus. Unde illum nisi labore omnis numquam esse impedit minima facere quam doloribus illo suscipit deleniti commodi facilis perspiciatis quasi animi dolore libero, sequi reprehenderit doloremque accusantium magnam aut. Vel quaerat voluptatibus ab consectetur blanditiis facilis repellendus voluptatum consequatur beatae illum ratione pariatur mollitia deleniti quisquam expedita ea doloremque sint, dignissimos quo commodi sed. Earum omnis blanditiis officiis odit magnam quo facere voluptate aliquam ut dignissimos dolore sequi, voluptas quod corrupti sed doloribus porro quaerat, fugit accusantium reprehenderit fugiat!
Spinners-
Loading...
-
Loading...
-
Loading...
-
Loading...
-
Loading...
-
Loading...
Toasts-
Bootstrap 11 mins agoHello, world! This is a toast message.
-
Hello, world! This is a toast message.
-
Hello, world! This is a toast message.
Helpers-
...
-
-
Fixed top
-
Fixed bottom
-
Sticky top
-
Sticky top
-
Title for screen readers
-
Card with stretched link
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere -
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate nisi, animi odit repellendus eos unde.Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate nisi, animi odit repellendus eos unde.
-
First itemSecond itemThird item
-
First itemSecond itemThird item
-
Second item Third item
Utility: Colors-
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
-
.text-body
-
.text-white
-
.text-black-50
-
.text-white-50
-
.bg-primary.bg-secondary.bg-success.bg-danger.bg-warning.bg-info.bg-light.bg-dark
-
.bg-white
-
.bg-transparent
-
.bg-primary.bg-gradient
Utility: Display-
d-noned-sm-noned-md-noned-lg-noned-xl-noned-xxl-none
-
d-inlined-sm-inlined-md-inlined-lg-inlined-xl-inlined-xxl-inline
-
d-inline-blockd-sm-inline-blockd-md-inline-blockd-lg-inline-blockd-xl-inline-blockd-xxl-inline-block
-
d-block d-sm-block d-md-block d-lg-block d-xl-block d-xxl-block
-
d-grid d-sm-grid d-md-grid d-lg-grid d-xl-grid d-xxl-grid
-
d-table d-sm-table d-md-table d-lg-table d-xl-table d-xxl-table
-
d-table-celld-sm-table-celld-md-table-celld-lg-table-celld-xl-table-celld-xxl-table-cell
-
d-table-row d-sm-table-row d-md-table-row d-lg-table-row d-xl-table-row d-xxl-table-row
-
d-flex d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex
-
d-inline-flexd-sm-inline-flexd-md-inline-flexd-lg-inline-flexd-xl-inline-flexd-xxl-inline-flex
-
d-print-noned-print-inlined-print-inline-blockd-print-blockd-print-gridd-print-tabled-print-table-rowd-print-table-celld-print-flexd-print-inline-flex
Utility: Flex-
Flex item 1Flex item 2Flex item 3
-
Flex item 1Flex item 2Flex item 3
-
Flex item 1Flex item 2Flex item 3
-
Flex item 1Flex item 2Flex item 3
-
Flex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex item
-
Flex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex item
-
Flex itemAligned flex itemFlex itemFlex itemAligned flex itemFlex itemFlex itemAligned flex itemFlex itemFlex itemAligned flex itemFlex itemFlex itemAligned flex itemFlex item
-
Flex item with a lot of contentFlex itemFlex item
-
Flex itemFlex itemThird flex item
-
Flex itemFlex item
-
Flex itemFlex itemFlex itemFlex itemFlex item
-
Flex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex item
-
Flex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex item
-
First flex itemSecond flex itemThird flex item
-
First flex itemSecond flex itemThird flex itemFourth flex item
-
Flex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex itemFlex item
Utility: Misc-
This paragraph will be entirely selected when clicked by the user.
This paragraph has default select behavior.
This paragraph will not be selectable when clicked by the user.
-
This is an example of using
.overflow-autoon an element with set width and height dimensions. By design, this content will vertically scroll.This is an example of using.overflow-hiddenon an element with set width and height dimensions.This is an example of using.overflow-visibleon an element with set width and height dimensions.This is an example of using.overflow-scrollon an element with set width and height dimensions. -
No shadowSmall shadowRegular shadowLarger shadow
-
Width 25%Width 50%Width 75%Width 100%Width auto
-
Height 25%Height 50%Height 75%Height 100%Height auto
-
-
Max-height 100%
-
Min-width 100vwMin-height 100vhWidth 100vwHeight 100vh
-
...
-
...
Utility: Position-
Float start on all viewport sizes
Float end on all viewport sizes
Don't float on all viewport sizes -
position-staticposition-relativeposition-absoluteposition-fixedposition-sticky
-
-
-
-
baseline top middle bottom text-top text-bottom
Utility: Spacing-
.m-0.m-1.m-2.m-3.m-4.m-5.m-auto
-
.mt-0.mt-1.mt-2.mt-3.mt-4.mt-5.mt-auto
-
.me-0.me-1.me-2.me-3.me-4.me-5.me-auto
-
.mb-0.mb-1.mb-2.mb-3.mb-4.mb-5.mb-auto
-
.ms-0.ms-1.ms-2.ms-3.ms-4.ms-5.ms-auto
-
.mx-0.mx-1.mx-2.mx-3.mx-4.mx-5.mx-auto
-
.my-0.my-1.my-2.my-3.my-4.my-5.my-auto
-
.p-0.p-1.p-2.p-3.p-4.p-5
-
.pt-0.pt-1.pt-2.pt-3.pt-4.pt-5
-
.pe-0.pe-1.pe-2.pe-3.pe-4.pe-5
-
.pb-0.pb-1.pb-2.pb-3.pb-4.pb-5
-
.ps-0.ps-1.ps-2.ps-3.ps-4.ps-5
-
.px-0.px-1.px-2.px-3.px-4.px-5
-
.py-0.py-1.py-2.py-3.py-4.py-5
-
Spaced DivSpaced DivSpaced DivSpaced DivSpaced DivSpaced DivSpaced Div
-
Grid item 1Grid item 2Grid item 3
Utility: Text-
Start aligned text on all viewport sizes.
Start aligned text on viewports sized SM (small) or wider.
Start aligned text on viewports sized MD (medium) or wider.
Start aligned text on viewports sized LG (large) or wider.
Start aligned text on viewports sized XL (extra-large) or wider.
Start aligned text on viewports sized XXL (extra-extra-large) or wider.
-
Center aligned text on all viewport sizes.
Center aligned text on viewports sized SM (small) or wider.
Center aligned text on viewports sized MD (medium) or wider.
Center aligned text on viewports sized LG (large) or wider.
Center aligned text on viewports sized XL (extra-large) or wider.
Center aligned text on viewports sized XXL (extra-extra-large) or wider.
-
End aligned text on all viewport sizes.
End aligned text on viewports sized SM (small) or wider.
End aligned text on viewports sized MD (medium) or wider.
End aligned text on viewports sized LG (large) or wider.
End aligned text on viewports sized XL (extra-large) or wider.
End aligned text on viewports sized XXL (extra-extra-large) or wider.
-
This text should wrap.
-
This text should overflow the parent.
-
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
-
Lowercased text.
Uppercased text.
CapiTaliZed text.
-
.fs-1 text
.fs-2 text
.fs-3 text
.fs-4 text
.fs-5 text
.fs-6 text
-
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
-
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
-
This is in monospace
-
Muted text with a reset link.
-
This text has a line underneath it.
This text has a line going through it.
This link has its text decoration removed
Utility: Opacity-
100%75%50%25%
-
This is default success backgroundThis is 75% opacity success backgroundThis is 50% opacity success backgroundThis is 25% opacity success backgroundThis is 10% opacity success background
-
This is default primary textThis is 75% opacity primary textThis is 50% opacity primary textThis is 25% opacity primary text
No Items Found
.col-*where*value can be{ sm | md | lg | xl | xxl }.col-#where#value can be from1 to 12.bg-{color}wherecolorvalue can be{ primary | secondary | success | danger | warning | info | light | dark }.bd-highlightclass is for demo purpose only