Greetings and salutations!

How did you enjoy the first part of the Bootstrap series? Hopefully you’ve played with the examples from that post, because I have a new batch for you!

Bootstrap containers month


For Grandmasters +

What we’ll cover:

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? ALMOST NO CSS IS NEEDED! Most will use container calls and the Bootstrap class names.


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.



With a little CSS, we can have increments of 5% (or whatever you’re willing to edit in).


WA Code

[container:progress][container:progress-bar bar-40][/container][/container]


Ran shared her brilliance to make the percentages a class so we can use them in the container call. (Thank you Ran!)

.bar-05 { width: 05%;} 
.bar-10 { width: 10%;} 
.bar-15 { width: 15%;} 
.bar-20 { width: 20%;} 
.bar-25 { width: 25%;} 
.bar-30 { width: 30%;} 
.bar-35 { width: 35%;} 
.bar-40 { width: 40%;} 
.bar-45 { width: 45%;} 
.bar-50 { width: 50%;} 
.bar-55 { width: 55%;} 
.bar-60 { width: 60%;} 
.bar-65 { width: 65%;} 
.bar-70 { width: 70%;} 
.bar-75 { width: 75%;} 
.bar-80 { width: 80%;}
.bar-85 { width: 85%;} 
.bar-90 { width: 90%;} 
.bar-95 { width: 95%;} 
.bar-100 { width: 100%;}



[container: panel panel-default]
 [container: panel-heading]Panel Heading[/container]
 [container: panel-body]9 candy canes[/container]
 [container: panel-footer]Panel Footer[/container]


I saw Oneriwien’s example of this one, so giving credit where credit is due!

[container: breadcrumb]
[li][url=YOUR URL]Top[/url][/li]
[li][url=YOUR URL]Read the Books[/url][/li]


[container: list-group] 
[section: list-group-item active]First item[/section] 
[section: list-group-item]Second item[/section] 
[section: list-group-item]Third item[/section] 


[container: nav nav-tabs]
[li][url=#]Menu 1[/url][/li]
[li][url=#]Menu 2[/url][/li]



.user-css .nav-pills li a { 
  background: lightblue; 

WA Code

[container: nav nav-pills] 
[li][url=#]Menu 1[/url][/li] 
[li][url=#]Menu 2[/url][/li] 


Bootstrap - navbar

[container: navbar navbar-default] 
[container: navbar-header] [url=#]WebSiteName[/url] [/container][br] 
[container: nav navbar-nav] 
[li][url=#]Menu 1[/url][/li] 
[li][url=#]Menu 2[/url][/li] 


And that concludes our series!


Coming Soon

An interview with Garrett Lewis, you may know him as Timepool on the WA Discord.

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!