--- layout: examples title: Cheatsheet extra_css: - "cheatsheet.css" extra_js: - src: "cheatsheet.js" body_class: "bg-light" ---

Bootstrap Cheatsheet

}}" class="ms-auto link-light" hreflang="ar">RTL cheatsheet

Contents

Typography

}}">Documentation
{{< example show_markup="false" >}}

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

{{< /example >}} {{< example show_markup="false" >}}

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

{{< /example >}} {{< example show_markup="false" >}}

This is a lead paragraph. It stands out from regular paragraphs.

{{< /example >}} {{< example show_markup="false" >}}

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.

{{< /example >}} {{< example show_markup="false" >}}

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

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

Images

}}">Documentation
{{< example show_markup="false" >}} {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}} {{< /example >}} {{< example show_markup="false" >}} {{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}} {{< /example >}}

Tables

}}">Documentation
{{< example show_markup="false" >}}
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{{< /example >}} {{< example show_markup="false" >}}
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{{< /example >}} {{< example show_markup="false" >}} {{< table.inline >}} {{- range (index $.Site.Data "theme-colors") }} {{- end -}} {{< /table.inline >}}
Class Heading Heading
Default Cell Cell
{{ .name | title }} Cell Cell
{{< /example >}} {{< example show_markup="false" >}}
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{{< /example >}}

Figures

}}">Documentation
{{< example show_markup="false" >}}
{{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
A caption for the above image.
{{< /example >}}

Forms

Overview

}}">Documentation
{{< example show_markup="false" >}}
We'll never share your email with anyone else.
Radios buttons
{{< /example >}}

Disabled forms

}}#disabled-forms">Documentation
{{< example show_markup="false" >}}
Disabled radios buttons
{{< /example >}}

Sizing

}}#sizing">Documentation
{{< example show_markup="false" >}}
{{< /example >}} {{< example show_markup="false" >}}
{{< /example >}}

Input group

}}">Documentation
{{< example show_markup="false" >}}
@
@example.com
https://example.com/users/
$ .00
With textarea
{{< /example >}}

Floating labels

}}">Documentation
{{< example show_markup="false" >}}
{{< /example >}}

Validation

}}">Documentation
{{< example show_markup="false" >}}
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.
{{< /example >}}

Components

Accordion

}}">Documentation
{{< example show_markup="false" >}}

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.
{{< /example >}}

Alerts

}}">Documentation
{{< example show_markup="false" >}} {{< alerts.inline >}} {{- range (index $.Site.Data "theme-colors") }} {{ end -}} {{< /alerts.inline >}} {{< /example >}} {{< example show_markup="false" >}} {{< /example >}}

Badge

}}">Documentation
{{< example show_markup="false" >}}

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

{{< /example >}} {{< example show_markup="false" >}} {{< badge.inline >}} {{- range (index $.Site.Data "theme-colors") }} {{ .name | title }}{{- end -}} {{< /badge.inline >}} {{< /example >}}

Buttons

}}">Documentation
{{< example show_markup="false" >}} {{< buttons.inline >}} {{- range (index $.Site.Data "theme-colors") }} {{- end -}} {{< /buttons.inline >}} {{< /example >}} {{< example show_markup="false" >}} {{< buttons.inline >}} {{- range (index $.Site.Data "theme-colors") }} {{- end -}} {{< /buttons.inline >}} {{< /example >}} {{< example show_markup="false" >}} {{< /example >}}

Button group

}}">Documentation
{{< example show_markup="false" >}} {{< /example >}}

Card

}}">Documentation
{{< example show_markup="false" >}}
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
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
{{< placeholder width="100%" height="250" text="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.

Last updated 3 mins ago

{{< /example >}}

List group

}}">Documentation
{{< example show_markup="false" >}}
  • A disabled item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
{{< /example >}} {{< example show_markup="false" >}}
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
{{< /example >}} {{< example show_markup="false" >}}
A simple default list group item {{< list.inline >}} {{- range (index $.Site.Data "theme-colors") }} A simple {{ .name }} list group item {{- end -}} {{< /list.inline >}}
{{< /example >}}

Popovers

}}">Documentation
{{< example show_markup="false" >}} {{< /example >}} {{< example show_markup="false" >}} {{< /example >}}

Progress

}}">Documentation
{{< example show_markup="false" >}}
0%
25%
50%
75%
100%
{{< /example >}} {{< example show_markup="false" >}}
{{< /example >}}

Scrollspy

}}">Documentation

@fat

Placeholder content for the scrollspy example. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

@mdo

Placeholder content for the scrollspy example. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk.

one

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

Placeholder content for the scrollspy example. If you wanna dance, if you want it all, you know that I'm the girl that you should call. Walk through the storm I would. So let me get you in your birthday suit. The one that got away. Last Friday night, yeah I think we broke the law, always say we're gonna stop. 'Cause she's a little bit of Yoko, And she's a little bit of 'Oh no'. I want the jaw droppin', eye poppin', head turnin', body shockin'. Yeah, we maxed our credit cards and got kicked out of the bar.

And some more placeholder content, for good measure.

Spinners

}}">Documentation
{{< example show_markup="false" >}} {{< spinner.inline >}} {{- range (index $.Site.Data "theme-colors") }} {{- end -}} {{< /spinner.inline >}} {{< /example >}} {{< example show_markup="false" >}} {{< spinner.inline >}} {{- range (index $.Site.Data "theme-colors") }} {{- end -}} {{< /spinner.inline >}} {{< /example >}}

Toasts

}}">Documentation
{{< example show_markup="false" class="bg-dark p-5 align-items-center" >}} {{< /example >}}

Tooltips

}}">Documentation
{{< example show_markup="false" class="tooltip-demo" >}} {{< /example >}}