diff --git a/README.md b/README.md
index adf4140..4a3144d 100644
--- a/README.md
+++ b/README.md
@@ -14,17 +14,27 @@ It's an extension! **BootstrapExtended** is a library that contains certain HTML
 
   ![Combobox-expanded](./screenshots/Select-Expanded.png?raw=true)
   
-  ✔️ Checkboxes - Testing
+  ✔️ Checkboxes - Ready
   
   ![Checkboxes](./screenshots/Checkboxes-NotChecked.png?raw=true)
 
-  ✔️ Radio buttons - To be started
+  ✔️ Radio buttons - Ready
 
   ![Radio](./screenshots/Radio.png?raw=true)
 
   ![Radio2](./screenshots/Radio-NoText.png?raw=true)
 
   ![Radio3](./screenshots/Radio-Block.png?raw=true)
+
+  ✔️ Switch - Ready
+
+  ![Radio](./screenshots/Switch-On.png?raw=true)
+
+  ![Radio2](./screenshots/Switch-Off.png?raw=true)
+
+  ✔️ Callouts - Ready
+
+  ![Radio](./screenshots/Callouts.png?raw=true)
   
 ## Development
 
diff --git a/lib/bootstrap-extended.css b/lib/bootstrap-extended.css
index b0395e0..2bbeff9 100644
--- a/lib/bootstrap-extended.css
+++ b/lib/bootstrap-extended.css
@@ -17,7 +17,7 @@
   width: 0;
 }
 
