## Bootstrap 5 CheatSheet 🚀

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

Have a look at our newly released Bootstrap admin template 🎉
Congratulations!! You have successfully subscribed to our newsletter. 🥳
Expand All Collapse All
Highlight new in v5
Copied!!! 👍
Grid

- container
  Max width changes at each breakpoint
- container-*
  100% wide until small breakpoint
  100% wide until medium breakpoint
  100% wide until large breakpoint
  100% wide until extra large breakpoint
  100% wide until extra extra large breakpoint
- container-fluid
  Always 100% wide
- row
- col-#
  col-3
  col-5
  col-4
- col-sm-#
  col-sm-3
  col-sm-5
  col-sm-4
- col-md-#
  col-md-3
  col-md-5
  col-md-4
- col-lg-#
  col-lg-3
  col-lg-5
  col-lg-4
- col-xl-#
  col-xl-3
  col-xl-5
  col-xl-4
- col-xxl-#
  col-xxl-3
  col-xxl-5
  col-xxl-4
- col
  1 of 3
  1 of 3
  1 of 3
- col-*
  1 of 3
  1 of 3
  1 of 3
- col-*-auto
  1 of 3
  Variable width content
  3 of 3
  1 of 3
  Variable width content
  3 of 3
- row-cols-#
  Column
  Column
  Column
  Column
- row-cols-*-#
  Column
  Column
  Column
  Column
  Column
  Column
- nesting
  Level 1: .col-sm-3
  Level 2: .col-8 .col-sm-6
  Level 2: .col-4 .col-sm-6
- offset-#
  col-3
  col-3 offset-6
- offset-*-#
  col-3
  col-3 offset-md-6
- gx-{size}
  Custom column padding
  Custom column padding
- gx-*-{size}
  Custom column padding
  Custom column padding
- gy-{size}
  Custom column padding
  Custom column padding
- gy-*-{size}
  Custom column padding
  Custom column padding
- g-{size}
  Custom column padding
  Custom column padding
- g-*-{size}
  Custom column padding
  Custom column padding
- g-0
  .col-sm-6 .col-md-8
  .col-6 .col-md-4

Typography

- h1-h6

  h1. Bootstrap heading

  h2. Bootstrap heading

  h3. Bootstrap heading

  h4. Bootstrap heading

  h5. Bootstrap heading

  h6. Bootstrap heading

- text-muted

  ### Fancy display heading With faded secondary text

- display-{size}

  # Display 1

  # Display 2

  # Display 3

  # Display 4

  # Display 5

  # Display 6

- lead

  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

- mark

  You can use .mark class to highlight text.

- small

  This line of text is meant to be treated as fine print.

- initialism

  attr

- blockquote

  > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

- blockquote-footer

  > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

  Someone famous in Source Title
- list-unstyled
  - 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
- list-inline
  - Lorem ipsum
  - Phasellus iaculis
  - Nulla volutpat

Images

- img-fluid
- img-thumbnail

Tables

- table

  # | First | Last | Handle
  --- | --- | --- | ---
  1 | Mark | Otto | @mdo
  2 | Jacob | Thornton | @fat
  3 | Larry the Bird | @twitter

- table-{color}

  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

- table-striped

  # | First | Last | Handle
  --- | --- | --- | ---
  1 | Mark | Otto | @mdo
  2 | Jacob | Thornton | @fat
  3 | Larry the Bird | @twitter

- table-hover

  # | First | Last | Handle
  --- | --- | --- | ---
  1 | Mark | Otto | @mdo
  2 | Jacob | Thornton | @fat
  3 | Larry the Bird | @twitter

- table-active

  # | First | Last | Handle
  --- | --- | --- | ---
  1 | Mark | Otto | @mdo
  2 | Jacob | Thornton | @fat
  3 | Larry the Bird | @twitter

- table-bordered

  # | First | Last | Handle
  --- | --- | --- | ---
  1 | Mark | Otto | @mdo
  2 | Jacob | Thornton | @fat
  3 | Larry the Bird | @twitter

- table-borderless

  # | First | Last | Handle
  --- | --- | --- | ---
  1 | Mark | Otto | @mdo
  2 | Jacob | Thornton | @fat
  3 | Larry the Bird | @twitter

- table-sm

  # | First | Last | Handle
  --- | --- | --- | ---
  1 | Mark | Otto | @mdo
  2 | Jacob | Thornton | @fat
  3 | Larry the Bird | @twitter

