Full Review

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>

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>

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>

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>

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>

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>

snippets/bootstrap/components/badge/default.html

@@ -1 +1 @@
-<span class="badge badge-${1:primary|secondary|success|danger|warning|info|light|dark}">$2</span>
+<span class="badge ${1:badge-primary|badge-secondary|badge-success|badge-danger|badge-warning|badge-info|badge-light|badge-dark}">${2:Notification}</span>

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}>
+<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}>

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>
+<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>

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>
+<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>

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>

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>

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>

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>

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>

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>

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>

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>
+<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>

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>
+<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>

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>

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>
+<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>

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>
+<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>

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">
+<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}">

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>

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>

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>
+<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>

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>
+<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>

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>

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>

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>

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>