-.checkmark-primary {
+.checkmark {
   position: absolute;
   top: 0;
   left: 0;
@@ -28,25 +28,25 @@
   outline: 0;
 }
 
-.be-ch-countainer-primary:hover input ~ .checkmark-primary {
+.be-ch-countainer-primary:hover input ~ .checkmark {
   background-color: #ccc;
 }
 
-.be-ch-countainer-primary input:checked ~ .checkmark-primary {
+.be-ch-countainer-primary input:checked ~ .checkmark {
   background-color: #007bff;
 }
 
-.checkmark-primary:after {
+.checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }
 
-.be-ch-countainer-primary input:checked ~ .checkmark-primary:after {
+.be-ch-countainer-primary input:checked ~ .checkmark:after {
   display: block;
 }
 
-.be-ch-countainer-primary .checkmark-primary:after {
+.be-ch-countainer-primary .checkmark:after {
   left: 7px;
   top: 4px;
   width: 3px;
@@ -77,7 +77,7 @@
   width: 0;
 }
 
-.checkmark-danger {
+.checkmark {
   position: absolute;
   top: 0;
   left: 0;
@@ -88,25 +88,25 @@
   outline: 0;
 }
 
-.be-ch-countainer-danger:hover input ~ .checkmark-danger {
+.be-ch-countainer-danger:hover input ~ .checkmark {
   background-color: #ccc;
 }
 
-.be-ch-countainer-danger input:checked ~ .checkmark-danger {
+.be-ch-countainer-danger input:checked ~ .checkmark {
   background-color: #dc3545;
 }
 
-.checkmark-danger:after {
+.checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }
 
-.be-ch-countainer-danger input:checked ~ .checkmark-danger:after {
+.be-ch-countainer-danger input:checked ~ .checkmark:after {
   display: block;
 }
 
-.be-ch-countainer-danger .checkmark-danger:after {
+.be-ch-countainer-danger .checkmark:after {
   left: 7px;
   top: 4px;
   width: 3px;
@@ -137,7 +137,7 @@
   width: 0;
 }
 
-.checkmark-warning {
+.checkmark {
   position: absolute;
   top: 0;
   left: 0;
@@ -148,25 +148,25 @@
   outline: 0;
 }
 
-.be-ch-countainer-warning:hover input ~ .checkmark-warning {
+.be-ch-countainer-warning:hover input ~ .checkmark {
   background-color: #ccc;
 }
 
-.be-ch-countainer-warning input:checked ~ .checkmark-warning {
+.be-ch-countainer-warning input:checked ~ .checkmark {
   background-color: #ffc107;
 }
 
-.checkmark-warning:after {
+.checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }
 
-.be-ch-countainer-warning input:checked ~ .checkmark-warning:after {
+.be-ch-countainer-warning input:checked ~ .checkmark:after {
   display: block;
 }
 
-.be-ch-countainer-warning .checkmark-warning:after {
+.be-ch-countainer-warning .checkmark:after {
   left: 7px;
   top: 4px;
   width: 3px;
@@ -197,7 +197,7 @@
   width: 0;
 }
 
-.checkmark-info {
+.checkmark {
   position: absolute;
   top: 0;
   left: 0;
@@ -208,25 +208,25 @@
   outline: 0;
 }
 
-.be-ch-countainer-info:hover input ~ .checkmark-info {
+.be-ch-countainer-info:hover input ~ .checkmark {
   background-color: #ccc;
 }
 
-.be-ch-countainer-info input:checked ~ .checkmark-info {
+.be-ch-countainer-info input:checked ~ .checkmark {
   background-color: #17a2b8;
 }
 
-.checkmark-info:after {
+.checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }
 
-.be-ch-countainer-info input:checked ~ .checkmark-info:after {
+.be-ch-countainer-info input:checked ~ .checkmark:after {
   display: block;
 }
 
-.be-ch-countainer-info .checkmark-info:after {
+.be-ch-countainer-info .checkmark:after {
   left: 7px;
   top: 4px;
   width: 3px;
@@ -257,7 +257,7 @@
   width: 0;
 }
 
-.checkmark-success {
+.checkmark {
   position: absolute;
   top: 0;
   left: 0;
@@ -268,25 +268,25 @@
   outline: 0;
 }
 
-.be-ch-countainer-success:hover input ~ .checkmark-success {
+.be-ch-countainer-success:hover input ~ .checkmark {
   background-color: #ccc;
 }
 
-.be-ch-countainer-success input:checked ~ .checkmark-success {
+.be-ch-countainer-success input:checked ~ .checkmark {
   background-color: #28a745;
 }
 
-.checkmark-success:after {
+.checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }
 
-.be-ch-countainer-success input:checked ~ .checkmark-success:after {
+.be-ch-countainer-success input:checked ~ .checkmark:after {
   display: block;
 }
 
-.be-ch-countainer-success .checkmark-success:after {
+.be-ch-countainer-success .checkmark:after {
   left: 7px;
   top: 4px;
   width: 3px;
@@ -317,7 +317,7 @@
   width: 0;
 }
 
-.checkmark-secondary {
+.checkmark {
   position: absolute;
   top: 0;
   left: 0;
@@ -328,25 +328,25 @@
   outline: 0;
 }
 
-.be-ch-countainer-secondary:hover input ~ .checkmark-secondary {
+.be-ch-countainer-secondary:hover input ~ .checkmark {
   background-color: #ccc;
 }
 
-.be-ch-countainer-secondary input:checked ~ .checkmark-secondary {
+.be-ch-countainer-secondary input:checked ~ .checkmark {
   background-color: #6c757d;
 }
 
-.checkmark-secondary:after {
+.checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }
 
-.be-ch-countainer-secondary input:checked ~ .checkmark-secondary:after {
+.be-ch-countainer-secondary input:checked ~ .checkmark:after {
   display: block;
 }
 
-.be-ch-countainer-secondary .checkmark-secondary:after {
+.be-ch-countainer-secondary .checkmark:after {
   left: 7px;
   top: 4px;
   width: 3px;
@@ -376,7 +376,7 @@
   cursor: pointer;
 }
 
-.be-ra-checkmark-primary {
+.be-ra-checkmark {
   position: absolute;
   top: 0;
   left: 0;
@@ -386,25 +386,25 @@
   border-radius: 50%;
 }
 
-.be-ra-container-primary:hover input ~ .be-ra-checkmark-primary {
+.be-ra-container-primary:hover input ~ .be-ra-checkmark {
   background-color: #ccc;
 }
 
-.be-ra-container-primary input:checked ~ .be-ra-checkmark-primary {
+.be-ra-container-primary input:checked ~ .be-ra-checkmark {
   background-color: #007bff;
 }
 
-.be-ra-checkmark-primary:after {
+.be-ra-checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }
 
-.be-ra-container-primary input:checked ~ .be-ra-checkmark-primary:after {
+.be-ra-container-primary input:checked ~ .be-ra-checkmark:after {
   display: block;
 }
 
-.be-ra-container-primary .be-ra-checkmark-primary:after {
+.be-ra-container-primary .be-ra-checkmark:after {
   top: 7px;
   left: 7px;
   width: 6px;
@@ -431,7 +431,7 @@
   cursor: pointer;
 }
 
-.be-ra-checkmark-danger {
+.be-ra-checkmark {
   position: absolute;
   top: 0;
   left: 0;
@@ -441,25 +441,25 @@
   border-radius: 50%;
 }
 
-.be-ra-container-danger:hover input ~ .be-ra-checkmark-danger {
+.be-ra-container-danger:hover input ~ .be-ra-checkmark {
   background-color: #ccc;
 }
 
-.be-ra-container-danger input:checked ~ .be-ra-checkmark-danger {
+.be-ra-container-danger input:checked ~ .be-ra-checkmark {
   background-color: #dc3545;
 }
 
-.be-ra-checkmark-danger:after {
+.be-ra-checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }
 
-.be-ra-container-danger input:checked ~ .be-ra-checkmark-danger:after {
+.be-ra-container-danger input:checked ~ .be-ra-checkmark:after {
   display: block;
 }
 
-.be-ra-container-danger .be-ra-checkmark-danger:after {
+.be-ra-container-danger .be-ra-checkmark:after {
   top: 7px;
   left: 7px;
   width: 6px;
@@ -486,7 +486,7 @@
   cursor: pointer;
 }
 
-.be-ra-checkmark-warning {
+.be-ra-checkmark {
   position: absolute;
   top: 0;
   left: 0;
@@ -496,25 +496,25 @@
   border-radius: 50%;
 }
 
-.be-ra-container-warning:hover input ~ .be-ra-checkmark-warning {
+.be-ra-container-warning:hover input ~ .be-ra-checkmark {
   background-color: #ccc;
 }
 
-.be-ra-container-warning input:checked ~ .be-ra-checkmark-warning {
+.be-ra-container-warning input:checked ~ .be-ra-checkmark {
   background-color: #ffc107;
 }
 
-.be-ra-checkmark-warning:after {
+.be-ra-checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }
 
-.be-ra-container-warning input:checked ~ .be-ra-checkmark-warning:after {
+.be-ra-container-warning input:checked ~ .be-ra-checkmark:after {
   display: block;
 }
 
-.be-ra-container-warning .be-ra-checkmark-warning:after {
+.be-ra-container-warning .be-ra-checkmark:after {
   top: 7px;
   left: 7px;
   width: 6px;
@@ -541,7 +541,7 @@
   cursor: pointer;
 }
 
-.be-ra-checkmark-info {
+.be-ra-checkmark {
   position: absolute;
   top: 0;
   left: 0;
@@ -551,25 +551,25 @@
   border-radius: 50%;
 }
 
-.be-ra-container-info:hover input ~ .be-ra-checkmark-info {
+.be-ra-container-info:hover input ~ .be-ra-checkmark {
   background-color: #ccc;
 }
 
-.be-ra-container-info input:checked ~ .be-ra-checkmark-info {
+.be-ra-container-info input:checked ~ .be-ra-checkmark {
   background-color: #17a2b8;
 }
 
-.be-ra-checkmark-info:after {
+.be-ra-checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }
 
-.be-ra-container-info input:checked ~ .be-ra-checkmark-info:after {
+.be-ra-container-info input:checked ~ .be-ra-checkmark:after {
   display: block;
 }
 
-.be-ra-container-info .be-ra-checkmark-info:after {
+.be-ra-container-info .be-ra-checkmark:after {
   top: 7px;
   left: 7px;
   width: 6px;
@@ -596,7 +596,7 @@
   cursor: pointer;
 }
 
-.be-ra-checkmark-success {
+.be-ra-checkmark {
   position: absolute;
   top: 0;
   left: 0;
@@ -606,25 +606,25 @@
   border-radius: 50%;
 }
 
-.be-ra-container-success:hover input ~ .be-ra-checkmark-success {
+.be-ra-container-success:hover input ~ .be-ra-checkmark {
   background-color: #ccc;
 }
 
-.be-ra-container-success input:checked ~ .be-ra-checkmark-success {
+.be-ra-container-success input:checked ~ .be-ra-checkmark {
   background-color: #28a745;
 }
 
-.be-ra-checkmark-success:after {
+.be-ra-checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }
 
-.be-ra-container-success input:checked ~ .be-ra-checkmark-success:after {
+.be-ra-container-success input:checked ~ .be-ra-checkmark:after {
   display: block;
 }
 
-.be-ra-container-success .be-ra-checkmark-success:after {
+.be-ra-container-success .be-ra-checkmark:after {
   top: 7px;
   left: 7px;
   width: 6px;
@@ -651,7 +651,7 @@
   cursor: pointer;
 }
 
-.be-ra-checkmark-secondary {
+.be-ra-checkmark {
   position: absolute;
   top: 0;
   left: 0;
@@ -661,25 +661,25 @@
   border-radius: 50%;
 }
 
-.be-ra-container-secondary:hover input ~ .be-ra-checkmark-secondary {
+.be-ra-container-secondary:hover input ~ .be-ra-checkmark {
   background-color: #ccc;
 }
 
-.be-ra-container-secondary input:checked ~ .be-ra-checkmark-secondary {
+.be-ra-container-secondary input:checked ~ .be-ra-checkmark {
   background-color: #6c757d;
 }
 
-.be-ra-checkmark-secondary:after {
+.be-ra-checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }
 
-.be-ra-container-secondary input:checked ~ .be-ra-checkmark-secondary:after {
+.be-ra-container-secondary input:checked ~ .be-ra-checkmark:after {
   display: block;
 }
 
-.be-ra-container-secondary .be-ra-checkmark-secondary:after {
+.be-ra-container-secondary .be-ra-checkmark:after {
   top: 7px;
   left: 7px;
   width: 6px;
@@ -763,4 +763,179 @@
   display: block;
 }
 
+.switch {
+  font-size: 0.8rem;
+  position: relative;
+}
+.switch input {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  background: none;
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  padding: 0;
+}
+.switch input + label {
+  position: relative;
+  min-width: calc(calc(2.375rem * .6) * 2);
+  border-radius: calc(2.375rem * .6);
+  height: calc(2.375rem * .6);
+  line-height: calc(2.375rem * .6);
+  display: inline-block;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  vertical-align: middle;
+  text-indent: calc(calc(calc(2.375rem * .6) * 2) + .5rem);
+}
+.switch input + label::before,
+.switch input + label::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(calc(2.375rem * .6) * 2);
+  bottom: 0;
+  display: block;
+}
+.switch input + label::before {
+  right: 0;
+  background-color: #dee2e6;
+  border-radius: calc(2.375rem * .6);
+  transition: 0.2s all;
+}
+.switch input + label::after {
+  top: 2px;
+  left: 2px;
+  width: calc(calc(2.375rem * .6) - calc(2px * 2));
+  height: calc(calc(2.375rem * .6) - calc(2px * 2));
+  border-radius: 50%;
+  background-color: white;
+  transition: 0.2s all;
+}
+.switch input:checked + label::before {
+  background-color: #007bff;
+}
+.switch input:checked + label::after {
+  margin-left: calc(2.375rem * .6);
+}
+.switch input:focus + label::before {
+  outline: none;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+.switch input:disabled + label {
+  color: #868e96;
+  cursor: not-allowed;
+}
+.switch input:disabled + label::before {
+  background-color: #e9ecef;
+}
+.switch.switch-sm {
+  font-size: 0.7rem;
+}
+.switch.switch-sm input + label {
+  min-width: calc(calc(1.9375rem * .6) * 2);
+  height: calc(1.9375rem * .6);
+  line-height: calc(1.9375rem * .6);
+  text-indent: calc(calc(calc(1.9375rem * .6) * 2) + .5rem);
+}
+.switch.switch-sm input + label::before {
+  width: calc(calc(1.9375rem * .6) * 2);
+}
+.switch.switch-sm input + label::after {
+  width: calc(calc(1.9375rem * .6) - calc(2px * 2));
+  height: calc(calc(1.9375rem * .6) - calc(2px * 2));
+}
+.switch.switch-sm input:checked + label::after {
+  margin-left: calc(1.9375rem * .6);
+}
+.switch.switch-lg {
+  font-size: 1rem;
+}
+.switch.switch-lg input + label {
+  min-width: calc(calc(3rem * .6) * 2);
+  height: calc(3rem * .6);
+  line-height: calc(3rem * .6);
+  text-indent: calc(calc(calc(3rem * .6) * 2) + .5rem);
+}
+.switch.switch-lg input + label::before {
+  width: calc(calc(3rem * .6) * 2);
+}
+.switch.switch-lg input + label::after {
+  width: calc(calc(3rem * .6) - calc(2px * 2));
+  height: calc(calc(3rem * .6) - calc(2px * 2));
+}
+.switch.switch-lg input:checked + label::after {
+  margin-left: calc(3rem * .6);
+}
+.switch + .switch {
+  margin-left: 1rem;
+}
+
+.callout {
+  padding: 20px;
+  margin: 20px 0;
+  border: 1px solid #eee;
+  border-left-width: 5px;
+  border-radius: 3px;
+}
+.callout h4 {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+.callout p:last-child {
+  margin-bottom: 0;
+}
+.callout code {
+  border-radius: 3px;
+}
+.callout + .bs-callout {
+  margin-top: -5px;
+}
+
+.callout-primary {
+  border-left-color: #007bff;
+}
+.callout-primary h4 {
+  color: #007bff;
+}
+
+.callout-danger {
+  border-left-color: #dc3545;
+}
+.callout-danger h4 {
+  color: #dc3545;
+}
+
+.callout-warning {
+  border-left-color: #ffc107;
+}
+.callout-warning h4 {
+  color: #ffc107;
+}
+
+.callout-info {
+  border-left-color: #17a2b8;
+}
+.callout-info h4 {
+  color: #17a2b8;
+}
+
+.callout-success {
+  border-left-color: #28a745;
+}
+.callout-success h4 {
+  color: #28a745;
+}
+
+.callout-secondary {
+  border-left-color: #6c757d;
+}
+.callout-secondary h4 {
+  color: #6c757d;
+}
+
 /*# sourceMappingURL=bootstrap-extended.css.map */
diff --git a/lib/bootstrap-extended.css.map b/lib/bootstrap-extended.css.map
index c373f1b..153c614 100644
--- a/lib/bootstrap-extended.css.map
+++ b/lib/bootstrap-extended.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["bootstrap-extended.scss","theme.scss"],"names":[],"mappings":"AAII;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBClBN;;;ADqBE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBClBN;;;ADqBE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBClBN;;;ADqBE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBClBN;;;ADqBE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBClBN;;;ADqBE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBClBN;;;ADqBE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBChFN;;;ADmFE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBChFN;;;ADmFE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBChFN;;;ADmFE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBChFN;;;ADmFE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBChFN;;;ADmFE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBChFN;;;ADmFE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AAOZ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;AACA;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAKJ;EACI","file":"bootstrap-extended.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["bootstrap-extended.scss","theme.scss"],"names":[],"mappings":"AAII;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBCiBN;;;ADdE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBCiBN;;;ADdE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBCiBN;;;ADdE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBCiBN;;;ADdE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBCiBN;;;ADdE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBCiBN;;;ADdE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBC7CN;;;ADgDE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBC7CN;;;ADgDE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBC7CN;;;ADgDE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBC7CN;;;ADgDE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBC7CN;;;ADgDE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBC7CN;;;ADgDE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AAOZ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;AACA;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAKJ;EACI;;;AAIJ;EACE,WCzLe;ED0Lf;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,eCtLU;EDuLV,QCvLU;EDwLV,aCxLU;EDyLV;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA,kBC3NwB;ED4NxB,eC/MU;EDgNV,YCpMc;;ADuMhB;EACE,KC1MiB;ED2MjB,MC3MiB;ED4MjB;EACA;EACA,eC/MuB;EDgNvB,kBCnOE;EDoOF,YC9Mc;;ADiNhB;EACE,kBCzNc;;AD4NhB;EACE,aClOU;;ADqOZ;EACE;EACA,YC5NoB;;AD+NtB;EACE,OCtPsC;EDuPtC;;AAGF;EACE,kBC5PiC;;ADgQrC;EACE,WCvQW;;AD0QT;EACE;EACA,QCzPW;ED0PX,aC1PW;ED2PX;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE,aCxQW;;AD6QjB;EACE,WClSW;;ADqST;EACE;EACA,QClRW;EDmRX,aCnRW;EDoRX;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE,aCjSW;;ADsSjB;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;;AAIF;EACE,mBCrTF;;ADsTE;EACE,OCvTJ;;;ADoTA;EACE,mBCrTF;;ADsTE;EACE,OCvTJ;;;ADoTA;EACE,mBCrTF;;ADsTE;EACE,OCvTJ;;;ADoTA;EACE,mBCrTF;;ADsTE;EACE,OCvTJ;;;ADoTA;EACE,mBCrTF;;ADsTE;EACE,OCvTJ;;;ADoTA;EACE,mBCrTF;;ADsTE;EACE,OCvTJ","file":"bootstrap-extended.css"}
\ No newline at end of file
diff --git a/lib/bootstrap-extended.scss b/lib/bootstrap-extended.scss
index 1a06a98..d1b46ef 100644
--- a/lib/bootstrap-extended.scss
+++ b/lib/bootstrap-extended.scss
@@ -21,7 +21,7 @@
         width: 0;
     }
 
-    .checkmark-#{$name} {
+    .checkmark {
         position: absolute;
         top: 0;
         left: 0;
@@ -36,25 +36,25 @@
         // }
     }
 
-    .be-ch-countainer-#{$name}:hover input ~ .checkmark-#{$name} {
+    .be-ch-countainer-#{$name}:hover input ~ .checkmark {
         background-color: #ccc;
     }
 
-    .be-ch-countainer-#{$name} input:checked ~ .checkmark-#{$name} {
+    .be-ch-countainer-#{$name} input:checked ~ .checkmark {
         background-color: $color;
     }
 
-    .checkmark-#{$name}:after {
+    .checkmark:after {
         content: "";
         position: absolute;
         display: none;
     }
 
-    .be-ch-countainer-#{$name} input:checked ~ .checkmark-#{$name}:after {
+    .be-ch-countainer-#{$name} input:checked ~ .checkmark:after {
         display: block;
     }
 
-    .be-ch-countainer-#{$name} .checkmark-#{$name}:after {
+    .be-ch-countainer-#{$name} .checkmark:after {
         left: 7px;
         top: 4px;
         width: 3px;
@@ -88,7 +88,7 @@
         cursor: pointer;
     }
 
-    .be-ra-checkmark-#{$name} {
+    .be-ra-checkmark {
         position: absolute;
         top: 0;
         left: 0;
@@ -98,25 +98,25 @@
         border-radius: 50%;
     }
 
-    .be-ra-container-#{$name}:hover input ~ .be-ra-checkmark-#{$name} {
+    .be-ra-container-#{$name}:hover input ~ .be-ra-checkmark {
         background-color: #ccc;
     }
 
-    .be-ra-container-#{$name} input:checked ~ .be-ra-checkmark-#{$name} {
+    .be-ra-container-#{$name} input:checked ~ .be-ra-checkmark {
         background-color: $color;
     }
 
-    .be-ra-checkmark-#{$name}:after {
+    .be-ra-checkmark:after {
         content: "";
         position: absolute;
         display: none;
     }
 
-    .be-ra-container-#{$name} input:checked ~ .be-ra-checkmark-#{$name}:after {
+    .be-ra-container-#{$name} input:checked ~ .be-ra-checkmark:after {
         display: block;
     }
 
-    .be-ra-container-#{$name} .be-ra-checkmark-#{$name}:after {
+    .be-ra-container-#{$name} .be-ra-checkmark:after {
             top: 7px;
             left: 7px;
             width: 6px;
@@ -206,3 +206,170 @@
     display: block;
 }
 
+//switch - credits to kemie
+.switch {
+  font-size: $font-size-base;
+  position: relative;
+
+  input {
+    position: absolute;
+    height: 1px;
+    width: 1px;
+    background: none;
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    overflow: hidden;
+    padding: 0;
+
+    + label {
+      position: relative;
+      min-width: calc(#{$switch-height} * 2);
+      border-radius: $switch-border-radius;
+      height: $switch-height;
+      line-height: $switch-height;
+      display: inline-block;
+      cursor: pointer;
+      outline: none;
+      user-select: none;
+      vertical-align: middle;
+      text-indent: calc(calc(#{$switch-height} * 2) + .5rem);
+    }
+
+    + label::before,
+    + label::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: calc(#{$switch-height} * 2);
+      bottom: 0;
+      display: block;
+    }
+
+    + label::before {
+      right: 0;
+      background-color: $switch-bg;
+      border-radius: $switch-border-radius;
+      transition: $switch-transition;
+    }
+
+    + label::after {
+      top: $switch-thumb-padding;
+      left: $switch-thumb-padding;
+      width: calc(#{$switch-height} - calc(#{$switch-thumb-padding} * 2));
+      height: calc(#{$switch-height} - calc(#{$switch-thumb-padding} * 2));
+      border-radius: $switch-thumb-border-radius;
+      background-color: $switch-thumb-bg;
+      transition: $switch-transition;
+    }
+
+    &:checked + label::before {
+      background-color: $switch-checked-bg;
+    }
+
+    &:checked + label::after {
+      margin-left: $switch-height;
+    }
+
+    &:focus + label::before {
+      outline: none;
+      box-shadow: $switch-focus-box-shadow;
+    }
+
+    &:disabled + label {
+      color: $switch-disabled-color;
+      cursor: not-allowed;
+    }
+
+    &:disabled + label::before {
+      background-color: $switch-disabled-bg;
+    }
+  }
+
+  &.switch-sm {
+    font-size: $font-size-sm;
+
+    input {
+      + label {
+        min-width: calc(#{$switch-height-sm} * 2);
+        height: $switch-height-sm;
+        line-height: $switch-height-sm;
+        text-indent: calc(calc(#{$switch-height-sm} * 2) + .5rem);
+      }
+
+      + label::before {
+        width: calc(#{$switch-height-sm} * 2);
+      }
+
+      + label::after {
+        width: calc(#{$switch-height-sm} - calc(#{$switch-thumb-padding} * 2));
+        height: calc(#{$switch-height-sm} - calc(#{$switch-thumb-padding} * 2));
+      }
+
+      &:checked + label::after {
+        margin-left: $switch-height-sm;
+      }
+    }
+  }
+
+  &.switch-lg {
+    font-size: $font-size-lg;
+
+    input {
+      + label {
+        min-width: calc(#{$switch-height-lg} * 2);
+        height: $switch-height-lg;
+        line-height: $switch-height-lg;
+        text-indent: calc(calc(#{$switch-height-lg} * 2) + .5rem);
+      }
+
+      + label::before {
+        width: calc(#{$switch-height-lg} * 2);
+      }
+
+      + label::after {
+        width: calc(#{$switch-height-lg} - calc(#{$switch-thumb-padding} * 2));
+        height: calc(#{$switch-height-lg} - calc(#{$switch-thumb-padding} * 2));
+      }
+
+      &:checked + label::after {
+        margin-left: $switch-height-lg;
+      }
+    }
+  }
+
+  + .switch {
+    margin-left: 1rem;
+  }
+}
+
+// Callout
+.callout {
+  padding: 20px;
+  margin: 20px 0;
+  border: 1px solid #eee;
+  border-left-width: 5px;
+  border-radius: 3px;
+  h4 {
+    margin-top: 0;
+    margin-bottom: 5px;
+  }
+  p:last-child {
+    margin-bottom: 0;
+  }
+  code {
+    border-radius: 3px;
+  }
+  & + .bs-callout {
+    margin-top: -5px;
+  }
+}
+@each $name,$color in $colors {
+  .callout-#{$name} {
+    border-left-color: $color;
+    h4 {
+      color: $color;
+    }
+  }
+}
\ No newline at end of file
diff --git a/lib/theme.scss b/lib/theme.scss
index d9038de..b7fe22a 100644
--- a/lib/theme.scss
+++ b/lib/theme.scss
@@ -22,6 +22,41 @@ $light: #f8f9fa;
 $combo-border: #000000;
 $dark: #343a40;
 
+//Switch
+$font-size-base: .8rem;
+$font-size-lg: ($font-size-base * 1.25);
+$font-size-sm: ($font-size-base * .875);
+$input-height: 2.375rem;
+$input-height-sm: 1.9375rem;
+$input-height-lg: 3rem;
+$input-btn-focus-width: .2rem;
+$custom-control-indicator-bg: #dee2e6;
+$custom-control-indicator-disabled-bg: #e9ecef;
+$custom-control-description-disabled-color: #868e96;
+$white: white;
+$theme-colors: (
+  "primary": $primary,
+  "danger": $danger,
+  "warning": $warning,
+  "info": $info,
+  "success": $success,
+  "secondary": $secondary
+);
+
+$switch-height: calc(#{$input-height} * .6) !default;
+$switch-height-sm: calc(#{$input-height-sm} * .6) !default;
+$switch-height-lg: calc(#{$input-height-lg} * .6) !default;
+$switch-border-radius: $switch-height !default;
+$switch-bg: $custom-control-indicator-bg !default;
+$switch-checked-bg: map-get($theme-colors, 'primary') !default;
+$switch-disabled-bg: $custom-control-indicator-disabled-bg !default;
+$switch-disabled-color: $custom-control-description-disabled-color !default;
+$switch-thumb-bg: $white !default;
+$switch-thumb-border-radius: 50% !default;
+$switch-thumb-padding: 2px !default;
+$switch-focus-box-shadow: 0 0 0 $input-btn-focus-width rgba(map-get($theme-colors, 'primary'), .25);
+$switch-transition: .2s all !default;
+
 $colors:
   "primary" $primary,
   "danger" $danger,
diff --git a/screenshots/Callouts.png b/screenshots/Callouts.png
new file mode 100644
index 0000000..4458802
Binary files /dev/null and b/screenshots/Callouts.png differ
diff --git a/screenshots/Switch-Off.png b/screenshots/Switch-Off.png
new file mode 100644
index 0000000..1ac456b
Binary files /dev/null and b/screenshots/Switch-Off.png differ
diff --git a/screenshots/Switch-On.png b/screenshots/Switch-On.png
new file mode 100644
index 0000000..f54118f
Binary files /dev/null and b/screenshots/Switch-On.png differ
diff --git a/showcase/testing.html b/showcase/testing.html
index 8cc177c..bbbbe27 100644
--- a/showcase/testing.html
+++ b/showcase/testing.html
@@ -12,78 +12,78 @@
 </style>
 <label class="be-ch-countainer-primary">Primary
     <input type="checkbox" checked="checked">
-    <span class="checkmark-primary"></span>
+    <span class="checkmark"></span>
 </label>
 <label class="be-ch-countainer-warning">Warning
     <input type="checkbox" checked="checked">
-    <span class="checkmark-warning"></span>
+    <span class="checkmark"></span>
 </label>
 <label class="be-ch-countainer-danger">Danger
     <input type="checkbox" checked="checked">
-    <span class="checkmark-danger"></span>
+    <span class="checkmark"></span>
 </label>
 <label class="be-ch-countainer-success">Success
     <input type="checkbox" checked="checked">
-    <span class="checkmark-success"></span>
+    <span class="checkmark"></span>
 </label>
 <label class="be-ch-countainer-info">Info
     <input type="checkbox" checked="checked">
-    <span class="checkmark-info"></span>
+    <span class="checkmark"></span>
 </label>
 
 <label class="be-ch-countainer-primary">
     <input type="checkbox" checked="checked">
-    <span class="checkmark-primary"></span>
+    <span class="checkmark"></span>
 </label>
 <label class="be-ch-countainer-warning">
     <input type="checkbox" checked="checked">
-    <span class="checkmark-warning"></span>
+    <span class="checkmark"></span>
 </label>
 <label class="be-ch-countainer-danger">
     <input type="checkbox" checked="checked">
-    <span class="checkmark-danger"></span>
+    <span class="checkmark"></span>
 </label>
 <label class="be-ch-countainer-success">
     <input type="checkbox" checked="checked">
-    <span class="checkmark-success"></span>
+    <span class="checkmark"></span>
 </label>
 <label class="be-ch-countainer-info">
     <input type="checkbox" checked="checked">
-    <span class="checkmark-info"></span>
+    <span class="checkmark"></span>
 </label>
 
 <label class="be-ra-container-danger" style="margin-top: 1rem;">One
     <input type="radio" checked="checked" name="radio">
-    <span class="be-ra-checkmark-danger"></span>
+    <span class="be-ra-checkmark"></span>
 </label>
 <label class="be-ra-container-warning">Two
     <input type="radio" name="radio">
-    <span class="be-ra-checkmark-warning"></span>
+    <span class="be-ra-checkmark"></span>
 </label>
 <label class="be-ra-container-primary">Three
     <input type="radio" name="radio">
-    <span class="be-ra-checkmark-primary"></span>
+    <span class="be-ra-checkmark"></span>
 </label>
 <label class="be-ra-container-info">Four
     <input type="radio" name="radio">
-    <span class="be-ra-checkmark-info"></span>
+    <span class="be-ra-checkmark"></span>
 </label>
 
 <label class="be-ra-container-danger">
     <input type="radio" checked="checked" name="radio">
-    <span class="be-ra-checkmark-danger"></span>
+    <span class="be-ra-checkmark"></span>
 </label>
 <label class="be-ra-container-warning">
     <input type="radio" name="radio">
-    <span class="be-ra-checkmark-warning"></span>
+    <span class="be-ra-checkmark"></span>
 </label>
 <label class="be-ra-container-primary">
     <input type="radio" name="radio">
-    <span class="be-ra-checkmark-primary"></span>
+    <span class="be-ra-checkmark"></span>
 </label>
 <label class="be-ra-container-info">
     <input type="radio" name="radio">
-    <span class="be-ra-checkmark-info"></span>
+    <span class="be-ra-checkmark"></span>
 </label>
 
 <div class="be-select" style="width:200px;">
@@ -104,5 +104,36 @@
     </select>
 </div>
 
+<span class="switch">
+    <label>A</label>
+    <input type="checkbox" class="switch" id="switch-id" checked>
+    <label for="switch-id">B</label>
+</span>
+<br/>
+<div class="callout callout-primary" style="max-width: 12rem; display: inline-block; margin-right: .3rem;">
+    <h4>Primary Callout</h4>
+    This is a default callout.
+</div>
+<div class="callout callout-success" style="max-width: 12rem; display: inline-block; margin-right: .3rem;">
+    <h4>Success Callout</h4>
+    This is a default callout.
+</div>
+<div class="callout callout-danger" style="max-width: 12rem; display: inline-block; margin-right: .3rem;">
+    <h4>Danger Callout</h4>
+    This is a default callout.
+</div>
+<div class="callout callout-warning" style="max-width: 12rem; display: inline-block; margin-right: .3rem;">
+    <h4>Warning Callout</h4>
+    This is a default callout.
+</div>
+<div class="callout callout-info" style="max-width: 12rem; display: inline-block; margin-right: .3rem;">
+    <h4>Info Callout</h4>
+    This is a default callout.
+</div>
+<div class="callout callout-secondary" style="max-width: 12rem; display: inline-block; margin-right: .3rem;">
+    <h4>Secoundary Callout</h4>
+    This is a default callout.
+</div>
+
 <script src="./../lib/bootstrap-extended.js"></script>
 <body>
\ No newline at end of file