- caption-top

  List of users
  # | First | Last | Handle
  --- | --- | --- | ---
  1 | Mark | Otto | @mdo
  2 | Jacob | Thornton | @fat
  3 | Larry the Bird | @twitter

- table-responsive

  # | 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

- table-responsive-*

  # | 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

Figures

- figure
  A caption for the above image.

Forms

- form-control
- form-label
  Email address
- form-control-lg
- form-control-sm
- form-control-plaintext
  Email
- file input
  Default file input
- form-control-color
  Color picker
- form-select
- form-select-lg
- form-select-sm
- form-check (checkbox)
  Default checkbox
  Checked checkbox
- form-check-inline (checkbox)
  Default checkbox
  Checked checkbox
- form-check (radio)
  Default radio
  Default checked radio
- form-check-inline (radio)
  Default radio
  Default checked radio
- form-switch
  Default switch checkbox input
  Checked switch checkbox input
- form-range
  Example range

Input Group

- input-group (left side)
  @
- input-group (right side)
  @
- input-group (both side)
  $ .00
- input-group-lg
  Large
- input-group-sm
  Small
- input-group with checkbox
- input-group with radio
- input-group with button
- input-group with dropdown

Floating Labels

- form-floating
  Email address
  Password
- form-floating with textarea
  Comments
- form-floating with select
  Works with selects

Form Layout

- horizontal form
  Email
  Password
  Radios
  First radio
  Second radio
  Third disabled radio
  Example checkbox
- col-form-label-{size}
  Email
  Email
  Email

Form Validation

- valid-feedback
  First name
  Looks good!
  Last name
  Looks good!
  Username
  @
  Please choose a username.
  City
  Please provide a valid city.
  State
  Please select a valid state.
  Zip
  Please provide a valid zip.
  Agree to terms and conditions
  You must agree before submitting.
- valid-tooltip
  First name
  Looks good!
  Last name
  Looks good!
  Username
  @
  Please choose a unique and valid username.
  City
  Please provide a valid city.
  State
  Please select a valid state.
  Zip
  Please provide a valid zip.

Accordion

- accordion

  ##

  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.
- accordion-flush

  ##

  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

- alert-primary
  A simple primary alert—check it out!
- alert-secondary
  A simple secondary alert—check it out!
- alert-success
  A simple success alert—check it out!
- alert-danger
  A simple danger alert—check it out!
- alert-warning
  A simple warning alert—check it out!
- alert-info
  A simple info alert—check it out!
- alert-light
  A simple light alert—check it out!
- alert-dark
  A simple dark alert—check it out!
- alert-link
  A simple primary alert with an example link. Give it a click if you like.
- alert-dismissible
  Holy guacamole! You should check in on some of those fields below.

Badge

- primary
  Primary
- secondary
  Secondary
- success
  Success
- danger
  Danger
- warning
  Warning
- info
  Info
- light
  Light
- dark
  Dark
- pill badge
  Pill Badge
- notification badge

Breadcrumb

- breadcrumb
- change divider

Buttons

- btn-primary
- btn-secondary
- btn-success
- btn-danger
- btn-warning
- btn-info
- btn-light
- btn-dark
- btn-link
- btn-outline-primary
- btn-outline-secondary
- btn-outline-success
- btn-outline-danger
- btn-outline-warning
- btn-outline-info
- btn-outline-light
- btn-outline-dark
- btn-lg
- btn-sm
- block buttons
- btn-close
- btn-close-white

Button Group

- btn-group
- btn-group with links
  Active link Link Link
- outlined btn-group
- btn-toolbar
- btn-group-lg
- btn-group-sm
- btn-group-vertical

Button Plugin

- single button toggle
- btn-group with checkbox
  Checkbox 1 Checkbox 2 Checkbox 3
- btn-group with radio
  Radio 1 Radio 2 Radio 3

Card

- card
  Featured

  ##### Special title treatment

  With supporting text below as a natural lead-in to additional content.

  Go somewhere
- card-body
  This is some text within a card body.
- titles, text, links

  ##### 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
- list-group
  - Cras justo odio
  - Dapibus ac facilisis in
  - Vestibulum at eros
- card-header
  Featured

  ##### Special title treatment

  With supporting text below as a natural lead-in to additional content.

  Go somewhere
- card-footer

  ##### Special title treatment

  With supporting text below as a natural lead-in to additional content.

  Go somewhere
- navigation in card
  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-img-bottom

  ##### 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-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

- horizontal card

  ##### Card title

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

  Last updated 3 mins ago

- bg-{color}
  Header

  ##### Primary card title

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

- border-{color}, text-{color}
  Header

  ##### Primary card title

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

