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]








btn-link


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!