diff --git a/snippets/bootstrap/components/alert/additional-content.html b/snippets/bootstrap/components/alert/additional-content.html
index 525483b..183ba8d 100644
--- a/snippets/bootstrap/components/alert/additional-content.html
+++ b/snippets/bootstrap/components/alert/additional-content.html
@@ -1,5 +1,5 @@
-<div class="alert alert-success" role="alert">
-  <h4 class="alert-heading">$1</h4>
-  <p>$2</p>
-  <p class="mb-0">$3</p>
+<div class="alert ${1:alert-primary|alert-secondary|alert-success|alert-danger|alert-warning|alert-info|alert-light|alert-dark}" role="alert">
+  <h4 class="alert-heading">${2:Heading}</h4>
+  <p>${3: Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, in provident iure alias blanditiis officia vel natus beatae. Cumque, pariatur!}</p>
+  <p class="mb-0">${4: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea, tempora?}</p>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/alert/closable.html b/snippets/bootstrap/components/alert/closable.html
index 57b6ae9..38abda6 100644
--- a/snippets/bootstrap/components/alert/closable.html
+++ b/snippets/bootstrap/components/alert/closable.html
@@ -1,8 +1,8 @@
-<div class="alert alert-warning alert-dismissible fade show" role="alert">
+<div class="alert ${1:alert-primary|alert-secondary|alert-success|alert-danger|alert-warning|alert-info|alert-light|alert-dark} alert-dismissible fade show" role="alert">
   <button type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true">&times;</span>
   </button>
-  <strong>$1</strong> $2
+  <strong>${1:words}</strong> ${2:words}
 </div>
 
 <script>
diff --git a/snippets/bootstrap/components/alert/default.html b/snippets/bootstrap/components/alert/default.html
index ce6a351..f040eed 100644
--- a/snippets/bootstrap/components/alert/default.html
+++ b/snippets/bootstrap/components/alert/default.html
@@ -1,3 +1,3 @@
-<div class="alert alert-${1:primary|secondary|success|danger|warning|info|light|dark}" role="alert">
-	<strong>${1:Check it out!}</strong>$2
+<div class="alert ${1:alert-primary|alert-secondary|alert-success|alert-danger|alert-warning|alert-info|alert-light|alert-dark}" role="alert">
+	<strong>${2:Check it out!}</strong>${3:words}
 </div>
diff --git a/snippets/bootstrap/components/alert/dismissible.html b/snippets/bootstrap/components/alert/dismissible.html
index 2d493ad..3a9fd26 100644
--- a/snippets/bootstrap/components/alert/dismissible.html
+++ b/snippets/bootstrap/components/alert/dismissible.html
@@ -1,7 +1,7 @@
-<div class="alert alert-${2:primary|secondary|success|info|warning|danger|light|dark} alert-dismissible fade show" role="alert">
+<div class="alert ${1:alert-primary|alert-secondary|alert-success|alert-danger|alert-warning|alert-info|alert-light|alert-dark} alert-dismissible fade show" role="alert">
 	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
 		<span aria-hidden="true">&times;</span>
 		<span class="sr-only">Close</span>
 	</button>
-	${1:<strong>Holy guacamole!</strong> You should check in on some of those fields below.}
+	<strong>${2:Holy guacamole!}</strong>${3: You should check in on some of those fields below.}
 </div>
diff --git a/snippets/bootstrap/components/alert/link.html b/snippets/bootstrap/components/alert/link.html
index 39138ab..a8210da 100644
--- a/snippets/bootstrap/components/alert/link.html
+++ b/snippets/bootstrap/components/alert/link.html
@@ -1,3 +1,3 @@
-<div class="alert alert-${1:primary|secondary|success|danger|warning|info|light|dark}" role="alert">
-	<strong>${2:Warning!}</strong> <a href="${4:#}" class="alert-link">$3</a>$5
+<div class="alert ${1:alert-primary|alert-secondary|alert-success|alert-danger|alert-warning|alert-info|alert-light|alert-dark}" role="alert">
+	<strong>${2:Warning!}</strong> <a href="${3:#}" class="alert-link">${4:Click here}</a>$5
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/badge/button.html b/snippets/bootstrap/components/badge/button.html
index 3112fb4..3acbd15 100644
--- a/snippets/bootstrap/components/badge/button.html
+++ b/snippets/bootstrap/components/badge/button.html
@@ -1,3 +1,3 @@
 <button class="btn">
-        ${1:Notification} <span class="badge badge-${3:primary|secondary|success|danger|warning|info|light|dark}">$2</span>
+        ${1:Notification} <span class="badge ${2:badge-primary|badge-secondary|badge-success|badge-danger|badge-warning|badge-info|badge-light|badge-dark}">${3:Notification}</span>
 </button>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/badge/default.html b/snippets/bootstrap/components/badge/default.html
index da09788..f3dbba9 100644
--- a/snippets/bootstrap/components/badge/default.html
+++ b/snippets/bootstrap/components/badge/default.html
@@ -1 +1 @@
-<span class="badge badge-${1:primary|secondary|success|danger|warning|info|light|dark}">$2</span>
\ No newline at end of file
+<span class="badge ${1:badge-primary|badge-secondary|badge-success|badge-danger|badge-warning|badge-info|badge-light|badge-dark}">${2:Notification}</span>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/badge/heading.html b/snippets/bootstrap/components/badge/heading.html
index fc57c4c..477ac69 100644
--- a/snippets/bootstrap/components/badge/heading.html
+++ b/snippets/bootstrap/components/badge/heading.html
@@ -1 +1 @@
-<h${1:1-6}>${3:Example heading}<span class="badge badge-${2:primary|secondary|success|danger|warning|info|light|dark}">${4:New}</span></h${1:1-6}>
\ No newline at end of file
+<h${1:1-6}>${3:Example heading}<span class="badge ${2:badge-primary|badge-secondary|badge-success|badge-danger|badge-warning|badge-info|badge-light|badge-dark}">${4:New}</span></h${1:1-6}>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/badge/link.html b/snippets/bootstrap/components/badge/link.html
index 3e7f51e..d61f547 100644
--- a/snippets/bootstrap/components/badge/link.html
+++ b/snippets/bootstrap/components/badge/link.html
@@ -1 +1 @@
-<a href="${2:#}" class="badge badge-${3:primary|secondary|success|danger|warning|info|light|dark}">$1</a>
\ No newline at end of file
+<a href="${1:#}" class="badge ${2:badge-primary|badge-secondary|badge-success|badge-danger|badge-warning|badge-info|badge-light|badge-dark}">${3:Notification}</a>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/badge/pill.html b/snippets/bootstrap/components/badge/pill.html
index 8d7536b..d6567b9 100644
--- a/snippets/bootstrap/components/badge/pill.html
+++ b/snippets/bootstrap/components/badge/pill.html
@@ -1 +1 @@
-<span class="badge badge-pill badge-${1:primary|secondary|success|danger|warning|info|light|dark}">$2</span>
\ No newline at end of file
+<span class="badge badge-pill ${1:badge-primary|badge-secondary|badge-success|badge-danger|badge-warning|badge-info|badge-light|badge-dark}">${2:Notification}</span>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/bgroup/default.html b/snippets/bootstrap/components/bgroup/default.html
index 0092fb6..bc3f462 100644
--- a/snippets/bootstrap/components/bgroup/default.html
+++ b/snippets/bootstrap/components/bgroup/default.html
@@ -1,5 +1,5 @@
-<div class="btn-group" role="group" aria-label="$2">
-	<button type="button" class="btn btn-${1:primary|secondary|success|danger|warning|info|light|dark|link}">$3</button>
-	<button type="button" class="btn btn-${1:primary|secondary|success|danger|warning|info|light|dark|link}">$4</button>
-	<button type="button" class="btn btn-${1:primary|secondary|success|danger|warning|info|light|dark|link}">$5</button>
+<div class="btn-group" role="group" aria-label="${2:menu button group}">
+	<button type="button" class="btn ${1:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}">${3:Button 1}</button>
+	<button type="button" class="btn ${1:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}">${4:Button 2}</button>
+	<button type="button" class="btn ${1:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}">${5:Button 3}</button>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/bgroup/dropdown-vertical.html b/snippets/bootstrap/components/bgroup/dropdown-vertical.html
index 43a37d1..d8edb02 100644
--- a/snippets/bootstrap/components/bgroup/dropdown-vertical.html
+++ b/snippets/bootstrap/components/bgroup/dropdown-vertical.html
@@ -1,14 +1,14 @@
-<div class="btn-group-vertical" role="group" aria-label="$1">
-	<button type="button" class="btn btn-secondary">$2</button>
-	<button type="button" class="btn btn-secondary">$3</button>
+<div class="btn-group-vertical" role="group" aria-label="${1:menu button group}">
+	<button type="button" class="btn ${2:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}">${3:Button 1}</button>
+	<button type="button" class="btn ${2:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}">${4:Button 2}</button>
 	<div class="btn-group" role="group">
-		<button id="${5:dropdownId}" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
+		<button id="${5:dropdownId}" type="button" class="btn ${2:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link} dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
 				aria-expanded="false">
-			$4
+				${6:Dropdown Menu}
 		</button>
 		<div class="dropdown-menu" aria-labelledby="${5:dropdownId}">
-			<a class="dropdown-item" href="${7:#}">$6</a>
-			<a class="dropdown-item" href="${9:#}">$8</a>
+			<a class="dropdown-item" href="${7:#}">${8:Dropdown Button1}</a>
+			<a class="dropdown-item" href="${9:#}">${10:Dropdown Button2}</a>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/bgroup/dropdown.html b/snippets/bootstrap/components/bgroup/dropdown.html
index 8c49f12..4bd0fd8 100644
--- a/snippets/bootstrap/components/bgroup/dropdown.html
+++ b/snippets/bootstrap/components/bgroup/dropdown.html
@@ -1,14 +1,14 @@
-<div class="btn-group" role="group" aria-label="$1">
-	<button type="button" class="btn btn-secondary">$2</button>
-	<button type="button" class="btn btn-secondary">$3</button>
+<div class="btn-group" role="group" aria-label="${1:menu button group}">
+	<button type="button" class="btn {2:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}">${3:Button 1}</button>
+	<button type="button" class="btn {2:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}">${4:Button 2}</button>
 	<div class="btn-group" role="group">
-		<button id="${5:dropdownId}" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
+		<button id="${5:dropdownId}" type="button" class="btn {2:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link} dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
 				aria-expanded="false">
-			$4
+			${6:Dropdown Menu}
 		</button>
 		<div class="dropdown-menu" aria-labelledby="${5:dropdownId}">
-			<a class="dropdown-item" href="${7:#}">$6</a>
-			<a class="dropdown-item" href="${9:#}">$8</a>
+			<a class="dropdown-item" href="${7:#}">${8:Dropdown Button1}</a>
+			<a class="dropdown-item" href="${9:#}">${10:Dropdown Button2}</a>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/bgroup/size.html b/snippets/bootstrap/components/bgroup/size.html
index 965e1d9..4e3ac8c 100644
--- a/snippets/bootstrap/components/bgroup/size.html
+++ b/snippets/bootstrap/components/bgroup/size.html
@@ -1,3 +1,5 @@
-<div class="btn-group btn-group-${1:lg|sm|xs}" role="group" aria-label="$2">
-	${3:Add buttons here}
+<div class="btn-group btn-group-${1:lg|sm|xs}" role="group" aria-label="${2:menu button group}">
+	<button type="button" class="btn {3:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}">{4:Button 1}</button>
+	<button type="button" class="btn {3:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}">{5:Button 1}</button>
+	<button type="button" class="btn {3:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}">{6:Button 1}</button>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/bgroup/toolbar.html b/snippets/bootstrap/components/bgroup/toolbar.html
index 8aa0898..5697695 100644
--- a/snippets/bootstrap/components/bgroup/toolbar.html
+++ b/snippets/bootstrap/components/bgroup/toolbar.html
@@ -1,11 +1,18 @@
-<div class="btn-toolbar" role="toolbar" aria-label="$1">
-	<div class="btn-group" role="group" aria-label="$2">
-		<button type="button" class="btn btn-${3:primary|secondary|success|danger|warning|info|light|dark|link}">$4</button>
-		<button type="button" class="btn btn-${3:primary|secondary|success|danger|warning|info|light|dark|link}">$5</button>
-		<button type="button" class="btn btn-${3:primary|secondary|success|danger|warning|info|light|dark|link}">$6</button>
+<div class="btn-toolbar ${1:justify-content-center|justify-content-start|justify-content-end|justify-content-between}" role="toolbar" aria-label="${2:toolbar with button groups}">
+	<div class="btn-group" role="group" aria-label="${3:menu button group1}">
+		<button type="button" class="btn ${4:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}">${5:Button 1}</button>
+		<button type="button" class="btn ${4:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}">${6:Button 2}</button>
+		<button type="button" class="btn ${4:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}">${7:Button 3}</button>
 	</div>
-	<div class="btn-group" role="group" aria-label="$7">
-		<button type="button" class="btn btn-${3:primary|secondary|success|danger|warning|info|light|dark|link}">$8</button>
-		<button type="button" class="btn btn-${3:primary|secondary|success|danger|warning|info|light|dark|link}">$9</button>
+	<div class="btn-group" role="group" aria-label="${8:menu button group2}">
+		<button type="button" class="btn ${4:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}">${9:Button 4}</button>
+		<button type="button" class="btn ${4:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}">${10:Button 5}</button>
 	</div>
