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:

Progress Bar
Panel
Breadcrumbs
List Group
Nav Tab
Nav Tab Pill
Nav Bar

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.

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.

PROGRESS BAR

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]

CSS

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%;}

PANEL

[container: panel panel-default]
 [container: panel-heading]Panel Heading[/container]
 [container: panel-body]9 candy canes[/container]
 [container: panel-footer]Panel Footer[/container]
[/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

[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 TAB

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

NAV TAB PILL

CSS

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

WA Code

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

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

And that concludes our series!