- bg-transparent
  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

  ##### 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.

- grid cards

  ##### 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.

Carousel

- carousel (slides only)
- carousel with controls
  Previous Next
- carousel-indicators
  Previous Next
- carousel-caption

  ##### First slide label

  Nulla vitae elit libero, a pharetra augue mollis interdum.

  ##### Second slide label

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  ##### Third slide label

  Praesent commodo cursus magna, vel scelerisque nisl consectetur.

  Previous Next
- carousel-fade
  Previous Next
- carousel with intervals
  Previous Next
- carousel-dark

  ##### First slide label

  Nulla vitae elit libero, a pharetra augue mollis interdum.

  ##### Second slide label

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  ##### Third slide label

  Praesent commodo cursus magna, vel scelerisque nisl consectetur.

  Previous Next

Collapse

- collapse

  Link with href

  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.
- multi-collapse

  Toggle first element

  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.
- collapse-horizontal

  This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.

Dropdowns

- dropdown
- dropdown-toggle-split
- dropdown-menu-dark
- dropup
- dropup (split)
- dropend
- dropstart
- dropdown-item-text
- active dropdown-item
- disabled dropdown-item
- dropdown-menu-end
- dropdown-menu-*-{direction}
- dropdown-header
- dropdown-divider
- dropdown reference

List Group

- list-group
  - Cras justo odio
  - Morbi leo risus
  - Porta ac consectetur ac
  - Vestibulum at eros
- list-group-item active
  - Cras justo odio
  - Morbi leo risus
  - Porta ac consectetur ac
  - Vestibulum at eros
- list-group-item disabled
  - Cras justo odio
  - Morbi leo risus
  - Porta ac consectetur ac
  - Vestibulum at eros
- list-group-flush
  - Cras justo odio
  - Morbi leo risus
  - Porta ac consectetur ac
  - Vestibulum at eros
- list-group-numbered
  - Cras justo odio
  - Morbi leo risus
  - Porta ac consectetur ac
  - Vestibulum at eros
- list-group-horizontal
  - Cras justo odio
  - Morbi leo risus
  - Vestibulum at eros
- list-group-horizontal-*
  - Cras justo odio
  - Morbi leo risus
  - Vestibulum at eros
- list-group-item-{color}
  - 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
- list-group-item-action
  - Cras justo odio
  - Morbi leo risus
  - Porta ac consectetur ac
  - Vestibulum at eros
- custom content

  ##### List group item heading

  3 days ago

  Donec 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 ago

  Donec 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 ago

  Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

  Donec id elit non mi porta.
- list-group with checkbox
  Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros
- javascript behavior
  Home Profile Messages Settings

Modal

- modal

  ##### Modal title

  ...
- static backdrop

  ##### Modal title

  ...
- modal-dialog-scrollable

  ##### Modal title

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio numquam, saepe repellat perspiciatis rerum magnam, sapiente vel molestiae cum beatae error corporis eum atque eveniet!

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia vero odio quos error dolorem numquam, nemo explicabo modi similique! Eveniet porro exercitationem autem ratione.

- modal-dialog-centered

  ##### Modal title

  ...
- modal-{size}

  ##### Modal title

  ...
- modal-fullscreen

  ##### Modal title

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio numquam, saepe repellat perspiciatis rerum magnam, sapiente vel molestiae cum beatae error corporis eum atque eveniet!

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia vero odio quos error dolorem numquam, nemo explicabo modi similique! Eveniet porro exercitationem autem ratione.

  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint et sunt dolorum, non velit minus reprehenderit eaque, vero voluptas excepturi maxime? Atque explicabo accusantium facilis.

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor illo corrupti reiciendis sapiente amet error odio repudiandae doloremque cumque, quasi eius quis possimus commodi dolorem.

- modal-fullscreen-*-down

  ##### Modal title

  ...

Navs, Tabs, Pills

- ul.nav
- nav.nav
- vertical nav
- nav-tabs
- nav-pills
  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.
- nav-fill
- nav-justified
- nav-tabs with dropdown
- nav-pills with dropdown
- vertical pills
  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?

Navbar

- navbar
- navbar-brand
- navbar without using list
- navbar with dropdown
- navbar-text
- navbar-dark
- navbar-light
- fixed-top
- fixed-bottom
- sticky-top
- brand in collapse
- navbar-toggler on right
- navbar-toggler on left

Offcanvas Start

- 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.

Pagination

- pagination
- disabled page-item
- active page-item
- pagination-lg
- pagination-sm