+
+	<div class="input-group">
+		<div class="input-group-prepend">
+		  <div class="input-group-text" id="${11:btnGroupAddon2}">${12:@}</div>
+		</div>
+		<input type="text" class="form-control" placeholder="${13:Input group example}" aria-label="${13:Input group example}" aria-describedby="${11:btnGroupAddon2}">
+	  </div>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/breadcrumb/default.html b/snippets/bootstrap/components/breadcrumb/default.html
index 12b1d21..22d429d 100644
--- a/snippets/bootstrap/components/breadcrumb/default.html
+++ b/snippets/bootstrap/components/breadcrumb/default.html
@@ -1,5 +1,5 @@
 <nav class="breadcrumb">
-	<a class="breadcrumb-item" href="${2:#}">$1</a>
-	<a class="breadcrumb-item" href="${4:#}">$3</a>
-	<span class="breadcrumb-item active">$5</span>
+	<a class="breadcrumb-item" href="${1:#}">${2:Menu}</a>
+	<a class="breadcrumb-item" href="${3:#}">${4:Sub Menu}</a>
+	<span class="breadcrumb-item active" aria-current="page">${5:Active link}</span>
 </nav>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/breadcrumb/list.html b/snippets/bootstrap/components/breadcrumb/list.html
index efe70b8..bd72f40 100644
--- a/snippets/bootstrap/components/breadcrumb/list.html
+++ b/snippets/bootstrap/components/breadcrumb/list.html
@@ -1,5 +1,5 @@
 <ol class="breadcrumb">
-	<li class="breadcrumb-item"><a href="${2:#}">$1</a></li>
-	<li class="breadcrumb-item"><a href="${4:#}">$3</a></li>
-	<li class="breadcrumb-item active">$5</li>
+	<li class="breadcrumb-item"><a href="${1:#}">${2:Menu}</a></li>
+	<li class="breadcrumb-item"><a href="${3:#}">${4:Sub Menu}</a></li>
+	<li class="breadcrumb-item active" aria-current="page">${5:Active link}</li>
 </ol>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/button/a.html b/snippets/bootstrap/components/button/a.html
index de6218c..dc3c92c 100644
--- a/snippets/bootstrap/components/button/a.html
+++ b/snippets/bootstrap/components/button/a.html
@@ -1 +1 @@
-<a name="$4" id="$4" class="btn btn-${3:primary|secondary|success|danger|warning|info|light|dark|link}" href="${2:#}" role="button">$1</a>
\ No newline at end of file
+<a name="$4" id="$4" class="btn ${3:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}" href="${2:#}" role="button">${1:Button 1}</a>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/button/block.html b/snippets/bootstrap/components/button/block.html
index 0c45b07..6d1ec3d 100644
--- a/snippets/bootstrap/components/button/block.html
+++ b/snippets/bootstrap/components/button/block.html
@@ -1 +1 @@
-<button type="button" name="$3" id="$3" class="btn btn-${2:primary|secondary|success|danger|warning|info|light|dark|link}" btn-lg btn-block">$1</button>
\ No newline at end of file
+<button type="button" name="$3" id="$3" class="btn ${2:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link} btn-lg btn-block">${1:Block Button 1}</button>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/button/checkbox.html b/snippets/bootstrap/components/button/checkbox.html
index 253af29..1407d89 100644
--- a/snippets/bootstrap/components/button/checkbox.html
+++ b/snippets/bootstrap/components/button/checkbox.html
@@ -1,11 +1,11 @@
-<div class="btn-group" data-toggle="buttons">
-	<label class="btn btn-${1:primary|secondary|success|danger|warning|info|light|dark|link} active">
-		<input type="checkbox" name="$3" id="$3" checked autocomplete="off">$2
+<div class="btn-group btn-group-toggle" data-toggle="buttons">
+	<label class="btn ${1:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link} active" for="$3">
+		<input type="checkbox" name="$3" id="$3" checked autocomplete="off">${2:Button1}
 	</label>
-	<label class="btn btn-${1:primary|secondary|success|danger|warning|info|light|dark|link}">
-		<input type="checkbox" name="$5" id="$5" autocomplete="off">$4
+	<label class="btn ${1:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}" for="$5">
+		<input type="checkbox" name="$5" id="$5" autocomplete="off">${4:Button2}
 	</label>
-	<label class="btn btn-${1:primary|secondary|success|danger|warning|info|light|dark|link}">
-		<input type="checkbox" name="$7" id="$7" autocomplete="off">$6
+	<label class="btn ${1:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}" for="$7">
+		<input type="checkbox" name="$7" id="$7" autocomplete="off">${6:Button3}
 	</label>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/button/default.html b/snippets/bootstrap/components/button/default.html
index cd9a55e..3079ced 100644
--- a/snippets/bootstrap/components/button/default.html
+++ b/snippets/bootstrap/components/button/default.html
@@ -1 +1 @@
-<button type="button" class="btn btn-${2:primary|secondary|success|danger|warning|info|light|dark|link}">$1</button>
\ No newline at end of file
+<button type="button" class="btn ${2:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link} ${3:btn-lg|btn-sm} ${4:active|disabled}">${1:Button 1}</button>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/button/disabled-a.html b/snippets/bootstrap/components/button/disabled-a.html
index a003fa7..692ea76 100644
--- a/snippets/bootstrap/components/button/disabled-a.html
+++ b/snippets/bootstrap/components/button/disabled-a.html
@@ -1 +1 @@
-<a href="${2:#}" class="btn btn-${3:primary|secondary|success|danger|warning|info|light|dark|link} ${4:active|disabled}" role="button">$1</a>
\ No newline at end of file
+<a href="${2:#}" class="btn ${3:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link} ${4:active|disabled}" role="button">${1:Button 1}</a>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/button/input.html b/snippets/bootstrap/components/button/input.html
index 395490f..11ef502 100644
--- a/snippets/bootstrap/components/button/input.html
+++ b/snippets/bootstrap/components/button/input.html
@@ -1 +1 @@
-<input name="$2" id="$2" class="btn btn-${3:primary|secondary|success|danger|warning|info|light|dark|link}" type="button" value="$1">
\ No newline at end of file
+<input name="$2" id="$2" class="btn ${3:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}" type="button" value="${1:Button 1}">
\ No newline at end of file
diff --git a/snippets/bootstrap/components/button/outline.html b/snippets/bootstrap/components/button/outline.html
index fff53b6..f7289f5 100644
--- a/snippets/bootstrap/components/button/outline.html
+++ b/snippets/bootstrap/components/button/outline.html
@@ -1 +1 @@
-<button type="button" class="btn btn-outline-${2:primary|secondary|success|danger|warning|info|light|dark|link}">$1</button>
+<button type="button" class="btn ${2:btn-outline-primary|btn-outline-secondary|btn-outline-success|btn-outline-danger|btn-outline-warning|btn-outline-info|btn-outline-light|btn-outline-dark|btn-outline-link}">${1:Outline Button 1}</button>
diff --git a/snippets/bootstrap/components/button/radio.html b/snippets/bootstrap/components/button/radio.html
index 6240579..38ad26d 100644
--- a/snippets/bootstrap/components/button/radio.html
+++ b/snippets/bootstrap/components/button/radio.html
@@ -1,11 +1,11 @@
-<div class="btn-group" data-toggle="buttons">
-	<label class="btn btn-${1:primary|secondary|success|danger|warning|info|light|dark|link} active">
-		<input type="radio" name="$3" id="$3" autocomplete="off" checked>$2
+<div class="btn-group btn-group-toggle" data-toggle="buttons">
+	<label class="btn ${1:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link} active" for="$3">
+		<input type="radio" name="$3" id="$3" autocomplete="off" checked>${2:Button 1}
 	</label>
-	<label class="btn btn-${1:primary|secondary|success|danger|warning|info|light|dark|link}">
-		<input type="radio" name="$5" id="$5" autocomplete="off">$4
+	<label class="btn ${1:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}" for="$5">
+		<input type="radio" name="$5" id="$5" autocomplete="off">${4:Button 2}
 	</label>
-	<label class="btn btn-${1:primary|secondary|success|danger|warning|info|light|dark|link}">
-		<input type=" radio" name="$7" id="$7 " autocomplete="off ">$6
+	<label class="btn ${1:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}" for="$7">
+		<input type="radio" name="$7" id="$7 " autocomplete="off ">${6:Button 3}
 	</label>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/button/sizes.html b/snippets/bootstrap/components/button/sizes.html
index 2ee920a..6262d41 100644
--- a/snippets/bootstrap/components/button/sizes.html
+++ b/snippets/bootstrap/components/button/sizes.html
@@ -1 +1 @@
-<button type="button" class="btn btn-${2:primary|secondary|success|danger|warning|info|light|dark|link} btn-${3:lg|sm}">$1</button>
\ No newline at end of file
+<button type="button" class="btn ${2:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link} ${3:btn-lg|btn-sm}">${1:Button 1}</button>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/button/toggle.html b/snippets/bootstrap/components/button/toggle.html
index e5e3229..6fc04cc 100644
--- a/snippets/bootstrap/components/button/toggle.html
+++ b/snippets/bootstrap/components/button/toggle.html
@@ -1 +1 @@
-<button type="button" class="btn btn-${2:primary|secondary|success|danger|warning|info|light|dark|link}" data-toggle="button" aria-pressed="false" autocomplete="off">$1</button>
\ No newline at end of file
+<button type="button" class="btn ${2:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}" data-toggle="button" aria-pressed="false" autocomplete="off">${1:Toggle Button 1}</button>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/card/align.html b/snippets/bootstrap/components/card/align.html
index 8be0ae3..ba965fc 100644
--- a/snippets/bootstrap/components/card/align.html
+++ b/snippets/bootstrap/components/card/align.html
@@ -1,7 +1,7 @@
-<div class="card text-${3:left|center|right}">
-  <img class="card-img-top" src="${1:holder.js/100px180/}" alt="$2">
+<div class="card ${3:text-left|text-center|text-right}">
+  <img class="card-img-top" src="${1:holder.js/100px180/}" alt="${2:card image}">
   <div class="card-body">
-    <h4 class="card-title">${4:Title}</h4>
+    <h4 class="card-title">${2:Title}</h4>
     <p class="card-text">${5:Body}</p>
   </div>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/card/background-custom.html b/snippets/bootstrap/components/card/background-custom.html
index 2a36c29..d3c090d 100644
--- a/snippets/bootstrap/components/card/background-custom.html
+++ b/snippets/bootstrap/components/card/background-custom.html
@@ -1,5 +1,5 @@
 <div class="card" style="background-color:${1:cadetblue}; border-color:${2:darkblue};">
-  <img class="card-img-top" src="${3:holder.js/100x180/}" alt="$4">
+  <img class="card-img-top" src="${3:holder.js/100x180/}" alt="${4:card image}">
   <div class="card-body">
     <h4 class="card-title">${5:Title}</h4>
     <p class="card-text">${6:Text}</p>
diff --git a/snippets/bootstrap/components/card/background.html b/snippets/bootstrap/components/card/background.html
index 9bf4f16..3eee19f 100644
--- a/snippets/bootstrap/components/card/background.html
+++ b/snippets/bootstrap/components/card/background.html
@@ -1,5 +1,5 @@
-<div class="card text-white bg-${1:primary|secondary|success|danger|warning|info|light|dark|link}">
-  <img class="card-img-top" src="${2:holder.js/100px180/}" alt="$3">
+<div class="card text-white ${1:bg-primary|bg-secondary|bg-success|bg-danger|bg-warning|bg-info|bg-light|bg-dark|bg-link}">
+  <img class="card-img-top" src="${2:holder.js/100px180/}" alt="${4:Title}">
   <div class="card-body">
     <h4 class="card-title">${4:Title}</h4>
     <p class="card-text">${5:Text}</p>
diff --git a/snippets/bootstrap/components/card/border.html b/snippets/bootstrap/components/card/border.html
index f46fbe2..b75ba73 100644
--- a/snippets/bootstrap/components/card/border.html
+++ b/snippets/bootstrap/components/card/border.html
@@ -1,5 +1,5 @@
-<div class="card border-${1:primary|secondary|success|danger|warning|info|light|dark|link}">
-  <img class="card-img-top" src="${2:holder.js/100px180/}" alt="$3">
+<div class="card ${1:border-primary|border-secondary|border-success|border-danger|border-warning|border-info|border-light|border-dark|border-link}">
+  <img class="card-img-top" src="${2:holder.js/100px180/}" alt="${2:card image}">
   <div class="card-body">
     <h4 class="card-title">${4:Title}</h4>
     <p class="card-text">${5:Text}</p>
diff --git a/snippets/bootstrap/components/card/columns.html b/snippets/bootstrap/components/card/columns.html
index 2d964e9..7306e84 100644
--- a/snippets/bootstrap/components/card/columns.html
+++ b/snippets/bootstrap/components/card/columns.html
@@ -1,13 +1,13 @@
 <div class="card-columns">
 	<div class="card">
-		<img class="card-img-top" src="${1:holder.js/100x180/}" alt="$2">
+		<img class="card-img-top" src="${1:holder.js/100x180/}" alt="${2:card image}">
 		<div class="card-body">
 			<h4 class="card-title">${3:Title}</h4>
 			<p class="card-text">${4:Text}</p>
 		</div>
 	</div>
 	<div class="card">
-		<img class="card-img-top" src="${5:holder.js/100x180/}" alt="$6">
+		<img class="card-img-top" src="${5:holder.js/100x180/}" alt="${6:card image}">
 		<div class="card-body">
 			<h4 class="card-title">${7:Title}</h4>
 			<p class="card-text">${8:Text}</p>
