--- import { getData } from '@libs/data' import { getVersionedDocsPath } from '@libs/path' import Example from '@shortcodes/Example.astro' import Placeholder from '@shortcodes/Placeholder.astro' export const title = 'Cheatsheet' export const extra_css = ['cheatsheet.css'] export const extra_js = [{ src: 'cheatsheet.js' }] export const body_class = 'bg-body-tertiary' ---

Bootstrap Cheatsheet

RTL cheatsheet

Contents

Typography

Documentation
Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

`} /> Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

`} /> This is a lead paragraph. It stands out from regular paragraphs.

`} /> 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.

`} /> `} />

A well-known quote, contained in a blockquote element.

Someone famous in Source Title
`} />
  • 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.
    • `} />
  • This is a list item.
  • And another one.
  • But they're displayed inline.
    • `} />

    Tables

    Documentation
    # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 John Doe @social `} /> # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 John Doe @social `} /> Class Heading Heading Default Cell Cell `, ...getData('theme-colors').map((themeColor) => ` ${themeColor.title} Cell Cell `), ` `]} /> # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 John Doe @social `} />

    Forms

    Overview

    Documentation
    We'll never share your email with anyone else.
    Radios buttons
    `} />

    Disabled forms

    Documentation
    Disabled radios buttons
    `} />

    Sizing

    Documentation
    `} />
    `} />

    Input group

    Documentation
    @
    @example.com
    https://example.com/users/
    $ .00
    With textarea
    `} />

    Validation

    Documentation
    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.
    `} />

    Components

    Accordion

    Documentation

    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.
    `} />

    Alerts

    Documentation
    ` `)} />

    Well done!

    Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

    Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

    `} />

    Badge

    Documentation
    Example heading New

    Example heading New

    Example heading New

    Example heading New

    Example heading New

    Example heading New

    Example heading New

    Example heading New

    `} /> ` ${themeColor.title} `)} />

    Buttons

    Documentation
    ` `), ``]} /> ` `)} /> Small button `} />

    Card

    Documentation
    Card title

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere
    Featured
    Card title

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere
    2 days ago
    Card title

    Some quick example text to build on the card title and make up the bulk of the card's content.

    • An item
    • A second item
    • A third item
    Card link Another link
    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

    `} />

    Popovers

    Documentation
    Click to toggle popover `} /> Popover on top `} />

    Scrollspy

    Documentation

    First heading

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    Second heading

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    Third heading

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    Fourth heading

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    Fifth heading

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    Toasts

    Documentation
    Bootstrap 11 mins ago
    Hello, world! This is a toast message.
    `} />

    Tooltips

    Documentation
    Tooltip on top `} />