Bootstrap Containers

Below are the Bootstrap 3 containers with sample WA Code I've been able to convert from the W3Schools tutorials. Enjoy! If you use them, I'd love to see how you do!  

Reference - W3 Schools Bootstrap How Tos

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. I do not claim rights to their examples. Some work slightly differently than the W3 samples.
 
I've read the W3Schools Copyright info and am providing these conversion tutorials for no profit.

 

Theme Sample - Bootstrap Containers

Bootstrap Containers



COLUMNS


Read the Bootstrap Grid system info if this section looks like a foreign language.
 
col-sm-3
col-sm-6
col-sm-3

Code

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


 




mt-2 SPACER:

[container:mt-2] [/container]



JUMBOTRON

[container: jumbotron] JUMBOTRON [/container]



WELL

[container: well] WELL [/container]



(blank - you add a 2nd class to get the desired effect)
alert

alert-success

alert info looks like it gets stripped out of the CSS ('banned word'?)
alert-info

alert-warning

alert danger looks like it gets stripped out of the CSS ('banned word'?)
alert-danger

Code


[container: alert ]alert [/container]
[container: alert alert-success]alert-success[/container]
[container: alert alert-info]alert-info[/container]
[container: alert alert-warning]alert-warning[/container]
[container: alert alert-danger]alert-danger[/container]




btn
(blank - you add a 2nd class to get the desired effect)
btn-default

btn-primary

btn-success

btn-info

btn-warning

btn-danger


Code


[container: btn]btn [/container]
[container: btn btn-default]btn-default [/container]
[container: btn btn-primary]btn-primary [/container]
[container: btn btn-success]btn-success [/container]
[container: btn btn-info]btn-info [/container]
[container: btn btn-warning]btn-warning [/container]
[container: btn btn-danger]btn-danger [/container]
[container: btn btn-link]btn-link [/container]


 


 

BUTTON GROUP


Pudding
Bonbon
Candy

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




BADGE

ice cream count 5
[section: badge]5[/section]




Label


danish NEW
[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.
primary
success
info
warning
danger



PROGRESS BAR

% by 5s


WA Code


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


CSS
Ran's brilliance to make the percentages a class so we can use them in the container call

.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


Panel Heading
9 candy canes
10 peppermints

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




BREADCRUMBS


I saw Oneriwien's example of this one. So giving credit where credit is due.

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




List Group


First itemSecond itemThird item
[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]




NAV BAR



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


Comments

Please Login in order to comment!
16 Dec, 2019 16:55

I was just looking for some sort of examples for what I can do with containers, and suddenly this appears in my notification box! Thank you so much for making this, this is wonderful and exactly what I needed :)   Your effort is incredibly appreciated!

Cathedris, the world of God-Husks and New Magic, welcomes you.
16 Dec, 2019 17:01

Awesome! I hope it helps! You also might want to check out CSS. There are several in those articles too.

Author of the upcoming book Rise: Liminal Chronicles |
16 Dec, 2019 17:06

Following this world was one of the best decisions I've made! Thanks again :)

Cathedris, the world of God-Husks and New Magic, welcomes you.
Powered by World Anvil