diff --git a/snippets/bootstrap/components/card/decks.html b/snippets/bootstrap/components/card/decks.html
index 6ebe351..c70af2f 100644
--- a/snippets/bootstrap/components/card/decks.html
+++ b/snippets/bootstrap/components/card/decks.html
@@ -1,13 +1,13 @@
 <div class="card-deck">
 	<div class="card">
-		<img class="card-img-top" src="${1:holder.js/100x180/}" alt="$2">
+		<img class="card-img-top" src="${1:holder.js/100x180/}" alt="${2:card image}">
 		<div class="card-body">
 			<h4 class="card-title">${3:Title}</h4>
 			<p class="card-text">${4:Text}</p>
 		</div>
 	</div>
 	<div class="card">
-		<img class="card-img-top" src="${5:holder.js/100x180/}" alt="$6">
+		<img class="card-img-top" src="${5:holder.js/100x180/}" alt="${6:card image}">
 		<div class="card-body">
 			<h4 class="card-title">${7:Title}</h4>
 			<p class="card-text">${8:Text}</p>
diff --git a/snippets/bootstrap/components/card/default.html b/snippets/bootstrap/components/card/default.html
index b7f02e0..3e4d9d5 100644
--- a/snippets/bootstrap/components/card/default.html
+++ b/snippets/bootstrap/components/card/default.html
@@ -1,5 +1,5 @@
 <div class="card">
-	<img class="card-img-top" src="${1:holder.js/100x180/}" alt="$2">
+	<img class="card-img-top" src="${1:holder.js/100x180/}" alt="${2:card image}">
 	<div class="card-body">
 		<h4 class="card-title">${3:Title}</h4>
 		<p class="card-text">${4:Text}</p>
diff --git a/snippets/bootstrap/components/card/grid.html b/snippets/bootstrap/components/card/grid.html
index 792835d..ee18e97 100644
--- a/snippets/bootstrap/components/card/grid.html
+++ b/snippets/bootstrap/components/card/grid.html
@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col-${1:xs|sm|md|lg|xl}-${2:1-12}">
+  <div class="${1:col-xs-9|col-sm-6|col-md-4|col-lg-3|col-xl-2|col-12|col|col-md-auto}">
     <div class="card">
       <div class="card-body">
         <h3 class="card-title">${3:Title}</h3>
@@ -7,7 +7,7 @@ <h3 class="card-title">${3:Title}</h3>
       </div>
     </div>
   </div>
-  <div class="col-${5:xs|sm|md|lg|xl}-${6:1-12}">
+  <div class="${5:col-xs-9|col-sm-6|col-md-4|col-lg-3|col-xl-2|col-12|col|col-md-auto}">
     <div class="card">
       <div class="card-body">
         <h3 class="card-title">${7:Title}</h3>
diff --git a/snippets/bootstrap/components/card/groups.html b/snippets/bootstrap/components/card/groups.html
index c8a26bd..8efe8c8 100644
--- a/snippets/bootstrap/components/card/groups.html
+++ b/snippets/bootstrap/components/card/groups.html
@@ -1,13 +1,13 @@
 <div class="card-group">
 	<div class="card">
-		<img class="card-img-top" data-src="${1:holder.js/100x180/}" alt="${2:Card image cap}">
+		<img class="card-img-top" src="${1:holder.js/100x180/}" alt="${2:Card image cap}">
 		<div class="card-body">
 			<h4 class="card-title">${3:Title}</h4>
 			<p class="card-text">${4:Text}</p>
 		</div>
 	</div>
 	<div class="card">
-		<img class="card-img-top" data-src="${5:holder.js/100x180/}" alt="${6:Card image cap}">
+		<img class="card-img-top" src="${5:holder.js/100x180/}" alt="${6:Card image cap}">
 		<div class="card-body">
 			<h4 class="card-title">${7:Title}</h4>
 			<p class="card-text">${8:Text}</p>
diff --git a/snippets/bootstrap/components/card/links.html b/snippets/bootstrap/components/card/links.html
index edd8c6e..4bc33a9 100644
--- a/snippets/bootstrap/components/card/links.html
+++ b/snippets/bootstrap/components/card/links.html
@@ -1,5 +1,5 @@
 <div class="card">
-	<img class="card-img-top" data-src="${1:holder.js/100x180/?text=Image cap}" alt="${2:Card image cap}">
+	<img class="card-img-top" src="${1:holder.js/100x180/?text=Image cap}" alt="${2:Card image cap}">
 	<div class="card-body">
 		<h4 class="card-title">${3:Title}</h4>
 		<p class="card-text">${4:Text}</p>
diff --git a/snippets/bootstrap/components/card/list.html b/snippets/bootstrap/components/card/list.html
index c8c8df9..d6ac100 100644
--- a/snippets/bootstrap/components/card/list.html
+++ b/snippets/bootstrap/components/card/list.html
@@ -1,5 +1,5 @@
 <div class="card">
-	<img class="card-img-top" data-src="${1:holder.js/100x180/?text=Image cap}" alt="${2:Card image cap}">
+	<img class="card-img-top" src="${1:holder.js/100x180/?text=Image cap}" alt="${2:Card image cap}">
 	<div class="card-body">
 		<h4 class="card-title">${3:Title}</h4>
 		<p class="card-text">${4:Text}</p>
diff --git a/snippets/bootstrap/components/card/overlay.html b/snippets/bootstrap/components/card/overlay.html
index 8c65f89..5bb8df8 100644
--- a/snippets/bootstrap/components/card/overlay.html
+++ b/snippets/bootstrap/components/card/overlay.html
@@ -1,5 +1,5 @@
 <div class="card bg-dark text-white">
-  <img class="card-img" src="${1:holder.js/100x180/}" alt="$2">
+  <img class="card-img" src="${1:holder.js/100x180/}" alt="${2:accessibility}">
   <div class="card-img-overlay">
     <h4 class="card-title">${3:Title}</h4>
     <p class="card-text">${4:Text}</p>
diff --git a/snippets/bootstrap/components/card/subtitle.html b/snippets/bootstrap/components/card/subtitle.html
index 5bdfc36..08ce249 100644
--- a/snippets/bootstrap/components/card/subtitle.html
+++ b/snippets/bootstrap/components/card/subtitle.html
@@ -3,7 +3,7 @@
     <h4 class="card-title">${1:Title}</h4>
     <h6 class="card-subtitle text-muted">${2:Subtitle}</h6>
   </div>
-  <img src="${3:holder.js/100x180/}" alt="$4">
+  <img src="${3:holder.js/100x180/}" alt="${4:accessibility}">
   <div class="card-body">
     <p class="card-text">${5:Text}</p>
     <a href="${7:#}" class="card-link">${6:Link 1}</a>
diff --git a/snippets/bootstrap/components/carousel/caption.html b/snippets/bootstrap/components/carousel/caption.html
index 8ec3770..907c112 100644
--- a/snippets/bootstrap/components/carousel/caption.html
+++ b/snippets/bootstrap/components/carousel/caption.html
@@ -6,21 +6,21 @@
 	</ol>
 	<div class="carousel-inner" role="listbox">
 		<div class="carousel-item active">
-			<img data-src="${2:holder.js/900x500/auto/#777:#555/text:First slide}" alt="${3:First slide}">
+			<img src="${2:holder.js/900x500/auto/#777:#555/text:First slide}" alt="${3:First slide}">
 			<div class="carousel-caption d-none d-md-block">
 				<h3>${4:Title}</h3>
 				<p>${5:Description}</p>
 			</div>
 		</div>
 		<div class="carousel-item">
-			<img data-src="${6:holder.js/900x500/auto/#666:#444/text:Second slide}" alt="${7:Second slide}">
+			<img src="${6:holder.js/900x500/auto/#666:#444/text:Second slide}" alt="${7:Second slide}">
 			<div class="carousel-caption d-none d-md-block">
 				<h3>${8:Title}</h3>
 				<p>${9:Description}</p>
 			</div>
 		</div>
 		<div class="carousel-item">
-			<img data-src="${10:holder.js/900x500/auto/#666:#444/text:Third slide}" alt="${11:Third slide}">
+			<img src="${10:holder.js/900x500/auto/#666:#444/text:Third slide}" alt="${11:Third slide}">
 			<div class="carousel-caption d-none d-md-block">
 				<h3>${12:Title}</h3>
 				<p>${13:Description}</p>
diff --git a/snippets/bootstrap/components/carousel/default.html b/snippets/bootstrap/components/carousel/default.html
index c5c50e8..310a1ed 100644
--- a/snippets/bootstrap/components/carousel/default.html
+++ b/snippets/bootstrap/components/carousel/default.html
@@ -6,13 +6,13 @@
 	</ol>
 	<div class="carousel-inner" role="listbox">
 		<div class="carousel-item active">
-			<img data-src="${2:holder.js/900x500/auto/#777:#555/text:First slide}" alt="${3:First slide}">
+			<img src="${2:holder.js/900x500/auto/#777:#555/text:First slide}" alt="${3:First slide}">
 		</div>
 		<div class="carousel-item">
-			<img data-src="${4:holder.js/900x500/auto/#666:#444/text:Second slide}" alt="${5:Second slide}">
+			<img src="${4:holder.js/900x500/auto/#666:#444/text:Second slide}" alt="${5:Second slide}">
 		</div>
 		<div class="carousel-item">
-			<img data-src="${6:holder.js/900x500/auto/#666:#444/text:Third slide}" alt="${7:Third slide}">
+			<img src="${6:holder.js/900x500/auto/#666:#444/text:Third slide}" alt="${7:Third slide}">
 		</div>
 	</div>
 	<a class="carousel-control-prev" href="#${1:carouselId}" role="button" data-slide="prev">
diff --git a/snippets/bootstrap/components/collapse/button.html b/snippets/bootstrap/components/collapse/button.html
index 499b093..aac619a 100644
--- a/snippets/bootstrap/components/collapse/button.html
+++ b/snippets/bootstrap/components/collapse/button.html
@@ -1,9 +1,9 @@
 <p>
-	<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#${2:contentId}" aria-expanded="false"
+	<button class="btn ${3:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}" type="button" data-toggle="collapse" data-target="#${2:contentId}" aria-expanded="false"
 			aria-controls="${2:contentId}">
 		${1:Show}
 	</button>
 </p>
 <div class="collapse" id="${2:contentId}">
-	$3
+	${4:Content}
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/collapse/default.html b/snippets/bootstrap/components/collapse/default.html
index f4a511b..a3d74d6 100644
--- a/snippets/bootstrap/components/collapse/default.html
+++ b/snippets/bootstrap/components/collapse/default.html
@@ -1,8 +1,8 @@
 <p>
-	<a class="btn btn-primary" data-toggle="collapse" href="#${2:contentId}" aria-expanded="false" aria-controls="${2:contentId}">
+	<a class="btn ${3:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}" data-toggle="collapse" href="#${2:contentId}" aria-expanded="false" aria-controls="${2:contentId}">
 		${1:Show}
 	</a>
 </p>
 <div class="collapse" id="${2:contentId}">
-	$3
+	${4:Content}
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/dropdown/anchor.html b/snippets/bootstrap/components/dropdown/anchor.html
index 4dc2cfb..bc6195d 100644
--- a/snippets/bootstrap/components/dropdown/anchor.html
+++ b/snippets/bootstrap/components/dropdown/anchor.html
@@ -1,10 +1,10 @@
 <div class="dropdown open">
-	<a class="btn btn-secondary dropdown-toggle" type="button" id="${2:triggerId}" data-toggle="dropdown" aria-haspopup="true"
+	<a class="btn ${1:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link} dropdown-toggle" type="button" id="${2:triggerId}" data-toggle="dropdown" aria-haspopup="true"
 			aria-expanded="false">
-				${1:Dropdown}
-			</button>
+				${3:Dropdown}
+	</a>
 	<div class="dropdown-menu" aria-labelledby="${2:triggerId}">
-		<a class="dropdown-item" href="${4:#}">${3:Action}</a>
-		<a class="dropdown-item disabled" href="${6:#}">${5:Disabled action}</a>
+		<a class="dropdown-item" href="${4:#}">${5:Action}</a>
+		<a class="dropdown-item disabled" href="${6:#}">${7:Disabled action}</a>
 	</div>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/dropdown/button.html b/snippets/bootstrap/components/dropdown/button.html
index 0fa970f..cb6448f 100644
--- a/snippets/bootstrap/components/dropdown/button.html
+++ b/snippets/bootstrap/components/dropdown/button.html
@@ -1,10 +1,10 @@
 <div class="dropdown open">
-	<button class="btn btn-secondary dropdown-toggle" type="button" id="${2:triggerId}" data-toggle="dropdown" aria-haspopup="true"
+	<button class="btn ${1:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link} dropdown-toggle" type="button" id="${2:triggerId}" data-toggle="dropdown" aria-haspopup="true"
 			aria-expanded="false">
-				${1:Dropdown}
+				${3:Dropdown}
 			</button>
 	<div class="dropdown-menu" aria-labelledby="${2:triggerId}">
-		<button class="dropdown-item" href="${4:#}">${3:Action}</button>
-		<button class="dropdown-item disabled" href="${6:#}">${5:Disabled action}</button>
+		<button class="dropdown-item" href="${4:#}">${5:Action}</button>
+		<button class="dropdown-item disabled" href="${6:#}">${7:Disabled action}</button>
 	</div>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/dropdown/colored.html b/snippets/bootstrap/components/dropdown/colored.html
