Bootstrap 5 Objects & Containers

Here are some common Bootstrap pre-made objects and containers. Feel free to use any of them!

Note: This article is part of a Bootstrap 5 series.

Typography

Regular Headings

[h1] heading 1 [/h1]

[h2] heading 2 [/h2]

[h3] heading 3 [/h3]

[h4] heading 4 [/h4]

[h5] heading 5 [/h5]
[h6] heading 6 [/h6]

Headings as Class

[container:h1] heading 1 [/container]

[container:h2] heading 2 [/container]

[container:h3] heading 3 [/container]

[container:h4] heading 4 [/container]

[container:h5] heading 5 [/container]

[container:h6] heading 6 [/container]

Inline Styles

[h3]Heading with [section:text-muted]muted text[/section]

[section:lead]Lead text makes the text stand out.[/section]

~~[s]This line of text is meant to be treated as no longer accurate.[/s]~~

[u]This line of text will render as underlined.[/u]

[small]This line of text is meant to be treated as fine print.[/small]

[b]This line rendered as bold text.[/b]

[i]This line rendered as italicized text.[/i]

Code

  [code]
    .example {
      color: #000;
      padding: 8px;
      margin: 24px -20px;
    }
  [/code]

List

[ul]

```
[li] list item 1 [/li]
```
```
[li] list item 2 [/li]
```
```
[li] list item 3 [/li]
```

[/ul]

List - inline

This is a list item. And another one. But they're displayed inline.

Code

[container:list-inline]
[section:list-inline-item]This is a list item.[/section]
[section:list-inline-item]And another one.[/section]
[section:list-inline-item]But they're displayed inline.[/section]
[/container]

List with icons

Code

[ul]
[section:fas fa-question-circle me-2 text-warning] [/section]List item 1[br]
[section:fas fa-question-circle me-2 text-warning] [/section]List item 2[br]
[section:fas fa-question-circle me-2 text-warning] [/section]List item 3
[/ul]

Buttons

Regular

Primary

Secondary

Success

Info

Warning

Danger

Light

Dark

Link

Code

[container:btn btn-primary]Primary[/container]
[container:btn btn-secondary]Secondary[/container]
[container:btn btn-success]Success[/container]
[container:btn btn-info]Info[/container]
[container:btn btn-warning]Warning[/container]
[container:btn btn-danger]Danger[/container]
[container:btn btn-light]Light[/container]
[container:btn btn-dark]Dark[/container]
[container:btn btn-link]Link[/container]

Vertical Btn. Group

Button

Code

[container:btn-group-vertical]
[container:btn btn-primary]

Button

[/container]
[container:btn btn-primary]

Button

[/container]
[container:btn btn-primary]

Button

[/container]
[container:btn btn-primary]

Button

[/container]
[container:btn btn-primary]

Button

[/container]
[container:btn btn-primary]

Button

[/container]
[/container]

Button Group

Left

Middle

Right

Code

[container:btn-group]
[container:btn btn-secondary]Left[/container]
[container:btn btn-secondary]Middle[/container]
[container:btn btn-secondary]Right[/container]
[/container]

Pagination

Code