Placeholders

- placeholder

- placeholder bg-{color}
- placeholder-lg
- placeholder-sm
- placeholder-xs
- placeholder-glow

- placeholder-wave

Popovers

- popover on right
- popover on top
- popover on bottom
- popover on left
- dismissible popover
  Dismissible popover

Progress

- progress
- progress-bar
- progress with label
  35%
- progress with height
- progress-bar bg-{color}
- multiple progress-bar
- progress-bar-striped
- progress-bar-striped bg-{color}
- progress-bar-animated
- progress-bar-animated bg-{color}

Scrollspy

- data-bs-spy

  #### @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!

- nested data-bs-spy

  #### 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

- spinner-border
  Loading...
- spinner-border text-{color}
  Loading...
- spinner-border-sm
  Loading...
- spinner-grow
  Loading...
- spinner-grow text-{color}
  Loading...
- spinner-grow-sm
  Loading...

Toasts

- toast
  Bootstrap 11 mins ago
  Hello, world! This is a toast message.
- toast with button
  Hello, world! This is a toast message.
- toast bg-{color} text-{color}
  Hello, world! This is a toast message.

Tooltips

- tooltip on top
- tooltip on right
- tooltip on bottom
- tooltip on left
- tooltip with HTML

Helpers

- clearfix
  ...
- link-{color}
  Primary link
- ratio-{ratio}
- fixed-top
  Fixed top
- fixed-bottom
  Fixed bottom
- sticky-top
  Sticky top
- sticky-*-top
  Sticky top
- visually-hidden

  ## Title for screen readers

- visually-hidden-focusable
  Skip to main content
- stretched-link

  ##### 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
- text-truncate
  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.
- vstack
  First item
  Second item
  Third item
- hstack
  First item
  Second item
  Third item
- vr
  Second item
  Third item

Utility: Borders

- border
- border-{direction}
- border-0
- border-{direction}-0
- border-{color}
- border-{size}
- rounded
- rounded-{corner}
- rounded-{size}

Utility: Colors

- text-{color}

  .text-primary

  .text-secondary

  .text-success

  .text-danger

  .text-warning

  .text-info

  .text-light

  .text-dark

- text-body

  .text-body

- text-white

  .text-white

- text-black-50

  .text-black-50

- text-white-50

  .text-white-50

- bg-{color}
  .bg-primary
  .bg-secondary
  .bg-success
  .bg-danger
  .bg-warning
  .bg-info
  .bg-light
  .bg-dark
- bg-white
  .bg-white
- bg-transparent
  .bg-transparent
- bg-gradient
  .bg-primary.bg-gradient

Utility: Display

- d-*-none
  d-none
  d-sm-none
  d-md-none
  d-lg-none
  d-xl-none
  d-xxl-none
- d-*-inline
  d-inline
  d-sm-inline
  d-md-inline
  d-lg-inline
  d-xl-inline
  d-xxl-inline
- d-*-inline-block
  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-block d-sm-block d-md-block d-lg-block d-xl-block d-xxl-block
- d-*-grid
  d-grid d-sm-grid d-md-grid d-lg-grid d-xl-grid d-xxl-grid
- d-*-table
  d-table d-sm-table d-md-table d-lg-table d-xl-table d-xxl-table
- d-*-table-cell
  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-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-flex d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex
- d-*-inline-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-{display}
  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

Utility: Flex

- flex-*-row
  Flex item 1
  Flex item 2
  Flex item 3
- flex-*-row-reverse
  Flex item 1
  Flex item 2
  Flex item 3
- flex-*-column
  Flex item 1
  Flex item 2
  Flex item 3
- flex-*-column-reverse
  Flex item 1
  Flex item 2
  Flex item 3
- justify-content-*-{option}
  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
- align-items-*-{option}
  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
- align-self-*-{option}
  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-*-fill
  Flex item with a lot of content
  Flex item
  Flex item
- flex-grow-{option}
  Flex item
  Flex item
  Third flex item
- flex-shrink-{option}
  Flex item
  Flex item
- flex-*-nowrap
  Flex item
  Flex item
  Flex item
  Flex item
  Flex item
- flex-*-wrap
  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-*-wrap-reverse
  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
- order-*-{order-number}
  First flex item
  Second flex item
  Third flex item
- order-*-{order-name}
  First flex item
  Second flex item
  Third flex item
  Fourth flex item
- align-content-*-{option}
  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

Utility: Misc

- user-select-{option}

  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.

- pe-{option}

  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.

- overflow-{option}
  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.