index cebee01..b03f3d5 100644
--- a/snippets/bootstrap/components/dropdown/colored.html
+++ b/snippets/bootstrap/components/dropdown/colored.html
@@ -1,10 +1,10 @@
 <div class="dropdown open">
-	<button class="btn btn-${2:primary|secondary|success|danger|warning|info|light|dark|link} dropdown-toggle" type="button" id="${3:triggerId}" data-toggle="dropdown" aria-haspopup="true"
+	<button class="btn ${2:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link} dropdown-toggle" type="button" id="${3:triggerId}" data-toggle="dropdown" aria-haspopup="true"
 			aria-expanded="false">
-				${1:Dropdown}
+				${3:Dropdown}
 			</button>
 	<div class="dropdown-menu" aria-labelledby="${3:triggerId}">
-		<a class="dropdown-item" href="${5:#}">${4:Action}</a>
-		<a class="dropdown-item disabled" href="${7:#}">${6:Disabled action}</a>
+		<a class="dropdown-item" href="${5:#}">${6:Action}</a>
+		<a class="dropdown-item disabled" href="${7:#}">${7:Disabled action}</a>
 	</div>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/dropdown/default.html b/snippets/bootstrap/components/dropdown/default.html
index d890d60..5f59ad4 100644
--- a/snippets/bootstrap/components/dropdown/default.html
+++ b/snippets/bootstrap/components/dropdown/default.html
@@ -1,5 +1,5 @@
 <div class="dropdown">
-	<button class="btn btn-secondary dropdown-toggle" type="button" id="${2:triggerId}" data-toggle="dropdown" aria-haspopup="true"
+	<button class="btn ${11:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link} dropdown-toggle" type="button" id="${2:triggerId}" data-toggle="dropdown" aria-haspopup="true"
 			aria-expanded="false">
 				${1:Dropdown}
 			</button>
diff --git a/snippets/bootstrap/components/dropdown/sized.html b/snippets/bootstrap/components/dropdown/sized.html
index 9d389e5..5a44806 100644
--- a/snippets/bootstrap/components/dropdown/sized.html
+++ b/snippets/bootstrap/components/dropdown/sized.html
@@ -1,5 +1,5 @@
 <div class="dropdown open">
-	<button class="btn btn-secondary btn-${2:sm|lg} dropdown-toggle" type="button" id="${3:triggerId}" data-toggle="dropdown" aria-haspopup="true"
+	<button class="btn btn-secondary ${2:btn-sm|btn-lg} dropdown-toggle" type="button" id="${3:triggerId}" data-toggle="dropdown" aria-haspopup="true"
 			aria-expanded="false">
 				${1:Dropdown}
 			</button>
@@ -9,6 +9,6 @@
 		<h6 class="dropdown-header">${8:Section header}</h6>
 		<a class="dropdown-item" href="${10:#}">${9:Action}</a>
 		<div class="dropdown-divider"></div>
-		<a class="dropdown-item" href="${12:#}">${11:Ater divider action}</a>
+		<a class="dropdown-item" href="${12:#}">${11:After divider action}</a>
 	</div>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/dropdown/split.html b/snippets/bootstrap/components/dropdown/split.html
index 614e57a..ffa7952 100644
--- a/snippets/bootstrap/components/dropdown/split.html
+++ b/snippets/bootstrap/components/dropdown/split.html
@@ -1,5 +1,5 @@
 <div class="btn-group">
-  <button type="button" class="btn btn-secondary">${1:Split dropdown}</button>
+  <button type="button" class="btn ${8:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}">${1:Split dropdown}</button>
   <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <span class="sr-only">Toggle Dropdown</span>
   </button>
diff --git a/snippets/bootstrap/components/dropdown/up-split.html b/snippets/bootstrap/components/dropdown/up-split.html
index b6f51d8..650cf7a 100644
--- a/snippets/bootstrap/components/dropdown/up-split.html
+++ b/snippets/bootstrap/components/dropdown/up-split.html
@@ -1,5 +1,5 @@
 <div class="btn-group dropup">
-  <button type="button" class="btn btn-secondary">${1:Split dropup}</button>
+  <button type="button" class="btn ${11:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}">${1:Split dropup}</button>
   <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <span class="sr-only">Toggle Dropdown</span>
   </button>
diff --git a/snippets/bootstrap/components/dropdown/up.html b/snippets/bootstrap/components/dropdown/up.html
index f87a1e8..812a9d5 100644
--- a/snippets/bootstrap/components/dropdown/up.html
+++ b/snippets/bootstrap/components/dropdown/up.html
@@ -1,5 +1,5 @@
 <div class="dropup">
-	<button class="btn btn-secondary dropdown-toggle" type="button" id="${2:triggerId}" data-toggle="dropdown" aria-haspopup="true"
+	<button class="btn ${12:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link} dropdown-toggle" type="button" id="${2:triggerId}" data-toggle="dropdown" aria-haspopup="true"
 			aria-expanded="false">
 				${1:Dropdown}
 			</button>
diff --git a/snippets/bootstrap/components/form/checkbox-custom.html b/snippets/bootstrap/components/form/checkbox-custom.html
index b8b7027..0631900 100644
--- a/snippets/bootstrap/components/form/checkbox-custom.html
+++ b/snippets/bootstrap/components/form/checkbox-custom.html
@@ -1,5 +1,4 @@
-<label class="custom-control custom-checkbox">
+<div class="custom-control custom-checkbox">
   <input type="checkbox" name="$1" id="$1" value="${2:checkedValue}" class="custom-control-input">
-  <span class="custom-control-indicator"></span>
-  <span class="custom-control-description">$3</span>
-</label>
\ No newline at end of file
+  <label class="custom-control-label" for="$1">${3:Hello}</label>
+</div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/form/checkbox-nolabel.html b/snippets/bootstrap/components/form/checkbox-nolabel.html
index b6e4b8c..af81dc9 100644
--- a/snippets/bootstrap/components/form/checkbox-nolabel.html
+++ b/snippets/bootstrap/components/form/checkbox-nolabel.html
@@ -1,5 +1,5 @@
 <div class="form-check">
   <label class="form-check-label">
-    <input class="form-check-input" name="$2" id="$2" type="checkbox" value="${1:checkedValue}" aria-label="${3:Text for screen reader}">
+    <input class="form-check-input" name="$2" id="$2" type="checkbox" value="${1:checkedValue}" aria-label="${3:Text for screen reader}"> ${4:Choice}
   </label>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/form/file-custom.html b/snippets/bootstrap/components/form/file-custom.html
index 121931e..4e18dd7 100644
--- a/snippets/bootstrap/components/form/file-custom.html
+++ b/snippets/bootstrap/components/form/file-custom.html
@@ -1,7 +1,7 @@
 <div class="form-group">
-  <label class="custom-file">
-    <input type="file" name="$2" id="$2" placeholder="$1" class="custom-file-input" aria-describedby="${3:fileHelpId}">
-    <span class="custom-file-control"></span>
-  </label>
+  <div class="custom-file">
+    <input type="file" name="$2" id="$2" class="custom-file-input" aria-describedby="${3:fileHelpId}">
+    <label class="custom-file-control">${1:Choose file}</label>
+  </div>
   <small id="${3:fileHelpId}" class="form-text text-muted">${4:Help text}</small>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/form/help-text-inline.html b/snippets/bootstrap/components/form/help-text-inline.html
index bf5ccab..7f61ad0 100644
--- a/snippets/bootstrap/components/form/help-text-inline.html
+++ b/snippets/bootstrap/components/form/help-text-inline.html
@@ -1 +1 @@
-<small class="text-muted">$1</small>
\ No newline at end of file
+<small class="text-muted">${1:help text}</small>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/form/help-text.html b/snippets/bootstrap/components/form/help-text.html
index 26f5bd0..08e53aa 100644
--- a/snippets/bootstrap/components/form/help-text.html
+++ b/snippets/bootstrap/components/form/help-text.html
@@ -1,3 +1,2 @@
 <p class="form-text text-muted">
-	$1
-</p>
\ No newline at end of file
+	${1:help text}</p>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/form/input-sizing.html b/snippets/bootstrap/components/form/input-sizing.html
index 6682824..92bb26b 100644
--- a/snippets/bootstrap/components/form/input-sizing.html
+++ b/snippets/bootstrap/components/form/input-sizing.html
@@ -1,6 +1,6 @@
 <div class="form-group">
   <label for="$5">$1</label>
   <input type="${3:text|password|email|number|submit|date|datetime|datetime-local|month|color|range|search|tel|time|url|week}"
-      class="form-control form-control-${4:sm|lg}" name="$5" id="$5" aria-describedby="${6:helpId}" placeholder="$2">
+      class="form-control ${4:form-control-sm|form-control-lg}" name="$5" id="$5" aria-describedby="${6:helpId}" placeholder="$2">
   <small id="${6:helpId}" class="form-text text-muted">${7:Help text}</small>
 </div>
diff --git a/snippets/bootstrap/components/form/multil-select-sizing.html b/snippets/bootstrap/components/form/multil-select-sizing.html
index 4463140..90cf0bb 100644
--- a/snippets/bootstrap/components/form/multil-select-sizing.html
+++ b/snippets/bootstrap/components/form/multil-select-sizing.html
@@ -1,6 +1,6 @@
 <div class="form-group">
   <label for="$2">$1</label>
-  <select multiple class="form-control form-control-${3:sm|lg}" name="$2" id="$2">
+  <select multiple class="form-control ${3:form-control-sm|form-control-lg}" name="$2" id="$2">
     <option>$4</option>
     <option>$5</option>
     <option>$6</option>
diff --git a/snippets/bootstrap/components/form/radio-custom.html b/snippets/bootstrap/components/form/radio-custom.html
index da1969a..00b1a65 100644
--- a/snippets/bootstrap/components/form/radio-custom.html
+++ b/snippets/bootstrap/components/form/radio-custom.html
@@ -1,5 +1,4 @@
-<label class="custom-control custom-radio">
+<div class="custom-control custom-radio">
   <input type="radio" name="$1" id="$1" value="${2:checkedValue}" class="custom-control-input">
-  <span class="custom-control-indicator"></span>
-  <span class="custom-control-description">$3</span>
-</label>
\ No newline at end of file
+  <label class="custom-control-label" for="inpr2">{3:Toggle this custom radio}</label>
+</div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/form/reset.html b/snippets/bootstrap/components/form/reset.html
index c2605c3..b914130 100644
--- a/snippets/bootstrap/components/form/reset.html
+++ b/snippets/bootstrap/components/form/reset.html
@@ -1 +1 @@
-<button type="reset" class="btn btn-${2:primary|secondary|success|danger|warning|info|light|dark|link}">${1:Reset}</button>
\ No newline at end of file
+<button type="reset" class="btn ${2:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}">${1:Reset}</button>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/form/select-sizing.html b/snippets/bootstrap/components/form/select-sizing.html
index 0a381c8..be5818c 100644
--- a/snippets/bootstrap/components/form/select-sizing.html
+++ b/snippets/bootstrap/components/form/select-sizing.html
@@ -1,6 +1,6 @@
 <div class="form-group">
   <label for="$2">$1</label>
-  <select class="form-control form-control-${3:sm|lg}" name="$2" id="$2">
+  <select class="form-control ${3:form-control-sm|form-control-lg}" name="$2" id="$2">
     <option>$4</option>
     <option>$5</option>
     <option>$6</option>
diff --git a/snippets/bootstrap/components/form/submit.html b/snippets/bootstrap/components/form/submit.html
index 6cc0004..af30f67 100644
--- a/snippets/bootstrap/components/form/submit.html
+++ b/snippets/bootstrap/components/form/submit.html
@@ -1 +1 @@
-<button type="submit" class="btn btn-${2:primary|secondary|success|danger|warning|info|light|dark|link}">${1:Submit}</button>
\ No newline at end of file
+<button type="submit" class="btn ${2:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}">${1:Submit}</button>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/form/validation.html b/snippets/bootstrap/components/form/validation.html
index 00b4e8a..2b51b18 100644
--- a/snippets/bootstrap/components/form/validation.html
+++ b/snippets/bootstrap/components/form/validation.html
@@ -1,6 +1,4 @@
-<label for="${2:inputName}">${1:Input label}</label>
-<input type="text" class="form-control ${3:is-valid|is-invalid}" name="${2:inputName}" id="${2:inputName}">
-<div class="invalid-feedback">
-	${4:Validation message}
-</div>
-<!-- TODO: This is for server side, there is another version for browser defaults -->
\ No newline at end of file
+<div class="col-md-4 mb-3">
+	<label for="${1:validationDefault01}">${4:First name}</label>
+	<input type="text" class="form-control" id="${1:validationDefault01}" placeholder="$3" value="$2" ${5:required}>
+</div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/igroup/button.html b/snippets/bootstrap/components/igroup/button.html
index 9de2191..9032ea8 100644
--- a/snippets/bootstrap/components/igroup/button.html
+++ b/snippets/bootstrap/components/igroup/button.html
@@ -1,6 +1,6 @@
 <div class="input-group">
-	<span class="input-group-btn">
+	<div class="input-group-prepend">
 		<button class="btn btn-secondary" type="button" aria-label="$2">${1:Action}</button>
