Happy New Year fellow World Anvil tinkers! I hope your 2019 was a good one and that 2020 is even better.

We have something special for you for January. I’m so excited to share this!

Are you ready?

Welcome to Bootstrap containers month!

Grandmaster

For Grandmasters +

What we’ll cover:

 

Introduction

These samples are from W3Schools Boostrap 3 examples. I have converted them to work on WA, styling them to match my Hacks and Help site. The coolest part? NO CSS IS NEEDED! We’ll only use container calls and the bootstrap class names.

Disclaimer

I (Amy, the author of this article) have read the W3Schools Copyright info and am providing these conversion tutorials for educational value, not for profit. I do not claim rights to the W3 examples.

Some examples work slightly differently than the W3 samples.

Your containers may look different from mine because of different themes/styles for WA.

 

Below I’ll share different container with classes, then in the light grey boxes will be the WA Code (formerly BBCode) to create them for you to copy and paste.

 

COLUMNS

This one is an example of a grid of columns. Read the Bootstrap Grid system info if this section looks like a foreign language.
 

Boostrap - grid

[row]
[container:col-sm-3]
col-sm-3 text
[/container]
[container:col-sm-6]
col-sm-6 text
[/container]
[container:col-sm-3]
col-sm-3 text
[/container]
[/row]

SPACERS

Margin and padding spacers. (No image)

(See the Bootstrap Spacing reference for more info.)
[container:mt-2] [/container]

The remainder of the examples should be self explanatory, so I’ll spare you the verbiage about each one and let you continue on to them!

JUMBOTRON

Boostrap - jumbotron

[container: jumbotron] JUMBOTRON [/container]

WELLS

Boostrap - well

[container: well] WELL [/container]


ALERTS

alert-success

Boostrap - alert success

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

alert-info

Boostrap - alert info

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

alert-warning

Boostrap - alert warning

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

alert-danger

Boostrap - alert danger

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


BUTTONS

btn

Boostrap - btn

[container: btn]btn [/container]
btn-default
Boostrap - btn default
[container: btn btn-default]btn-default [/container]

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

btn-success
Boostrap - btn success
[container: btn btn-success]btn-success [/container]

btn-info
Boostrap - btn info
[container: btn btn-info]btn-info [/container]

btn-warning

Boostrap - btn warning

[container: btn btn-warning]btn-warning [/container]

btn-danger
Boostrap - btn danger
[container: btn btn-danger]btn-danger [/container]

Boostrap - btn link
[container: btn btn-link]btn-link [/container]


BUTTON GROUPS

Boostrap - btn group
[container: btn-group]
[container: btn btn-primary]Pudding[/container]
[container: btn btn-primary]Bonbon[/container]
[container: btn btn-primary]Candy[/container]
[/container]

BADGES

Boostrap - badge

[section: badge]5[/section]

LABELS

Boostrap - label

[section: label label-default]NEW[/section]

Use the name of the buttons below as the name of the class.

For example: label-primary or label-success.

Boostrap - label - colors


Coming Soon

More bootstrap containers are on deck for the next post. So hang in there – it won’t be long!

Make Your World Look Awesome!

Let us know how you use these containers. We’d love to see your creations posted in the WA Discord #guild-showcase.

Until next time, my fellow Tinkersmiths!