- shadow / shadow-{option}
  No shadow
  Small shadow
  Regular shadow
  Larger shadow
- w-{option}
  Width 25%
  Width 50%
  Width 75%
  Width 100%
  Width auto
- h-{option}
  Height 25%
  Height 50%
  Height 75%
  Height 100%
  Height auto
- mw-100
- mh-100
  Max-height 100%
- viewport
  Min-width 100vw
  Min-height 100vh
  Width 100vw
  Height 100vh
- visible
  ...
- invisible
  ...

Utility: Position

- float-*-{option}
  Float start on all viewport sizes
  Float end on all viewport sizes
  Don't float on all viewport sizes
- position-{option}
  position-static
  position-relative
  position-absolute
  position-fixed
  position-sticky
- {direction}-{position}
- translate-middle
- translate-middle-{direction}
- align-{option}
  baseline top middle bottom text-top text-bottom

Utility: Spacing

- m-*-{option}
  .m-0
  .m-1
  .m-2
  .m-3
  .m-4
  .m-5
  .m-auto
- mt-*-{option}
  .mt-0
  .mt-1
  .mt-2
  .mt-3
  .mt-4
  .mt-5
  .mt-auto
- me-*-{option}
  .me-0
  .me-1
  .me-2
  .me-3
  .me-4
  .me-5
  .me-auto
- mb-*-{option}
  .mb-0
  .mb-1
  .mb-2
  .mb-3
  .mb-4
  .mb-5
  .mb-auto
- ms-*-{option}
  .ms-0
  .ms-1
  .ms-2
  .ms-3
  .ms-4
  .ms-5
  .ms-auto
- mx-*-{option}
  .mx-0
  .mx-1
  .mx-2
  .mx-3
  .mx-4
  .mx-5
  .mx-auto
- my-*-{option}
  .my-0
  .my-1
  .my-2
  .my-3
  .my-4
  .my-5
  .my-auto
- p-*-{option}
  .p-0
  .p-1
  .p-2
  .p-3
  .p-4
  .p-5
- pt-*-{option}
  .pt-0
  .pt-1
  .pt-2
  .pt-3
  .pt-4
  .pt-5
- pe-*-{option}
  .pe-0
  .pe-1
  .pe-2
  .pe-3
  .pe-4
  .pe-5
- pb-*-{option}
  .pb-0
  .pb-1
  .pb-2
  .pb-3
  .pb-4
  .pb-5
- ps-*-{option}
  .ps-0
  .ps-1
  .ps-2
  .ps-3
  .ps-4
  .ps-5
- px-*-{option}
  .px-0
  .px-1
  .px-2
  .px-3
  .px-4
  .px-5
- py-*-{option}
  .py-0
  .py-1
  .py-2
  .py-3
  .py-4
  .py-5
- m{direction}-*-n{size}
  Spaced Div
  Spaced Div
  Spaced Div
  Spaced Div
  Spaced Div
  Spaced Div
  Spaced Div
- gap-*-{size}
  Grid item 1
  Grid item 2
  Grid item 3

Utility: Text

- text-*-start

  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.

- text-*-center

  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.

- text-*-end

  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.

- text-wrap
  This text should wrap.
- text-nowrap
  This text should overflow the parent.
- text-break

  mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

- text-{option}

  Lowercased text.

  Uppercased text.

  CapiTaliZed text.

- fs-{size}

  .fs-1 text

  .fs-2 text

  .fs-3 text

  .fs-4 text

  .fs-5 text

  .fs-6 text

- fw-{weight}

  Bold text.

  Bolder weight text (relative to the parent element).

  Normal weight text.

  Light weight text.

  Lighter weight text (relative to the parent element).

- fst-{style}

  Italic text.

  Text with normal font style

- lh-{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.

- font-monospace

  This is in monospace

- text-reset

  Muted text with a reset link.

- text-decoration-{option}

  This text has a line underneath it.

  This text has a line going through it.

  This link has its text decoration removed

Utility: Opacity

- opacity-{value}
  100%
  75%
  50%
  25%
- bg-opacity-{value}
  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
- text-opacity-{value}
  This is default primary text
  This is 75% opacity primary text
  This is 50% opacity primary text
  This is 25% opacity primary text

##### Modal title

###### Code Snippet

copy

      XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

###### Preview

####
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

AddThis Sharing Sidebar
Share to Facebook
, Number of shares
Share to Twitter
Share to Print
Share to Email
More AddThis Share options
, Number of shares255
Hide
Show
AddThis
AddThis Sharing
SHARES