-  </span>
+  </div>
 	<input type="${4:text|password|email|number|submit|date|datetime|datetime-local|month|color|range|search|tel|time|url|week}" class="form-control" name="${5:name}" id="${5:name}" placeholder="$3" aria-label="$6">
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/igroup/checkbox-radio.html b/snippets/bootstrap/components/igroup/checkbox-radio.html
index 3ef511d..6d2ad5e 100644
--- a/snippets/bootstrap/components/igroup/checkbox-radio.html
+++ b/snippets/bootstrap/components/igroup/checkbox-radio.html
@@ -1,6 +1,8 @@
 <div class="input-group">
-  <span class="input-group-addon">
-    <input type="${1:checkbox|radio}" name="${2:name}" id="${2:name}" aria-label="$3">
-  </span>
+  <div class="input-group-prepend">
+    <div class="input-group-text">
+      <input type="${1:checkbox|radio}" name="${2:name}" id="${2:name}" aria-label="$3">
+    </div>
+  </div>
   <input type="${5:text|password|email|number|submit|date|datetime|datetime-local|month|color|range|search|tel|time|url|week}" class="form-control" name="${6:name}" id="${6:name}" placeholder="$4" aria-label="$7">
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/igroup/dropdown-segmented.html b/snippets/bootstrap/components/igroup/dropdown-segmented.html
index 9a9d52c..20fd41c 100644
--- a/snippets/bootstrap/components/igroup/dropdown-segmented.html
+++ b/snippets/bootstrap/components/igroup/dropdown-segmented.html
@@ -1,13 +1,13 @@
 <div class="input-group">
-	<span class="input-group-btn">
-		<button type="button" class="btn btn-secondary dropdown-toggle" aria-label="$2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${1:Dropdown}</button>
-		<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
+	<div class="input-group-prepend">
+		<button type="button" class="btn btn-outline-secondary">${1:Dropdown}</button>
+		<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="$2"><span class="sr-only">Toggle Dropdown</span></button>
 	<div class="dropdown-menu">
 		<a class="dropdown-item" href="${4:#}">${3:Action}</a>
 		<a class="dropdown-item disabled" href="${6:#}">${5:Disabled action}</a>
 		<div role="separator" class="dropdown-divider"></div>
 		<a class="dropdown-item" href="${8:#}">${7:Separated link}</a>
 	</div>
-	</span>
+	</div>
 	<input type="${10:text|password|email|number|submit|date|datetime|datetime-local|month|color|range|search|tel|time|url|week}" class="form-control" name="${11:name}" id="${11:name}" placeholder="$9" aria-label="$12">
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/igroup/dropdown.html b/snippets/bootstrap/components/igroup/dropdown.html
index 138742a..3d54740 100644
--- a/snippets/bootstrap/components/igroup/dropdown.html
+++ b/snippets/bootstrap/components/igroup/dropdown.html
@@ -1,6 +1,6 @@
 <div class="input-group">
-	<span class="input-group-btn">
-		<button type="button" class="btn btn-secondary dropdown-toggle" aria-label="$2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+	<span class="input-group-prepend">
+		<button type="button" class="btn btn-outline-secondary dropdown-toggle" aria-label="$2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 			${1:Dropdown}
 		</button>
 		<div class="dropdown-menu">
diff --git a/snippets/bootstrap/components/igroup/size.html b/snippets/bootstrap/components/igroup/size.html
index f58381f..2936251 100644
--- a/snippets/bootstrap/components/igroup/size.html
+++ b/snippets/bootstrap/components/igroup/size.html
@@ -1,4 +1,9 @@
-<div class="input-group input-group-${1:sm|lg}">
-	<span class="input-group-addon" id="${3:prefixId}">${2:prefix}</span>
-	<input type="${5:text|password|email|number|submit|date|datetime|datetime-local|month|color|range|search|tel|time|url|week}" name="${6:name}" id="${6:name}" class="form-control" placeholder="${4:placeholder}" aria-describedby="${3:prefixId}">
+<div class="input-group ${1:input-group-sm|input-group-lg}">
+	<div class="input-group-prepend">
+		<span class="input-group-text" id="${3:prefixId}">${2:prefix}</span>
+	</div>
+	<input
+		type="${5:text|password|email|number|submit|date|datetime|datetime-local|month|color|range|search|tel|time|url|week}"
+		name="${6:name}" id="${6:name}" class="form-control" placeholder="${4:placeholder}"
+		aria-describedby="${3:prefixId}">
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/igroup/text-both.html b/snippets/bootstrap/components/igroup/text-both.html
index d0ecd5f..ce23826 100644
--- a/snippets/bootstrap/components/igroup/text-both.html
+++ b/snippets/bootstrap/components/igroup/text-both.html
@@ -1,5 +1,9 @@
 <div class="input-group">
-	<span class="input-group-addon">${1:prefix}</span>
+	<div class="input-group-prepend">
+		<span class="input-group-text">${1:prefix}</span>
+	</div>
 	<input type="${3:text|password|email|number|submit|date|datetime|datetime-local|month|color|range|search|tel|time|url|week}" name="${4:name}" id="${4:name}" class="form-control" placeholder="${2:placeholder}">
-	<span class="input-group-addon">${5:sufix}</span>
+	<div class="input-group-append">
+		<span class="input-group-text">${5:sufix}</span>
+	</div>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/igroup/text-prefix.html b/snippets/bootstrap/components/igroup/text-prefix.html
index c1d9598..4bd90a4 100644
--- a/snippets/bootstrap/components/igroup/text-prefix.html
+++ b/snippets/bootstrap/components/igroup/text-prefix.html
@@ -1,4 +1,6 @@
 <div class="input-group">
-	<span class="input-group-addon" id="${2:prefixId}">${1:prefix}</span>
+	<div class="input-group-prepend">
+		<span class="input-group-text" id="${2:prefixId}">${1:prefix}</span>
+	</div>
 	<input type="${4:text|password|email|number|submit|date|datetime|datetime-local|month|color|range|search|tel|time|url|week}" name="${5:name}" id="${5:name}" class="form-control" placeholder="$3" aria-describedby="${2:prefixId}">
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/igroup/text-sufix.html b/snippets/bootstrap/components/igroup/text-sufix.html
index ec15d06..b5659a4 100644
--- a/snippets/bootstrap/components/igroup/text-sufix.html
+++ b/snippets/bootstrap/components/igroup/text-sufix.html
@@ -1,4 +1,6 @@
 <div class="input-group">
 	<input type="${2:text|password|email|number|submit|date|datetime|datetime-local|month|color|range|search|tel|time|url|week}" name="${3:name}" id="${3:name}" class="form-control" placeholder="${1:placeholder}" aria-describedby="${5:sufixId}">
-	<span class="input-group-addon" id="${5:sufixId}">${4:sufix}</span>
+	<div class="input-group-append">
+		<span class="input-group-text" id="${5:sufixId}">${4:sufix}</span>
+	</div>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/jumbotron/default.html b/snippets/bootstrap/components/jumbotron/default.html
index ec16ac1..6cea515 100644
--- a/snippets/bootstrap/components/jumbotron/default.html
+++ b/snippets/bootstrap/components/jumbotron/default.html
@@ -4,6 +4,6 @@ <h1 class="display-3">${1:Jumbo heading}</h1>
 	<hr class="my-2">
 	<p>${3:More info}</p>
 	<p class="lead">
-		<a class="btn btn-primary btn-lg" href="${5:Jumbo action link}" role="button">${4:Jumbo action name}</a>
+		<a class="btn ${4:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link} btn-lg" href="${5:Jumbo action link}" role="button">${6:Jumbo action name}</a>
 	</p>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/jumbotron/fluid.html b/snippets/bootstrap/components/jumbotron/fluid.html
index 40acc49..bf2e1de 100644
--- a/snippets/bootstrap/components/jumbotron/fluid.html
+++ b/snippets/bootstrap/components/jumbotron/fluid.html
@@ -1,11 +1,11 @@
 <div class="jumbotron jumbotron-fluid">
-	<div class="container">
+	<div class="${1:container|container-fluid}">
 		<h1 class="display-3">${1:Fluid jumbo heading}</h1>
 		<p class="lead">${2:Jumbo helper text}</p>
 		<hr class="my-2">
 		<p>${3:More info}</p>
 		<p class="lead">
-			<a class="btn btn-primary btn-lg" href="${5:Jumbo action link}" role="button">${4:Jumbo action name}</a>
+			<a class="btn ${4:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link} btn-lg" href="${5:Jumbo action link}" role="button">${6:Jumbo action name}</a>
 		</p>
 	</div>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/list/badge.html b/snippets/bootstrap/components/list/badge.html
index fd7e9b9..12ce3d6 100644
--- a/snippets/bootstrap/components/list/badge.html
+++ b/snippets/bootstrap/components/list/badge.html
@@ -1,14 +1,14 @@
 <ul class="list-group">
 	<li class="list-group-item d-flex justify-content-between align-items-center active">
 		${1:Active list item}
-		<span class="badge badge-secondary badge-pill">${2:pill1}</span>
+		<span class="badge ${2:badge-primary|badge-secondary|badge-success|badge-danger|badge-warning|badge-info|badge-light|badge-dark} badge-pill">${3:pill1}</span>
 	</li>
 	<li class="list-group-item d-flex justify-content-between align-items-center">
-		${3:List item}
-		<span class="badge badge-secondary badge-pill">${4:pill2}</span>
+		${4:List item}
+		<span class="badge ${2:badge-primary|badge-secondary|badge-success|badge-danger|badge-warning|badge-info|badge-light|badge-dark} badge-pill">${5:pill2}</span>
 	</li>
 	<li class="list-group-item d-flex justify-content-between align-items-center disabled">
-		${5:Disabled item}
-		<span class="badge badge-secondary badge-pill">${6:pill3}</span>
+		${6:Disabled item}
+		<span class="badge ${2:badge-primary|badge-secondary|badge-success|badge-danger|badge-warning|badge-info|badge-light|badge-dark} badge-pill">${7:pill3}</span>
 	</li>
 </ul>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/list/colors.html b/snippets/bootstrap/components/list/colors.html
index 388ecdf..e703c22 100644
--- a/snippets/bootstrap/components/list/colors.html
+++ b/snippets/bootstrap/components/list/colors.html
@@ -1,5 +1,5 @@
 <div class="list-group">
-	<a href="${2:#}" class="list-group-item list-group-item-action list-group-item-${3:primary|secondary|success|danger|warning|info|light|dark} active">${1:Active item}</a>
-	<a href="${5:#}" class="list-group-item list-group-item-action list-group-item-${6:primary|secondary|success|danger|warning|info|light|dark}">${4:Item}</a>
-	<a href="${8:#}" class="list-group-item list-group-item-action list-group-item-${9:primary|secondary|success|danger|warning|info|light|dark} disabled">${7:Disabled item}</a>
+	<a href="${2:#}" class="list-group-item list-group-item-action ${3:list-group-item-primary|list-group-item-secondary|list-group-item-success|list-group-item-danger|list-group-item-warning|list-group-item-info|list-group-item-light|list-group-item-dark} active">${1:Active item}</a>
+	<a href="${5:#}" class="list-group-item list-group-item-action ${6:list-group-item-primary|list-group-item-secondary|list-group-item-success|list-group-item-danger|list-group-item-warning|list-group-item-info|list-group-item-light|list-group-item-dark}">${4:Item}</a>
+	<a href="${8:#}" class="list-group-item list-group-item-action ${9:list-group-item-primary|list-group-item-secondary|list-group-item-success|list-group-item-danger|list-group-item-warning|list-group-item-info|list-group-item-light|list-group-item-dark} disabled">${7:Disabled item}</a>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/modal/customize.html b/snippets/bootstrap/components/modal/customize.html
index f138bd8..92c775a 100644
--- a/snippets/bootstrap/components/modal/customize.html
+++ b/snippets/bootstrap/components/modal/customize.html
@@ -1,10 +1,10 @@
 <!-- Button trigger modal -->
-<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#${2:modelId}">
+<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#${2:modalId}">
   ${1:Launch}
 </button>
 
 <!-- Modal -->
-<div class="modal fade" id="${2:modelId}" tabindex="-1" role="dialog" aria-labelledby="${4:modelTitleId}" aria-hidden="true">
+<div class="modal fade" id="${2:modalId}" tabindex="-1" role="dialog" aria-labelledby="${4:modelTitleId}" aria-hidden="true">
 	<div class="modal-dialog" role="document">
 		<div class="modal-content">
 				<div class="modal-header">
@@ -27,7 +27,7 @@ <h5 class="modal-title">${3:Modal title}</h5>
 </div>
 
 <script>