[container:pagination]
[container:page-item disabled]
[container:page-link] [url:#]<<[/url] [/container]
[/container]
[container:page-item active]
[container:page-link] [url:#]1[/url] [/container]
[/container]
[container:page-item]
[container:page-link] [url:#]2[/url] [/container]
[/container]
[container:page-item]
[container:page-link] [url:#]3[/url] [/container]
[/container]
[container:page-item]
[container:page-link] [url:#]4[/url] [/container]
[/container]
[container:page-item]
[container:page-link] [url:#]5[/url] [/container]
[/container]
[container:page-item]
[container:page-link] [url:#]>>[/url] [/container]
[/container]
[/container]

Labels

label-danger label-primary
Code

[section:label label-danger] label-danger [/section]
[section:label label-primary] label-primary [/section]

Badges

Primary Secondary Light Dark
Success Danger Warning Info
Code

[section:badge bg-primary]Primary[/section]
[section:badge bg-secondary]Secondary[/section]
[section:badge bg-light text-body]Light[/section]
[section:badge bg-dark text-white]Dark[/section]
[section:badge bg-success]Success[/section]
[section:badge bg-danger]Danger[/section]
[section:badge bg-warning]Warning[/section]
[section:badge bg-info]Info[/section]

Alerts

[container:alert alert-primary] alert alert-primary [/container]

[container:alert alert-secondary] alert alert-secondary [/container]

[container:alert alert-success] alert alert-success [/container]

[container:alert alert-danger] alert alert-danger [/container]

[container:alert alert-warning] alert alert-warning [/container]

[container:alert alert-info] alert alert-info [/container]

[container:alert alert-light] alert alert-light [/container]

[container:alert alert-dark] alert alert-dark [/container]

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.

Code

[container:alert alert-success]
[container:alert-heading h4]Well done![/container]
[p]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.[/p]
[hr]
[container:mb-0][p]Whenever you need to, be sure to use margin utilities to keep things nice and tidy.[/p][/container]
[/container]

[aloud]
[p]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.[/p]
[/aloud]

Lists

[container:list-group ]
[ul]

[section:list-group-item] An item [/section]

[section:list-group-item] A second item [/section]

[section:list-group-item] A third item [/section]

[section:list-group-item] A fourth item [/section]

[section:list-group-item] And a fifth one [/section]

[/ul]
[/container]

[container:list-group list-group-light]
[ul]

[section:list-group-item px-3 border-0]list-group-item-default[/section]

[section:list-group-item border-0 list-group-item-primary]
list-group-item-primary[/section]

[section:list-group-item border-0 list-group-item-secondary]
list-group-item-secondary[/section]

[section:list-group-item border-0 list-group-item-success]
list-group-item-success[/section]

[section:list-group-item border-0 list-group-item-danger]
list-group-item-danger[/section]

[section:list-group-item border-0 list-group-item-warning]
list-group-item-warning[/section]

[section:list-group-item border-0 list-group-item-info]
list-group-item-info[/section]

[section:list-group-item border-0 list-group-item-light]
list-group-item-light[/section]

[section:list-group-item border-0 list-group-item-dark]
list-group-item-dark[/section]

[/ul]
[/container]

[container:card border-dark text-dark bg-light]
[container:card-header]Light Bordered Card[/container]
[container:card-body]
[container:card-title][h4]Card title[/h4][/container]
[container:card-text][p]Some quick example text to build on the card title and make up the bulk of the card's content.[/p][/container]
[/container]
[/container]

Card title

[container:card]
[container:card-body]
[container:card-title][h4]Card title[/h4][/container]
[container:card-text][p]Some quick example text to build on the card title and make up the bulk of the card's content.[/p][/container]
[container:btn btn-primary]Button[/container]
[/container]
[/container]

Button

Card title

Card subtitle

[container:card]
[container:card-body]
[container:card-title][h4]Card title[/h4][/container]
[container:card-subtitle mb-2 text-muted][section:lead]Card subtitle[/section][/container]
[container:card-text][p]Some quick example text to build on the card title and make up the bulk of the card's content.[/p][/container]
[section:card-link][url:#]Card link[/url][/section]
[section:card-link][url:#]Another link[/url][/section]
[/container]
[/container]

Card link Another link

Card title

[container:card]
[container:card-img-top][img:IMG_URL_HERE][/container]
[container:card-body]
[container:card-title][h4]Card title[/h4][/container]
[container:card-text][p]Some quick example text to build on the card title and make up the bulk of the card's content.[/p][/container]
[container:btn btn-primary]Button[/container]
[/container]
[/container]

Button

Card title

[container:card]
[section:card-img-top][img:IMG_URL_HERE][/section]
[container:card-body]
[container:card-title][h4]Card title[/h4][/container]
[container:card-text][p]This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.[/p][/container]
[/container]
[/container]

Containers

.container - Basic Container - max width for each responsive breakpoint

.col-fluid - Fluid Container - 100% width at all breakpoints

Responsive Container

.col-sm - responsive breakpoint > 576px ≥ 100% width

.col-md - responsive breakpoint > 768px ≥ 100% width

.col-lg - responsive breakpoint > 992px ≥ 100% width

.col-xl - responsive breakpoint > 1200 ≥ 100% width

Grid Column

12 columns with .col class

12 columns with .col-1 class

2 column grid layout

.col-sm-4

.col-sm-8

2 column with multiple class for responsive width

.col-sm-8 .col-lg-4

.col-sm-4 .col-lg-8

Three Columns (reset width on responsive)

.col-md-4 .col-lg-2

.col-md-4 .col-lg-5

Three Columns (no reset on responsive)

.col-md-4

Comments

Please Login in order to comment!

Fabled Legend Oneriwien

Jun 8, 2023 08:50 by Damion Otter

Thank you so much for taking the time to list all this out. Pages like this would be so useful to be able to clone/copy for testing themes! Makes me wish I had built my world around BS5 rather than my own containers.

Primary author of the NobleDark, Fantasy setting Realms of Ravare.

Sage 1337spectra

Jun 8, 2023 17:08 by Gabrielle Decker

For sure! I was the same way. I still have some that are custom built, but now the utility classes are built into just about everything I make, even if its just to adjust the margins or padding of something. I think if more people used the built-in stuff that's in BS5, it would also produce less overhead on the servers!

Eternal Sage kitoypoy

Jun 8, 2023 13:25 by Chris L

I like the card reference here! I've wanted to use it more, but I haven't taken the time to really dive deep into it. This is very helpful.

Take a look at my Institutions of Learning challenge article.

Learn about the World of Wizard's Peak and check out my award winning article about the Ghost Boy of Kirinal!

I'm glad to know it is! Thank you so much!