ThemeSelection

Bootstrap 5 CheatSheet 🚀

An interactive list of Bootstrap 5 classes, variables, and mixins. 🎁 The only Bootstrap 5 CheatSheet you will ever need. 🎊

Bootstrap 5 CheatSheet 🚀 - The only Bootstrap 5 CheatSheet you will ever need. 🎊 | Product Hunt
CheatSheet Hero Images
Have a look at our newly released Bootstrap admin template 🎉
External link
  • 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.

    • 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
External link
  • # 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
External link
External link
External link
External link
External link
  • Looks good!
    Looks good!
    @
    Please choose a username.
    Please provide a valid city.
    Please select a valid state.
    Please provide a valid zip.
    You must agree before submitting.
  • Looks good!
    Looks good!
    @
    Please choose a unique and valid username.
    Please provide a valid city.
    Please select a valid state.
    Please provide a valid zip.
External link
  • 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.
External link
External link
External link
External link
External link
External link
  • 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-img-top
    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-img-bottom
  • card-img-overlay
    Card title

    This is a wider card with supporting text below as a natural lead-in to additional content.

    Last updated 3 mins ago

  • card-horizontal-image
    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-group-image
    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-group-image
    Card title

    This card has supporting text below as a natural lead-in to additional content.

    card-group-image
    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-grid-image
    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-grid-image
    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-grid-image
    Card title

    This is a longer card with supporting text below as a natural lead-in to additional content.

    card-grid-image
    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.

External link
External link
  • 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.
External link
External link
External link
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid tempore tempora molestiae pariatur, voluptate fuga corrupti est reiciendis maxime totam dolores, voluptates, dolorem eaque sequi.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, natus sed soluta necessitatibus tempore aspernatur? Praesentium, odit explicabo distinctio dolore adipisci officia iure, ut magnam optio aliquam at similique veritatis.
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium minima repellat incidunt facilis obcaecati blanditiis corrupti ad officia doloribus ullam sapiente ipsum, nemo a, excepturi voluptatem voluptatibus velit eum dignissimos ut, nam tempora? Reiciendis illo itaque veritatis eligendi fuga, mollitia ratione totam veniam esse in.
  • Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis aperiam accusantium facere minus totam, id cumque sequi ea harum necessitatibus animi inventore, sunt iste dicta libero consectetur ab eligendi repudiandae.
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id ducimus veniam optio porro impedit amet odio aliquam officia non nobis quisquam soluta repudiandae, earum nulla.
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, dolores blanditiis labore praesentium sunt aperiam adipisci voluptatem minus tempore voluptatibus, aspernatur illum temporibus! Rem, quidem? Reiciendis ex explicabo perferendis nobis.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum consectetur voluptates inventore adipisci quaerat asperiores ab blanditiis excepturi sunt, assumenda est ad voluptatum, iste provident?
External link
  • 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-top
    Offcanvas Top
    Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
  • offcanvas-bottom
    Offcanvas Bottom
    Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
External link
  • @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!

External link
External link
External link
External link
External link
  • d-none
    d-sm-none
    d-md-none
    d-lg-none
    d-xl-none
    d-xxl-none
  • d-inline
    d-sm-inline
    d-md-inline
    d-lg-inline
    d-xl-inline
    d-xxl-inline
  • d-inline-block
    d-sm-inline-block
    d-md-inline-block
    d-lg-inline-block
    d-xl-inline-block
    d-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-cell
    d-sm-table-cell
    d-md-table-cell
    d-lg-table-cell
    d-xl-table-cell
    d-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-flex
    d-sm-inline-flex
    d-md-inline-flex
    d-lg-inline-flex
    d-xl-inline-flex
    d-xxl-inline-flex
  • d-print-none
    d-print-inline
    d-print-inline-block
    d-print-block
    d-print-grid
    d-print-table
    d-print-table-row
    d-print-table-cell
    d-print-flex
    d-print-inline-flex
External link
  • Flex item 1
    Flex item 2
    Flex item 3
  • Flex item 1
    Flex item 2
    Flex item 3
  • Flex item 1
    Flex item 2
    Flex item 3
  • Flex item 1
    Flex item 2
    Flex item 3
  • Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
  • Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
  • Flex item
    Aligned flex item
    Flex item
    Flex item
    Aligned flex item
    Flex item
    Flex item
    Aligned flex item
    Flex item
    Flex item
    Aligned flex item
    Flex item
    Flex item
    Aligned flex item
    Flex item
  • Flex item with a lot of content
    Flex item
    Flex item
  • Flex item
    Flex item
    Third flex item
  • Flex item
    Flex item
  • Flex item
    Flex item
    Flex item
    Flex item
    Flex item
  • Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
  • Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
  • First flex item
    Second flex item
    Third flex item
  • First flex item
    Second flex item
    Third flex item
    Fourth flex item
  • Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
    Flex item
External link
  • 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 link can not be clicked.

    This link can be clicked (this is default behavior).

    This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.

  • This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.
    This is an example of using .overflow-hidden on an element with set width and height dimensions.
    This is an example of using .overflow-visible on an element with set width and height dimensions.
    This is an example of using .overflow-scroll on an element with set width and height dimensions.
  • No shadow
    Small shadow
    Regular shadow
    Larger shadow
  • Width 25%
    Width 50%
    Width 75%
    Width 100%
    Width auto
  • Height 25%
    Height 50%
    Height 75%
    Height 100%
    Height auto
  • Max-width-100
  • Max-height 100%
  • Min-width 100vw
    Min-height 100vh
    Width 100vw
    Height 100vh
  • ...
External link
External link
External link
  • 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
External link
  • 100%
    75%
    50%
    25%
  • This is default success background
    This is 75% opacity success background
    This is 50% opacity success background
    This is 25% opacity success background
    This is 10% opacity success background
  • This is default primary text
    This is 75% opacity primary text
    This is 50% opacity primary text
    This is 25% opacity primary text
External link

No Items Found

Tip
  • .col-* where * value can be { sm | md | lg | xl | xxl }
  • .col-# where # value can be from 1 to 12
  • .bg-{color} where color value can be { primary | secondary | success | danger | warning | info | light | dark }
  • .bd-highlight class is for demo purpose only