-	$('#exampleModal').on('show.bs.modal', event => {
+	$('#${2:modalId}').on('show.bs.modal', event => {
 		var button = $(event.relatedTarget);
 		var modal = $(this);
 		// Use above variables to manipulate the DOM
diff --git a/snippets/bootstrap/components/modal/default.html b/snippets/bootstrap/components/modal/default.html
index e996c99..dde1214 100644
--- a/snippets/bootstrap/components/modal/default.html
+++ b/snippets/bootstrap/components/modal/default.html
@@ -4,7 +4,7 @@
 </button>
 
 <!-- Modal -->
-<div class="modal fade" id="${2:modelId}" tabindex="-1" role="dialog" aria-labelledby="${4:modelTitleId}" aria-hidden="true">
+<div class="modal fade" id="${2:modalId}" tabindex="-1" role="dialog" aria-labelledby="${4:modelTitleId}" aria-hidden="true">
 	<div class="modal-dialog" role="document">
 		<div class="modal-content">
 			<div class="modal-header">
diff --git a/snippets/bootstrap/components/modal/grid.html b/snippets/bootstrap/components/modal/grid.html
index 42e2e50..faf2b7d 100644
--- a/snippets/bootstrap/components/modal/grid.html
+++ b/snippets/bootstrap/components/modal/grid.html
@@ -1,10 +1,10 @@
 <!-- Button trigger modal -->
-<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#${2:modelId}">
+<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#${2:modalId}">
   ${1:Launch}
 </button>
 
 <!-- Modal -->
-<div class="modal fade" id="${2:modelId}" tabindex="-1" role="dialog" aria-labelledby="${4:modelTitleId}" aria-hidden="true">
+<div class="modal fade" id="${2:modalId}" tabindex="-1" role="dialog" aria-labelledby="${4:modelTitleId}" aria-hidden="true">
 	<div class="modal-dialog" role="document">
 		<div class="modal-content">
 				<div class="modal-header">
diff --git a/snippets/bootstrap/components/modal/sizes.html b/snippets/bootstrap/components/modal/sizes.html
index 59897d7..f4b5843 100644
--- a/snippets/bootstrap/components/modal/sizes.html
+++ b/snippets/bootstrap/components/modal/sizes.html
@@ -1,14 +1,14 @@
 <!-- Button trigger modal -->
-<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#${2:modelId}">
+<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#${2:modalId}">
   ${1:Launch}
 </button>
 
 <!-- Modal -->
-<div class="modal fade" id="${2:modelId}" tabindex="-1" role="dialog" aria-labelledby="${5:modelTitleId}" aria-hidden="true">
-	<div class="modal-dialog modal-${3:sm|lg}" role="document">
+<div class="modal fade" id="${2:modalId}" tabindex="-1" role="dialog" aria-labelledby="${4:modelTitleId}" aria-hidden="true">
+	<div class="modal-dialog ${3:modal-sm|modal-lg}" role="document">
 		<div class="modal-content">
 			<div class="modal-header">
-				<h5 class="modal-title">${3:Modal title}</h5>
+				<h5 class="modal-title">${5:Modal title}</h5>
 					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
 						<span aria-hidden="true">&times;</span>
 					</button>
diff --git a/snippets/bootstrap/components/nav/a.html b/snippets/bootstrap/components/nav/a.html
index 862d256..cdfb8fd 100644
--- a/snippets/bootstrap/components/nav/a.html
+++ b/snippets/bootstrap/components/nav/a.html
@@ -1,5 +1,5 @@
 <nav class="nav ${1:justify-content-center|justify-content-end}">
-  <a class="nav-link active" href="${3:#}">${2:Active link}</a>
-  <a class="nav-link" href="${5:#}">${4:Link}</a>
+  <a class="nav-link active" href="${2:#}">${3:Active link}</a>
+  <a class="nav-link" href="${4:#}">${5:Link}</a>
   <a class="nav-link disabled" href="#">${6:Disabled link}</a>
 </nav>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/nav/complete.html b/snippets/bootstrap/components/nav/complete.html
index 7db89bb..09c7aa2 100644
--- a/snippets/bootstrap/components/nav/complete.html
+++ b/snippets/bootstrap/components/nav/complete.html
@@ -1,19 +1,19 @@
 <!-- Nav tabs -->
-<ul class="nav nav-${2:tabs|pills}" id="${1:navId}">
+<ul class="nav ${2:nav-tabs|nav-pills}" id="${1:navId}" role="tablist">
 	<li class="nav-item">
-		<a href="#${4:tab1Id}" class="nav-link active">${3:Active}</a>
+		<a href="#${4:tab1Id}" class="nav-link active" role="tab" data-toggle="tab" aria-controls="{3:Active}" aria-selected="true">${3:Active}</a>
 	</li>
 	<li class="nav-item dropdown">
 		<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">${5:Dropdown}</a>
 		<div class="dropdown-menu">
-			<a class="dropdown-item" href="#${7:tab2Id}">${6:Action}</a>
-			<a class="dropdown-item" href="#${9:tab3Id}">${8:Another action}</a>
+			<a class="dropdown-item" href="#${7:tab2Id}" role="tab" data-toggle="tab" aria-controls="{6:Action}" aria-selected="false">${6:Action}</a>
+			<a class="dropdown-item" href="#${9:tab3Id}" role="tab" data-toggle="tab" aria-controls="{8:Another action}" aria-selected="false">${8:Another action}</a>
 			<div class="dropdown-divider"></div>
-			<a class="dropdown-item" href="#${11:tab4Id}">${10:Action}</a>
+			<a class="dropdown-item" href="#${11:tab4Id}" role="tab" data-toggle="tab" aria-controls="{10:Action}" aria-selected="false">${10:Action}</a>
 		</div>
 	</li>
 	<li class="nav-item">
-		<a href="#${13:tab5Id}" class="nav-link">${12:Another link}</a>
+		<a href="#${13:tab5Id}" class="nav-link" role="tab" data-toggle="tab" aria-controls="${12:Another link}" aria-selected="false">${12:Another link}</a>
 	</li>
 	<li class="nav-item">
 		<a href="#" class="nav-link disabled">${14:Disabled}</a>
@@ -29,9 +29,4 @@
 	<div class="tab-pane fade" id="${13:tab5Id}" role="tabpanel">$19</div>
 </div>
 
-<script>
-	$('#${1:navId} a').click(e => {
-		e.preventDefault();
-		$(this).tab('show');
-	});
-</script>
+
diff --git a/snippets/bootstrap/components/nav/tabs-pills-a-variation.html b/snippets/bootstrap/components/nav/tabs-pills-a-variation.html
index 680bb16..5946680 100644
--- a/snippets/bootstrap/components/nav/tabs-pills-a-variation.html
+++ b/snippets/bootstrap/components/nav/tabs-pills-a-variation.html
@@ -1,4 +1,4 @@
-<nav class="nav nav-${1:tabs|pills} ${2:nav-stacked}">
+<nav class="nav ${1:nav-tabs|nav-pills} ${2:flex-column}">
 	<a class="nav-link active" href="${4:#}">${3:Active link}</a>
 	<a class="nav-link" href="${6:#}">${5:Link}</a>
 	<a class="nav-link disabled" href="#">${7:Disabled link}</a>
diff --git a/snippets/bootstrap/components/nav/tabs-pills-dropdown.html b/snippets/bootstrap/components/nav/tabs-pills-dropdown.html
index 60d2bd9..aba0fbe 100644
--- a/snippets/bootstrap/components/nav/tabs-pills-dropdown.html
+++ b/snippets/bootstrap/components/nav/tabs-pills-dropdown.html
@@ -1,4 +1,4 @@
-<ul class="nav nav-${1:tabs|pills}">
+<ul class="nav ${1:nav-tabs|nav-pills}">
 	<li class="nav-item">
 		<a href="${3:#}" class="nav-link active">${2:Active}</a>
 	</li>
diff --git a/snippets/bootstrap/components/nav/tabs-pills-ul-variation.html b/snippets/bootstrap/components/nav/tabs-pills-ul-variation.html
index 2a8d030..e1ca68b 100644
--- a/snippets/bootstrap/components/nav/tabs-pills-ul-variation.html
+++ b/snippets/bootstrap/components/nav/tabs-pills-ul-variation.html
@@ -1,4 +1,4 @@
-<ul class="nav nav-${1:tabs|pills} ${2:nav-stacked}">
+<ul class="nav ${1:nav-tabs|nav-pills} ${2:flex-column}">
 	<li class="nav-item">
 		<a href="${4:#}" class="nav-link active">${3:Active}</a>
 	</li>
diff --git a/snippets/bootstrap/components/navbar/background-color.html b/snippets/bootstrap/components/navbar/background-color.html
index 6d79feb..c677a2c 100644
--- a/snippets/bootstrap/components/navbar/background-color.html
+++ b/snippets/bootstrap/components/navbar/background-color.html
@@ -1,7 +1,9 @@
-<nav class="navbar navbar-expand-${1:sm|md|lg|-xl} navbar-${2:dark|light}" style="background-color: ${3:#e3f2fd;}">
+<nav class="navbar ${1:navbar-expand-sm|navbar-expand-md|navbar-expand-lg|navbar-expand-xl} ${2:navbar-light|navbar-dark}" style="background-color: ${3:#e3f2fd;}">
     <a class="navbar-brand" href="${5:#}">${4:Navbar}</a>
     <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#${6:collapsibleNavId}" aria-controls="${6:collapsibleNavId}"
-        aria-expanded="false" aria-label="${7:Toggle navigation}"></button>
+        aria-expanded="false" aria-label="${7:Toggle navigation}">
+        <span class="navbar-toggler-icon"></span>
+    </button>
     <div class="collapse navbar-collapse" id="${6:collapsibleNavId}">
         <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
             <li class="nav-item active">
diff --git a/snippets/bootstrap/components/navbar/background.html b/snippets/bootstrap/components/navbar/background.html
index 9fcea55..ccc933b 100644
--- a/snippets/bootstrap/components/navbar/background.html
+++ b/snippets/bootstrap/components/navbar/background.html
@@ -1,7 +1,9 @@
-<nav class="navbar navbar-expand-${1:sm|md|lg|-xl} navbar-${2:dark|light} bg-${3:primary|secondary|success|danger|warning|info|light|dark}">
+<nav class="navbar ${1:navbar-expand-sm|navbar-expand-md|navbar-expand-lg|navbar-expand-xl} ${2:navbar-dark|navbar-light} ${3:bg-primary|bg-secondary|bg-success|bg-danger|bg-warning|bg-info|bg-light|bg-dark}">
     <a class="navbar-brand" href="${5:#}">${4:Navbar}</a>
     <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#${6:collapsibleNavId}" aria-controls="${6:collapsibleNavId}"
-        aria-expanded="false" aria-label="${7:Toggle navigation}"></button>
+        aria-expanded="false" aria-label="${7:Toggle navigation}">
+        <span class="navbar-toggler-icon"></span>
+    </button>
     <div class="collapse navbar-collapse" id="${6:collapsibleNavId}">
         <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
             <li class="nav-item active">
diff --git a/snippets/bootstrap/components/navbar/default.html b/snippets/bootstrap/components/navbar/default.html
index 116e7f1..946f082 100644
--- a/snippets/bootstrap/components/navbar/default.html
+++ b/snippets/bootstrap/components/navbar/default.html
@@ -1,5 +1,5 @@
-<nav class="navbar navbar-expand-${1:sm|md|lg|-xl} navbar-light bg-light">
-	<a class="navbar-brand" href="${3:#}">${2:Navbar}</a>
+<nav class="navbar ${1:navbar-expand-sm|navbar-expand-md|navbar-expand-lg|navbar-expand-xl} ${2:navbar-dark|navbar-light} ${3:bg-primary|bg-secondary|bg-success|bg-danger|bg-warning|bg-info|bg-light|bg-dark}">
+	<a class="navbar-brand" href="${19:#}">${20:Navbar}</a>
 	<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#${4:collapsibleNavId}" aria-controls="${4:collapsibleNavId}"
 	    aria-expanded="false" aria-label="${5:Toggle navigation}">
 		<span class="navbar-toggler-icon"></span>
diff --git a/snippets/bootstrap/components/navbar/minimal-a.html b/snippets/bootstrap/components/navbar/minimal-a.html
index 0ea31cf..bc54728 100644
--- a/snippets/bootstrap/components/navbar/minimal-a.html
+++ b/snippets/bootstrap/components/navbar/minimal-a.html
@@ -1,6 +1,6 @@
 <nav class="navbar navbar-expand navbar-light bg-light">
     <div class="nav navbar-nav">
         <a class="nav-item nav-link active" href="${2:#}">${1:Home} <span class="sr-only">(current)</span></a>
-        <a class="nav-item nav-link" href="${4:#}">${3:Home}</a>
+        <a class="nav-item nav-link" href="${4:#}">${3:About}</a>
     </div>
 </nav>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/navbar/placement.html b/snippets/bootstrap/components/navbar/placement.html
index cf3e325..0f069ec 100644
--- a/snippets/bootstrap/components/navbar/placement.html
+++ b/snippets/bootstrap/components/navbar/placement.html
@@ -1,7 +1,9 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light ${1:fixed-top|fixed-bottom|sticky-top}">
     <a class="navbar-brand" href="${3:#}">${2:Navbar}</a>
     <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#${4:collapsibleNavId}" aria-controls="${4:collapsibleNavId}"
-        aria-expanded="false" aria-label="${5:Toggle navigation}"></button>
+        aria-expanded="false" aria-label="${5:Toggle navigation}">
+        <span class="navbar-toggler-icon"></span>
+      </button>
     <div class="collapse navbar-collapse" id="${4:collapsibleNavId}">
       <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
         <li class="nav-item active">
diff --git a/snippets/bootstrap/components/pagination/alignment.html b/snippets/bootstrap/components/pagination/alignment.html
index 54fe2a0..d2ace73 100644
--- a/snippets/bootstrap/components/pagination/alignment.html
+++ b/snippets/bootstrap/components/pagination/alignment.html
@@ -1,6 +1,6 @@
 <nav aria-label="${1:Page navigation}">
-  <ul class="pagination justify-content-${2:center|end}">
-    <li class="page-item disabled">
+  <ul class="pagination ${2:justify-content-center|justify-content-start|justify-content-end|justify-content-between}}">
+    <li class="page-item ${11:disabled}">
       <a class="page-link" href="${4:#}" aria-label="${3:Previous}">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">${3:Previous}</span>
@@ -8,7 +8,7 @@
     </li>
     <li class="page-item active"><a class="page-link" href="${6:#}">$5</a></li>
     <li class="page-item"><a class="page-link" href="${8:#}">$7</a></li>
-    <li class="page-item">
+    <li class="page-item ${11:disabled}">
       <a class="page-link" href="${10:#}" aria-label="${9:Next}">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">${9:Next}</span>
diff --git a/snippets/bootstrap/components/pagination/default.html b/snippets/bootstrap/components/pagination/default.html
index 4a39f8b..75203ea 100644
--- a/snippets/bootstrap/components/pagination/default.html
+++ b/snippets/bootstrap/components/pagination/default.html
@@ -1,17 +1,17 @@
 <nav aria-label="${1:Page navigation}">
   <ul class="pagination">
-    <li class="page-item disabled">
-      <a class="page-link" href="${3:#}" aria-label="${2:Previous}">
+    <li class="page-item ${11:disabled}">
+      <a class="page-link" href="${3:#}" aria-label="${4:Previous}">
         <span aria-hidden="true">&laquo;</span>
-        <span class="sr-only">${2:Previous}</span>
+        <span class="sr-only">${4:Previous}</span>
       </a>
     </li>
-    <li class="page-item active"><a class="page-link" href="${5:#}">$4</a></li>
-    <li class="page-item"><a class="page-link" href="${7:#}">$6</a></li>
-    <li class="page-item">
-      <a class="page-link" href="${9:#}" aria-label="${8:Next}">
+    <li class="page-item active"><a class="page-link" href="${5:#}">${6:1}</a></li>
+    <li class="page-item"><a class="page-link" href="${7:#}">${8:2}</a></li>
+    <li class="page-item ${11:disabled}">
+      <a class="page-link" href="${9:#}" aria-label="${10:Next}">
         <span aria-hidden="true">&raquo;</span>
-        <span class="sr-only">${8:Next}</span>
+        <span class="sr-only">${10:Next}</span>
       </a>
     </li>
   </ul>
diff --git a/snippets/bootstrap/components/pagination/sized.html b/snippets/bootstrap/components/pagination/sized.html
index c03a3d2..be2eaaa 100644
--- a/snippets/bootstrap/components/pagination/sized.html
+++ b/snippets/bootstrap/components/pagination/sized.html
@@ -1,14 +1,14 @@
 <nav aria-label="${1:Page navigation}">
-  <ul class="pagination pagination-${2:lg|sm}">
-    <li class="page-item disabled">
+  <ul class="pagination ${2:pagination-lg|pagination-sm}">
+    <li class="page-item ${11:disabled}">
       <a class="page-link" href="${4:#}" aria-label="${3:Previous}">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">${3:Previous}</span>
       </a>
     </li>
-    <li class="page-item active"><a class="page-link" href="${6:#}">$5</a></li>
-    <li class="page-item"><a class="page-link" href="${8:#}">$7</a></li>
-    <li class="page-item">
+    <li class="page-item active"><a class="page-link" href="${6:#}">${5:1}</a></li>
+    <li class="page-item"><a class="page-link" href="${8:#}">${7:2}</a></li>
+    <li class="page-item ${11:disabled}">
       <a class="page-link" href="${10:#}" aria-label="${9:Next}">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">${9:Next}</span>
diff --git a/snippets/bootstrap/components/popover/default.html b/snippets/bootstrap/components/popover/default.html
index cc5de5f..19d81ac 100644
--- a/snippets/bootstrap/components/popover/default.html
+++ b/snippets/bootstrap/components/popover/default.html
@@ -1 +1,11 @@
-<button type="button" class="btn btn-secondary" data-toggle="popover" title="${2:Popup title}" data-content="${3:Popup content}">${1:Trigger}</button>
\ No newline at end of file
+<button type="button" class="btn btn-secondary" data-toggle="popover" title="${2:Popup title}"
+	data-content="${3:Popup content}">${1:Trigger}</button>
+
+
+
+
+<script>
+	$(function () {
+		$('[data-toggle="popover"]').popover()
+	})
+</script>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/popover/direction.html b/snippets/bootstrap/components/popover/direction.html
index 0f8fc32..3343608 100644
--- a/snippets/bootstrap/components/popover/direction.html
+++ b/snippets/bootstrap/components/popover/direction.html
@@ -1 +1,9 @@
-<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="${4:top|right|bottom|left}" title="${2:Popup title}" data-content="${3:Popup content}">${1:Trigger}</button>
\ No newline at end of file
+<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="${4:top|right|bottom|left}"
+	title="${2:Popup title}" data-content="${3:Popup content}">${1:Trigger}</button>
+
+
+<script>
+	$(function () {
+		$('[data-toggle="popover"]').popover()
+	})
+</script>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/popover/dismissable.html b/snippets/bootstrap/components/popover/dismissable.html
index 13e7958..bb0fcca 100644
--- a/snippets/bootstrap/components/popover/dismissable.html
+++ b/snippets/bootstrap/components/popover/dismissable.html
@@ -1 +1,9 @@
-<a tabindex="0" class="btn btn-secondary" data-toggle="popover" data-trigger="focus" title="${2:Popup title}" data-content="${3:Popup content}">${1:Trigger}</a>
\ No newline at end of file
+<a tabindex="0" class="btn btn-secondary" data-toggle="popover" data-trigger="focus" title="${2:Popup title}"
+	data-content="${3:Popup content}">${1:Trigger}</a>
+
+
+<script>
+	$(function () {
+		$('[data-toggle="popover"]').popover()
+	})
+</script>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/progress/colored.html b/snippets/bootstrap/components/progress/colored.html
index 4178712..c8318e4 100644
--- a/snippets/bootstrap/components/progress/colored.html
+++ b/snippets/bootstrap/components/progress/colored.html
@@ -1,4 +1,4 @@
 <div class="progress">
-    <div class="progress-bar bg-${5:primary|secondary|success|danger|warning|info|light|dark}" role="progressbar" style="width: ${4:25}%;"
+    <div class="progress-bar ${5:bg-primary|bg-secondary|bg-success|bg-danger|bg-warning|bg-info|bg-light|bg-dark}" role="progressbar" style="width: ${4:25}%;"
         aria-valuenow="${4:25}" aria-valuemin="${2:0}" aria-valuemax="${3:100}">${1:Description}</div>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/progress/striped.html b/snippets/bootstrap/components/progress/striped.html
index 44388a4..86e0443 100644
--- a/snippets/bootstrap/components/progress/striped.html
+++ b/snippets/bootstrap/components/progress/striped.html
@@ -1,4 +1,4 @@
 <div class="progress">
-    <div class="progress-bar progress-bar-striped ${6:progress-bar-animated} bg-${5:primary|secondary|success|danger|warning|info|light|dark}" role="progressbar"
+    <div class="progress-bar progress-bar-striped ${6:progress-bar-animated} ${5:bg-primary|bg-secondary|bg-success|bg-danger|bg-warning|bg-info|bg-light|bg-dark}" role="progressbar"
         style="width: ${4:25}%;" aria-valuenow="${4:25}" aria-valuemin="${2:0}" aria-valuemax="${3:100}">${1:Description}</div>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/scrollspy/default.html b/snippets/bootstrap/components/scrollspy/default.html
index 3202595..6143921 100644
--- a/snippets/bootstrap/components/scrollspy/default.html
+++ b/snippets/bootstrap/components/scrollspy/default.html
@@ -1,22 +1,25 @@
+<!-- Place in the <head> -->
 <style>
 	${1:div|body} {
 		position: relative;
 	}
 </style>
 
-<${1:div|body} data-spy="scroll" data-target="#${2:navId}">
+<${1:div|body} data-spy="scroll" data-target="#${2:navId}" data-offset="0">
 	$4
 	<div id="${2:navId}">
-		<ul class="nav nav-tabs" role="tablist">
-			$3
+		<ul class="nav nav-tabs" role="tablist" >
+			b4-li$3
 		</ul>
 	</div>
 	$5
 </${1:div|body}>
 
 
+
+<!-- Place to the bottom -->
 <script>
-	$('$1{1:div|body}').scrollspy({
+	$('${1:div|body}').scrollspy({
 		target: '#${2:navId}'
 	});
 </script>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/spinner/button.html b/snippets/bootstrap/components/spinner/button.html
new file mode 100644
index 0000000..d6e2e56
--- /dev/null
+++ b/snippets/bootstrap/components/spinner/button.html
@@ -0,0 +1,4 @@
+<button class="btn ${1:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}" type="button" disabled>
+	<span class="${2:spinner-border|spinner-grow} ${4:spinner-border-sm|spinner-border-lg|spinner-grow-sm|spinner-grow-lg}" role="status" aria-hidden="true"></span>
+	Loading...
+  </button>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/spinner/default.html b/snippets/bootstrap/components/spinner/default.html
new file mode 100644
index 0000000..c5ce2e7
--- /dev/null
+++ b/snippets/bootstrap/components/spinner/default.html
@@ -0,0 +1,6 @@
+<div class="d-flex ${1:justify-content-center|justify-content-start|justify-content-end|justify-content-between}">
+	<div class="${2:spinner-border|spinner-grow} ${3:text-primary|text-secondary|text-success|text-danger|text-warning|text-info|text-light|text-dark} ${4:spinner-border-sm|spinner-border-lg|spinner-grow-sm|spinner-grow-lg}"
+		role="status">
+		<span class="sr-only">Loading...</span>
+	</div>
+</div>
\ No newline at end of file
diff --git a/snippets/bootstrap/components/toast/default.html b/snippets/bootstrap/components/toast/default.html
new file mode 100644
index 0000000..cd3607a
--- /dev/null
+++ b/snippets/bootstrap/components/toast/default.html
@@ -0,0 +1,22 @@
+<!-- Flexbox container for aligning the toasts -->
+<div aria-live="polite" aria-atomic="true" class="d-flex ${1:justify-content-center|justify-content-start|justify-content-end|justify-content-between} ${2:align-items-center|align-items-start|align-items-end}" style="min-height: 200px;">
+
+	<!-- Then put toasts within -->
+	<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+	  <div class="toast-header">
+		<img src="$3" class="rounded mr-2" alt="...">
+		<strong class="mr-auto">{4:Bootstrap}</strong>
+		<small>{5:11 mins ago}</small>
+		<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+		  <span aria-hidden="true">&times;</span>
+		</button>
+	  </div>
+	  <div class="toast-body">
+		${6:Hello, world! This is a toast message.}
+	  </div>
+	</div>
+  </div>
+
+
+
+$('.toast').toast(option)
\ No newline at end of file
diff --git a/snippets/bootstrap/components/tooltip/default.html b/snippets/bootstrap/components/tooltip/default.html
index e117d3f..4652709 100644
--- a/snippets/bootstrap/components/tooltip/default.html
+++ b/snippets/bootstrap/components/tooltip/default.html
@@ -1,3 +1,12 @@
-<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="${2:top|right|bottom|left}" title="$1">
-	${3:Button name}
-</button>
\ No newline at end of file
+<button type="button"
+	class="btn ${3:btn-primary|btn-secondary|btn-success|btn-danger|btn-warning|btn-info|btn-light|btn-dark|btn-link}"
+	data-toggle="tooltip" data-placement="${2:top|right|bottom|left}" title="${1:Tooltip Example}">
+	${4:Button name}
+</button>
+
+
+<script>
+	$(function () {
+		$('[data-toggle="tooltip"]').tooltip()
+	})
+</script>
\ No newline at end of file
diff --git a/snippets/bootstrap/content/figure/default.html b/snippets/bootstrap/content/figure/default.html
index f8b2c2f..d44f8bc 100644
--- a/snippets/bootstrap/content/figure/default.html
+++ b/snippets/bootstrap/content/figure/default.html
@@ -1,4 +1,4 @@
 <figure class="figure">
 	<img src="$1" class="figure-img img-fluid rounded" alt="$2">
-	<figcaption class="figure-caption ${4:text-xs-right}">$3</figcaption>
+	<figcaption class="figure-caption ${4:text-xs-right|text-center}">${3:Caption}</figcaption>
 </figure>
\ No newline at end of file
diff --git a/snippets/bootstrap/content/image/default.html b/snippets/bootstrap/content/image/default.html
index 54ef10d..53e8c04 100644
--- a/snippets/bootstrap/content/image/default.html
+++ b/snippets/bootstrap/content/image/default.html
@@ -1 +1 @@
-<img src="$1" class="img-${2:fluid|thumbnail} ${3:rounded-top|rounded-right|rounded-bottom|rounded-left|rounded-circle|}" alt="$4">
\ No newline at end of file
+<img src="$1" class="${2:img-fluid|img-thumbnail} ${3:rounded-top|rounded-right|rounded-bottom|rounded-left|rounded-circle}" alt="$4">
\ No newline at end of file
diff --git a/snippets/bootstrap/content/table/default.html b/snippets/bootstrap/content/table/default.html
index eeabb91..6932426 100644
--- a/snippets/bootstrap/content/table/default.html
+++ b/snippets/bootstrap/content/table/default.html
@@ -1,21 +1,21 @@
 <table class="table">
 	<thead>
 		<tr>
-			<th>$1</th>
-			<th>$2</th>
-			<th>$3</th>
+			<th>${1:col1 header}</th>
+			<th>${2:col2 header}</th>
+			<th>${3:col3 header}</th>
 		</tr>
-	</thead>
-	<tbody>
-		<tr>
-			<td scope="row">$4</td>
-			<td>$5</td>
-			<td>$6</td>
-		</tr>
-		<tr>
-			<td scope="row">$7</td>
-			<td>$8</td>
-			<td>$9</td>
-		</tr>$END$
-	</tbody>
+		</thead>
+		<tbody>
+			<tr>
+				<td scope="row">${4:c1r1}</td>
+				<td>${5:c2r1}</td>
+				<td>${6:c3r1}</td>
+			</tr>
+			<tr>
+				<td scope="row">${7:c1r2}</td>
+				<td>${8:c2r2}</td>
+				<td>${9:c3r2}</td>
+			</tr>$END$
+		</tbody>
 </table>
diff --git a/snippets/bootstrap/content/table/special.html b/snippets/bootstrap/content/table/special.html
index 0bc7fcb..5ba1949 100644
--- a/snippets/bootstrap/content/table/special.html
+++ b/snippets/bootstrap/content/table/special.html
@@ -1,21 +1,21 @@
-<table class="table table-${1:striped|sm|bordered|hover|inverse} ${2:table-inverse} ${3:table-responsive}">
+<table class="table ${1:table-striped|table-sm|table-bordered|table-hover|table-inverse} ${2:table-inverse} ${3:table-responsive}">
 	<thead class="${4:thead-inverse|thead-default}">
 		<tr>
-			<th>$5</th>
-			<th>$6</th>
-			<th>$7</th>
+			<th>${5:col1 header}</th>
+			<th>${6:col2 header}</th>
+			<th>${7:col3 header}</th>
 		</tr>
 		</thead>
 		<tbody>
 			<tr>
-				<td scope="row">$8</td>
-				<td>$9</td>
-				<td>$10</td>
+				<td scope="row">${8:c1r1}</td>
+				<td>${9:c2r1}</td>
+				<td>${10:c3r1}</td>
 			</tr>
 			<tr>
-				<td scope="row">$11</td>
-				<td>$12</td>
-				<td>$13</td>
+				<td scope="row">${11:c1r2}</td>
+				<td>${12:c2r2}</td>
+				<td>${13:c3r2}</td>
 			</tr>$END$
 		</tbody>
 </table>
diff --git a/snippets/bootstrap/content/typography/blockquote-reverse.html b/snippets/bootstrap/content/typography/blockquote-reverse.html
index 186b5fb..0a107e5 100644
--- a/snippets/bootstrap/content/typography/blockquote-reverse.html
+++ b/snippets/bootstrap/content/typography/blockquote-reverse.html
@@ -1,4 +1,4 @@
 <blockquote class="blockquote text-right">
-	<p class="mb-0">$1</p>
-	<footer class="blockquote-footer">$2 <cite title="${3:Source Title}">${3:Source Title}</cite></footer>
+	<p class="mb-0">${1:Meaningful Quotes}</p>
+	<footer class="blockquote-footer">${2:Someone famous in} <cite title="${3:Source Title}">${3:Source Title}</cite></footer>
 </blockquote>
\ No newline at end of file
diff --git a/snippets/bootstrap/content/typography/blockquote.html b/snippets/bootstrap/content/typography/blockquote.html
index 0c7a9bc..30f22f0 100644
--- a/snippets/bootstrap/content/typography/blockquote.html
+++ b/snippets/bootstrap/content/typography/blockquote.html
@@ -1,4 +1,4 @@
 <blockquote class="blockquote">
-	<p class="mb-0">$1</p>
-	<footer class="blockquote-footer">$2 <cite title="${3:Source Title}">${3:Source Title}</cite></footer>
+	<p class="mb-0">${1:Meaningful Quotes}</p>
+	<footer class="blockquote-footer">${2:Someone famous in} <cite title="${3:Source Title}">${3:Source Title}</cite></footer>
 </blockquote>
\ No newline at end of file
diff --git a/snippets/bootstrap/content/typography/description-list.html b/snippets/bootstrap/content/typography/description-list.html
index 61eec4a..43605d8 100644
--- a/snippets/bootstrap/content/typography/description-list.html
+++ b/snippets/bootstrap/content/typography/description-list.html
@@ -1,16 +1,16 @@
 <dl class="row">
-	<dt class="col-sm-3">$1</dt>
-	<dd class="col-sm-9">$2</dd>
+	<dt class="col-sm-3">${1:Description List}</dt>
+	<dd class="col-sm-9">${2:Long Description}</dd>
 	<dt class="col-sm-3">$3</dt>
 	<dd class="col-sm-9">$4</dd>
 	<dd class="col-sm-9 offset-sm-3">$5</dd>
-	<dt class="col-sm-3 text-truncate">$6</dt>
+	<dt class="col-sm-3 text-truncate">${6:lorem}</dt>
 	<dd class="col-sm-9">$7</dd>
-	<dt class="col-sm-3"></dt>
+	<dt class="col-sm-3">{8:Nesting}</dt>
 	<dd class="col-sm-9">
 		<dl class="row">
-			<dt class="col-sm-4">${8:Nested title}</dt>
-			<dd class="col-sm-8">${9:Nested definition}</dd>
+			<dt class="col-sm-4">${9:Nested title}</dt>
+			<dd class="col-sm-8">${10:Nested definition}</dd>
 		</dl>
 	</dd>
 </dl>
\ No newline at end of file
diff --git a/snippets/bootstrap/content/typography/display-heading.html b/snippets/bootstrap/content/typography/display-heading.html
index 1672097..c704f24 100644
--- a/snippets/bootstrap/content/typography/display-heading.html
+++ b/snippets/bootstrap/content/typography/display-heading.html
@@ -1 +1 @@
-<h1 class="display-${1:1|2|3|4}">$2</h1>
\ No newline at end of file
+<h1 class="${1:display-1|display-2|display-3|display-4}">${2:Heading}</h1>
\ No newline at end of file
diff --git a/snippets/bootstrap/content/typography/lead.html b/snippets/bootstrap/content/typography/lead.html
index 48d137e..8936d92 100644
--- a/snippets/bootstrap/content/typography/lead.html
+++ b/snippets/bootstrap/content/typography/lead.html
@@ -1,3 +1,3 @@
 <p class="lead">
-    $2
+    ${2:Lead the way Captain}
 </p>
\ No newline at end of file
diff --git a/snippets/bootstrap/content/typography/list-inline.html b/snippets/bootstrap/content/typography/list-inline.html
index fcff841..53cbb31 100644
--- a/snippets/bootstrap/content/typography/list-inline.html
+++ b/snippets/bootstrap/content/typography/list-inline.html
@@ -1,5 +1,5 @@
 <ul class="list-inline">
-	<li class="list-inline-item">$1</li>
-	<li class="list-inline-item">$2</li>
-	<li class="list-inline-item">$3</li>
+	<li class="list-inline-item">${1:Item 1}</li>
+	<li class="list-inline-item">${2:Item 2}</li>
+	<li class="list-inline-item">${3:Item 3}</li>
 </ul>
\ No newline at end of file
diff --git a/snippets/bootstrap/content/typography/list-unstyled.html b/snippets/bootstrap/content/typography/list-unstyled.html
index 0c14286..0907433 100644
--- a/snippets/bootstrap/content/typography/list-unstyled.html
+++ b/snippets/bootstrap/content/typography/list-unstyled.html
@@ -1,5 +1,5 @@
 <ul class="list-unstyled">
-	<li>$1</li>
-	<li>$2</li>
-	<li>$3</li>
+	<li>${1:Item 1}</li>
+	<li>${2:Item 2}</li>
+	<li>${3:Item 3}</li>
 </ul>
\ No newline at end of file
diff --git a/snippets/bootstrap/content/typography/muted-text.html b/snippets/bootstrap/content/typography/muted-text.html
index bf5ccab..59b064f 100644
--- a/snippets/bootstrap/content/typography/muted-text.html
+++ b/snippets/bootstrap/content/typography/muted-text.html
@@ -1 +1 @@
-<small class="text-muted">$1</small>
\ No newline at end of file
+<small class="text-muted">${1:Muted Text for information}</small>
\ No newline at end of file
diff --git a/snippets/bootstrap/layout/grid/col.html b/snippets/bootstrap/layout/grid/col.html
index 70f9350..91e7b35 100644
--- a/snippets/bootstrap/layout/grid/col.html
+++ b/snippets/bootstrap/layout/grid/col.html
@@ -1,3 +1,3 @@
-<div class="col-${1:xs|sm|md|lg|xl}-${2:1-12}">
-	$3
+<div class="${1:col-xs-9|col-sm-6|col-md-4|col-lg-3|col-xl-2|col-12|col|col-md-auto}">
+	$2
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/layout/grid/container-fluid.html b/snippets/bootstrap/layout/grid/container-fluid.html
index 43b0992..dd6649b 100644
--- a/snippets/bootstrap/layout/grid/container-fluid.html
+++ b/snippets/bootstrap/layout/grid/container-fluid.html
@@ -1,3 +1,4 @@
-<div class="container-fluid">
-	$1
+<!-- can be deleted -->
+<div class="${1:container|container-fluid}">
+	$2
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/layout/grid/container.html b/snippets/bootstrap/layout/grid/container.html
index d2abf18..d40f2ab 100644
--- a/snippets/bootstrap/layout/grid/container.html
+++ b/snippets/bootstrap/layout/grid/container.html
@@ -1,3 +1,3 @@
-<div class="container">
-	$1
+<div class="${1:container|container-fluid}">
+	$2
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/layout/grid/default.html b/snippets/bootstrap/layout/grid/default.html
index 284b138..39c6aab 100644
--- a/snippets/bootstrap/layout/grid/default.html
+++ b/snippets/bootstrap/layout/grid/default.html
@@ -1,8 +1,10 @@
-<div class="container">
+<div class="${1:container|container-fluid}">
 	<div class="row">
-		<div class="col-${1:xs|sm|md|lg|xl}-${2:1-12}">
-			$3
+		<div class="${2:col-xs-9|col-sm-6|col-md-4|col-lg-3|col-xl-2|col-12|col|col-md-auto}">
+			$4
+		</div>
+		<div class="${3:col-xs-9|col-sm-6|col-md-4|col-lg-3|col-xl-2|col-12|col|col-md-auto}">
+			$5
 		</div>
-		$4
 	</div>
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/layout/media/bottom.html b/snippets/bootstrap/layout/media/bottom.html
index 21996dc..e92344d 100644
--- a/snippets/bootstrap/layout/media/bottom.html
+++ b/snippets/bootstrap/layout/media/bottom.html
@@ -1,5 +1,5 @@
 <div class="media">
-	<a class="d-flex align-self-bottom" href="${1:#}">
+	<a class="align-self-end" href="${1:#}">
 	  	<img src="$2" alt="$3">
 	</a>
 	<div class="media-body">
diff --git a/snippets/bootstrap/layout/media/middle.html b/snippets/bootstrap/layout/media/middle.html
index 7add44c..9269246 100644
--- a/snippets/bootstrap/layout/media/middle.html
+++ b/snippets/bootstrap/layout/media/middle.html
@@ -1,5 +1,5 @@
 <div class="media">
-	<a class="d-flex align-self-center" href="${1:#}">
+	<a class="align-self-center" href="${1:#}">
 	  	<img src="$2" alt="$3">
 	</a>
 	<div class="media-body">
diff --git a/snippets/bootstrap/layout/media/top.html b/snippets/bootstrap/layout/media/top.html
index a3094d2..2fba7c0 100644
--- a/snippets/bootstrap/layout/media/top.html
+++ b/snippets/bootstrap/layout/media/top.html
@@ -1,5 +1,5 @@
 <div class="media">
-    <a class="d-flex align-self-start" href="${1:#}">
+    <a class="align-self-start" href="${1:#}">
       <img src="$2" alt="$3">
   </a>
     <div class="media-body">
diff --git a/snippets/bootstrap/layout/responsive/hide-down.html b/snippets/bootstrap/layout/responsive/hide-down.html
index 1a91a6b..9f8778a 100644
--- a/snippets/bootstrap/layout/responsive/hide-down.html
+++ b/snippets/bootstrap/layout/responsive/hide-down.html
@@ -1,3 +1,3 @@
-<div class="d-none d-${1:sm|md|lg|xl}-block">
-	$2
+<div class="d-none ${1:d-sm-block|d-md-block|d-lg-block|d-xl-block}">
+	${2:Hide under screen size above}
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/layout/responsive/hide-up.html b/snippets/bootstrap/layout/responsive/hide-up.html
index e411e09..b07a074 100644
--- a/snippets/bootstrap/layout/responsive/hide-up.html
+++ b/snippets/bootstrap/layout/responsive/hide-up.html
@@ -1,3 +1,3 @@
-<div class="d-${1:sm|md|lg|xl}-none">
-	$2
+<div class="${1:d-sm-none|d-md-none|d-lg-none|d-xl-none}">
+	${2:Hides until that screen size}
 </div>
\ No newline at end of file
diff --git a/snippets/bootstrap/layout/responsive/print-show.html b/snippets/bootstrap/layout/responsive/print-show.html
index c40c55e..02e5b47 100644
--- a/snippets/bootstrap/layout/responsive/print-show.html
+++ b/snippets/bootstrap/layout/responsive/print-show.html
@@ -1,3 +1,3 @@
-<div class="d-print-${1:block|inline|inline-block|none}">
-  	$2
+<div class="${1:d-print-block|d-print-inline|d-print-inline-block|d-print-none}">
+  	${2:For example, d-none d-lg-block d-print-block : hide up to large on screen, but always show on print}
 </div>
\ No newline at end of file