update cmd line

snippets/B5-Snippets/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

snippets/B5-Snippets/.gitignore

@@ -0,0 +1,110 @@
+# Ignore
+.vscode/
+src/
+publishing/
+.env
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

snippets/B5-Snippets/.gitpod.yml

@@ -0,0 +1,11 @@
+# tasks:
+#   - init: echo "Replace me with a build script for the project."
+#     command: mkdir -p /workspace/data && mongod --dbpath /workspace/data --fork --logpath /workspace/data/mongod.log
+ports:
+   - port: 3000
+     onOpen: open-preview
+vscode:
+   extensions:
+      - auchenberg.vscode-browser-preview@0.6.7:UsqnxvUQdYtm8ZISiN056w==
+      - evilz.vscode-reveal@4.0.4:q3Ae+UO4Nv6SYzToAsa1zw==
+      - HansUXdev.bootstrap5-snippets@1.2.3:e23xRdDNFFIPdzsiYVQ07g==

snippets/B5-Snippets/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 3,
+  "useTabs": true
+}

snippets/B5-Snippets/.vscodeignore

@@ -0,0 +1,10 @@
+.vscode/**
+.vscode-test/**
+out/test/**
+src/**
+.gitignore
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/tslint.json
+**/*.map
+**/*.ts

snippets/B5-Snippets/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Change Log
+
+All notable changes to the "b5-snippets" extension will be documented in this file.
+
+Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+
+## [Unreleased]
+
+- Initial release

snippets/B5-Snippets/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Brett Hans McMurdy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

snippets/B5-Snippets/NOTES.md

@@ -0,0 +1 @@
+1. [Validate Json](https://jsonformatter.curiousconcept.com/#) after concat

snippets/B5-Snippets/README.md

@@ -0,0 +1,275 @@
+# Bootstrap 5 
+[![Version](https://vsmarketplacebadge.apphb.com/version/HansUXdev.bootstrap5-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=HansUXdev.bootstrap5-snippets)
+[![Installs](https://vsmarketplacebadge.apphb.com/installs/HansUXdev.bootstrap5-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=HansUXdev.bootstrap5-snippets)
+[![Ratings](https://vsmarketplacebadge.apphb.com/rating/HansUXdev.bootstrap5-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=HansUXdev.bootstrap5-snippets)
+
+[![The MIT License](https://img.shields.io/badge/license-MIT-orange.svg?style=flat-square)](http://opensource.org/licenses/MIT) [![GitHub](https://img.shields.io/github/stars/HansUXdev/B5-Snippets.svg?style=flat-square)](https://github.com/HansUXdev/B5-Snippets) [![GitHub](https://img.shields.io/github/followers/HansUXdev.svg?style=flat-square)](https://github.com/HansUXdev)
+
+
+
+<!-- [![GitHub](https://img.shields.io/github/release/HansUXdev/B5-Snippets.svg?style=flat-square)](https://github.com/HansUXdev/B5-Snippets/releases) -->
+
+The first, (currently only) and hands down BEST bootstrap 5 snippet extension. Includes templates, powerful utility snippets, and much more.
+
+## Features
+1. Templates one tab away
+2. Powerful utilities
+3. Font Awesome icons ! (currently 4.7, eventually 6.0)
+4. Much more hidden...
+<!-- 5. hidden snippets to convert ya'll to javascript fans, such as !http -->
+6. Much more planned, so consider giving it a star on [github](https://github.com/HansUXdev/B5-Snippets) or the [marketplace](https://marketplace.visualstudio.com/items?itemName=HansUXdev.bootstrap5-snippets), become a [sponsor](https://github.com/sponsors/HansUXdev/).
+
+![](Templates2.gif)
+
+
+# Open Source Marketplace
+This may surprizes you but VS-Code and it's marketplace aren't really open source, is licensed under a not-FLOSS license and contains telemetry/tracking, [read more...](https://vscodium.com/)
+
+This extension is built for [open-vsx](https://open-vsx.org/) and published on the ONLY [open source registry](https://open-vsx.org/about) for VS Code extensions.
+
+<!-- 
+If you are reading this, it's because I opened sourced it. Hopefully you love open source as much as me...
+
+Don't share this code comment with anyone. It'll be our little inside joke.
+
+Wanna conduct an expirment together?
+1. Give this extension 5 stars. Write an awesome review.
+2. Share it and promote it on social media, twitter, facebook, linkedin, etc... 
+3. Lets see if we can get ~20-100k downloads.
+4. Just as people are getting hooked, I'll uncomment the text below. 
+    Then remove the extension from the stor at a random time to raise awareness about open source.
+    If you are a publisher of an extension, or snippet, you do the same thing.
+-->
+
+<!-- **Eventually, this extension may be removed from [visual studio marketplace](https://marketplace.visualstudio.com/) in order raise awareness**.  -->
+
+Learn more about **open source** versions of vscode such as [vscodium](https://vscodium.com/), [GitPod's IDE](https://www.gitpod.io/docs/ide/) and more.
+<!-- 
+## Installing
+The simplest way is to install command line.
+`code --install-extension myextension.vsix` -->
+
+## Notes
+Bootstrap 5 is currently in alpha and this extension should be considered in the same status.
+Unlike a lot of other snippets, this extension aims to balence user simplicity, with power and flexibility by keeping the **total number of snippets to a minimum**. 
+
+In terms of **user simplicity**, other Bootstrap 4 snippets have 5 different snippets for the grid, whereas this will have 3, but each is more powerful.
+
+## Roadmap
+* v1.2.5 - Introduces Flex utilities, media-query and awesome awesome 4.7.0.
+* v1.6-8 - Each snippet with eventually have a gif demo (SOON).
+* v2 - All base [templates](https://v5.getbootstrap.com/docs/5.0/examples/) and several others will be one tab away, so consider  [sponsoring this](https://github.com/sponsors/HansUXdev/) or giving it a star.
+
+---
+
+## Powerful, Simple, **Flex** Snippets
+> **Center, position or reorder any element, by any default breakpoint with under 10 snippets.**
+
+
+Trigger | Description
+--- | ---
+`!templates` | Sets the display type.
+`!utilities` | Sets the display type.
+`b5-` | Main component snippets.
+`fa-` | Font Awesome component snippets.
+
+---
+
+## Templates/Layout
+Templates are just one tab away. Most of the [official example templates](https://v5.getbootstrap.com/docs/5.0/examples/) have been implmented.
+
+Trigger | Description
+--- | ---
+!b5-$ | Shortcut creating an html document with cdn scripts included
+!b5-$Offcanvas | Offcanvas Template, one tab away.
+!b5$Template-name | More coming soon... 
+
+---
+
+## Powerful Utility Classes
+There are two way to use utilities.
+1. **Class utilities**, which use `!` as a prefix. For example, if you want to add a utility class to an existing HTML element, inside of `class=" "` you would add `class="!spacing"` then hit tab and fill out the options, the default will be `class="mx-auto"` which sets margin to auto on left and right (x).
+2. **Wrapper elements**, ex: `b5-{txt,color,shadow,boder,spacing}` which will create a div, p, h2 then allow you to tab through the options. 
+
+Trigger | Description
+--- | ---
+`!spacing` or `b5-spacing` | A single, powerful utility snippet. The default is `mx-auto` which adds margins on right and left. The options allow you to switch between (m)argin and (p)adding, x,y,(t)op,(r)ight, (b)ottom, (l)eft, etc. Read about the classes on the [official bootstrap documentation](https://v5.getbootstrap.com/docs/5.0/utilities/spacing/).
+`!shadow` or `b5-shadow` | Useful whenever you want to make things look like paper or material design. Read about the classes on the [official bootstrap documentation](https://v5.getbootstrap.com/docs/5.0/utilities/spacing/). https://v5.getbootstrap.com/docs/5.0/utilities/shadows/
+`!font` or `b5-text` | This intentionally uses two different names to differentiate between the class utility and the wrapper element. The options are responsive positions `{|sm,md,lg,xl|}-${|left,center,right|}`, line-height `base,1,sm,lg}`, font-weight `normal,italic,weight-normal,weight-bold,weight-bolder,weight-light,weight-lighter` ,and `text-${6|none,lowercase,uppercase,capitalize|}`, decoration and `reset,break,monospace` !
+`b5-border` | change border attributes all border attributes. Read about the classes on the [official bootstrap documentation](https://v5.getbootstrap.com/docs/5.0/utilities/borders/).
+
+
+---
+
+## Powerful, Simple, **Flex** Snippets
+> **Center, position or reorder any element, by any default breakpoint with under 10 snippets.**
+
+
+Trigger | Description
+--- | ---
+`!!MQ` | Sets the display type.
+`!flex` | Sets the display type.
+`!justify` | Sets the display type.
+`!align` | Sets the display type.
+`!fill` | Sets the display type.
+`!grow-shrink` | Sets the display type.
+`!flex-wrap` | Sets the display type.
+`!flex-order` | Sets the display type.
+
+---
+
+#### Grid
+This is works great but it may be simplified and rewritten. 
+I'm also toying around with new utility snippet to that combines the [display classes](https://v5.getbootstrap.com/docs/5.0/utilities/display/) and [flex classes](https://v5.getbootstrap.com/docs/5.0/utilities/flex/). If you have any thoughts or suggestions, let me know on github.
+
+Trigger | Description
+--- | ---
+b5-**container** | Grid container with options for -fluid, px, gy and more.
+b5-**row** | Powerful row, `${1| ,row-cols-2,row-cols-3, auto,justify-content-md-center,md,lg,xl,xxl|}`. Default to row with optional utility classes. 
+b5-**col** | Pretty much all your need covered and more. Ex: `col${1| ,-1,-2,-3,-4,-5,-6,-sm,-md,-lg,-xl,-xxl|}${2| ,-auto,-1,-2,-3,-4,-5,-6,-7,-8,-9,-10,-11,-12`
+
+#### Navbar
+
+Trigger | Description
+--- | ---
+b5-**navbar-default** | Navbar default
+b5-**navbar-scollspy** | V1 is here
+b5-**Nav-bottom** | V1 is here
+
+b5-**nav-item** | item with link and options for common pages such as Home, About, Blog, Contact.
+b5-**navlink** | link
+b5-**nav-dropdown** | dropdown
+b5-**nav-dropdown toggle** | Navbar toggle
+b5-**nav-** | more in this category coming soon...
+
+#### Button
+
+Trigger | Description
+--- | ---
+b5-**btn** | Button with link
+b5-**btn-o** | Button with outline
+b5-**btn-close** | Close buttons...
+b5-**btn-** | more in this category coming soon...
+
+
+
+#### Cards
+
+Trigger | Description
+--- | ---
+b5-**card** | Basic Card
+b5-**card-** | more in this category coming soon...
+
+
+#### modal
+
+Trigger | Description
+--- | ---
+b5-**modal** | Basic modal
+b5-**modal-** | more in this category coming soon...
+
+#### Collapse
+
+Trigger | Description
+--- | ---
+b5-**btn-reveal** | Click a button and reveal some content.
+b5-**modal-** | more in this category coming soon...
+
+
+#### JavaScript
+I plan on eventually adding bootstrap snippet for the JavaScript but its not on the roadmap yet because I'm also working on this [massive javascript extension](https://marketplace.visualstudio.com/items?itemName=HansUXdev.javascript-first-snippets) which will replace about 5-10 of the most popular extensions add and add things like optional chaining among other methods.
+
+Trigger | Description
+--- | ---
+`jb5` | consider submitting a PR or becoming a [sponsor](https://github.com/sponsors/HansUXdev/).
+
+<!-- #### Bgroup
+Trigger | Description
+--- | ---
+b5-**bgroup-default** | Bgroup default
+b5-**bgroup-dropdown-vertical** | Bgroup dropdown vertical
+b5-**bgroup-dropdown** | Bgroup dropdown
+b5-**bgroup-size** | Bgroup size
+b5-**bgroup-toolbar** | Bgroup toolbar -->
+
+<!-- #### Dropdown
+
+Trigger | Description
+--- | ---
+b5-**dropdown-alignment** | Dropdown alignment
+b5-**dropdown-anchor** | Dropdown anchor
+b5-**dropdown-button** | Dropdown button
+b5-**dropdown-colored** | Dropdown colored
+b5-**dropdown-default** | Dropdown default
+b5-**dropdown-sized** | Dropdown sized
+b5-**dropdown-split** | Dropdown split
+b5-**dropdown-up-split** | Dropdown up split
+b5-**dropdown-up** | Dropdown up -->
+
+
+
+<!-- ## Known Issues
+No serious issue known at the moment. -->
+
+## Release Notes
+
+Users appreciate release notes as you update your extension.
+
+### 1.2.3 - Updated documentation, added templates and much more.
+
+### 1.2.5 - Fixed Bugs
+- [x] Flex Utilities ! 
+- [x] added !round utility
+- [x] Added CTA Button - with options for call and email
+- [x] breadcrumb - fixed bug and added breadcrumb item
+- [x] border- fixed bug and added !round option
+- [ ] 
+
+
+## Supporting the Developers 
+If you use this a lot or want to see it improve consider giving it a star, following the dev on social media below, or becoming a [githup sponsor](https://github.com/sponsors/HansUXdev/). 
+
+
+<a href="https://medium.com/@hansOnConsult" class="MEDIUM">
+   <img src="https://img.shields.io/badge/medium-%2312100E.svg?&style=for-the-badge&logo=medium&logoColor=white" />
+</a>
+<a href="https://dev.to/hansuxdev" class="DEV TO">
+   <img src="https://img.shields.io/badge/DEV.TO-%230A0A0A.svg?&style=for-the-badge&logo=dev-dot-to&logoColor=white" />
+</a>
+<a href="https://www.youtube.com/channel/UCCGfELkPCJg1XHxQfFFz7pw/about" class="YOUTUBE">
+   <img src="https://img.shields.io/badge/youtube-%23FF0000.svg?&style=for-the-badge&logo=youtube&logoColor=white" />
+</a>
+<a href="https://www.twitch.tv/hansoncoding" class="Twitch">
+   <img src="https://img.shields.io/twitch/status/hansoncoding?style=for-the-badge" />
+</a>
+
+
+
+### Educational Repos
+The author does **a lot more** than just publishing a json file for snippets.
+
+Here are just a few things he's working on, while taking care of his 👶 as a full-time single father, job hunting & competing in hackathons...
+
+Trigger | Description & Info
+--- | ---
+[JavaScript-First](https://github.com/HansUXdev/JavaScript-First) | An Open Source Book that teaches anyone how to code with JavaScript using the node.js runtime environment rather than a browser and by the end, you will build a server and a website using JavaScript..
+[Learn Mongo GitPod](https://github.com/HansUXdev/LearnMongoGitPod)| A repo designed to teach mongoDB to people with zero experiance and zero config, meaning you can learn on virtually any device that has a browser that GitPod can run on! This 🤞may🤞 become part of Free Code Camp [[1](https://forum.freecodecamp.org/t/how-is-new-content-created-at-fcc/416191/3)], [[2](https://github.com/freeCodeCamp/CurriculumExpansion/issues/103)].
+
+
+### Future Snippets & Extensions
+Name | Description
+--- | ---
+[JavaScript-First](https://marketplace.visualstudio.com/items?itemName=HansUXdev.javascript-first-snippets)  | JavaScript First is a huge collection of snippets built to establish better code habits for working with JS-based servers, browser methods, react, mongo databases and more. It is also meant to be paired with the book, [JavaScript-First](https://github.com/HansUXdev/JavaScript-First).
+Foundation 6 Snippets| This will start as a snippets for [sites](https://get.foundation/sites/docs/) and then be updated for.
+Code Slides | A snippet extension for creating educational slides with [vscode-reveal](https://marketplace.visualstudio.com/items?itemName=evilz.vscode-reveal) and a custom theme. (not public yet)
+Foundation 6 Snippets| This will start as a snippets for [sites](https://get.foundation/sites/docs/) and then be updated for.[email](https://get.foundation/emails). If sponsored, I will extend this to eventually replace the [CLI](https://github.com/foundation/foundation-cli) and [building blocks](https://get.foundation/building-blocks/) by implementing a custom feature that writes install kits in a similar way the [web boilerplate](https://marketplace.visualstudio.com/items?itemName=jamesqquick.web-boilerplate) writes an html, css, and js file.  (not started yet)
+
+### Social Entrepreneurship: Open Source Non-Profit
+I'm in the process of founding a non-profit dedicated to promoting open source by doing the following and can only commit to the first two without proper sponsorship:
+Name | Description
+--- | ---
+Creating open source curriculum | Getting open source curriculum into the hands for high school students.
+CTE Coding Students | Bringing industry professionals into the class room to inspire them (via zoom). I already did this as a teacher by bringing people from Riot Games / Carvana, Choice Hotels, Auth0, and many others into my classroom. Now I want to streamline this for more schools.
+Free Coding Classes on Twitch | I stream open source classes for an introductory javaScript class every week to test the open source curriculum I write. Think of it as a free bootcamp online. I also despritely need a better computer that doesn't require iced gel packs to be able to stream 😅.... 
+Lobbying for Open Source Certification | When I taught in a public CTE high school, I couldn't believe that a multiple choice test like th MTA certifications were approved by the state over open source certifications such as Free Code Camp's. I know enough school board members and a few house members to help get the ball rolling but, it's a lot of leg work and I don't want to commit to this without funding...
+Laptop | Donating 4G latops/tablets to students struggling with remote academic life. Having taught a few students with bad internet, etc, this is especially important to me but I don't have the resources to address this without funding.

snippets/B5-Snippets/g.recordit.co_q1xiOG2GfN.gif.webloc

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>URL</key>
+	<string>http://g.recordit.co/q1xiOG2GfN.gif</string>
+</dict>
+</plist>

snippets/B5-Snippets/index.js

@@ -0,0 +1,17 @@
+const http = require('http')
+const fs = require('fs');
+const PORT = 7000;
+
+
+http.createServer(function (request, response) {
+  if (request.url == '/') {
+    fs.readFile('./templates/demo.html', function(err, data) {
+      response.writeHead(200, {'Content-Type': 'text/html'});
+      response.write(data);
+      return response.end();
+    });
+  }
+  else{
+    return response.end('Invalid request');
+  }
+}).listen(PORT);

snippets/B5-Snippets/package-lock.json

@@ -0,0 +1,14 @@
+{
+	"name": "bootstrap5-snippets",
+	"version": "1.2.4",
+	"lockfileVersion": 1,
+	"requires": true,
+	"dependencies": {
+		"json-concat": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/json-concat/-/json-concat-0.0.1.tgz",
+			"integrity": "sha1-T2MDycrJTrowu/+R0Tq+oBGMl+I=",
+			"dev": true
+		}
+	}
+}

snippets/B5-Snippets/package.json

@@ -0,0 +1,128 @@
+{
+  "name": "bootstrap5-snippets",
+  "description": "Code snippets for Bootstrap 5 ",
+  "version": "1.2.5",
+  "displayName": "Bootstrap 5 & Font Awesome Snippets",
+  "publisher": "HansUXdev",
+  "icon": "bootstrap.png",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/HansUXdev/B5-SNIPPETS"
+  },
+  "engines": {
+    "vscode": "0.10.x"
+  },
+  "devDependencies": {
+    "json-concat": "^0.0.1"
+  },
+  "scripts": {
+    "concat": "node_modules\\.bin\\json-concat snippets/types/*.json snippets/snippets.json",
+    "package": "npx vsce package",
+    "snip": "code --install-extension bootstrap5-snippets-1.2.4.vsix",
+    "test": "npx vsce package && npm run snip",
+    "prePublish": "npm run concat && npx vsce package && npm run snip"
+  },
+  "categories": [
+    "Snippets"
+  ],
+  "keywords": [
+    "Bootstrap 5",
+    "Bootstrap",
+    "Font Awesome",
+    "Snippets",
+    "Bootstrap Snippets"
+  ],
+  "contributes": {
+    "snippets": [
+      {
+        "language": "blade",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "ejs",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "html",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "handlebars",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "latte",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "php",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "plaintext",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "razor",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "tpl",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "typescript",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "typescriptreact",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "javascriptreact",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "javascript",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "twig",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "vue",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "vue-html",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "django-html",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "jinja-html",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "erb",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "HTML (Eex)",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "volt",
+        "path": "./snippets/bootstrap.json"
+      },
+      {
+        "language": "nunjucks",
+        "path": "./snippets/bootstrap.json"
+      }
+    ]
+  }
+}

snippets/B5-Snippets/snippets/oldsnippets.json

@@ -0,0 +1,580 @@
+{
+	"Bootstrap 5 container": {
+		"prefix": "b5-contain",
+		"body": [
+			"<div class=\"container${1|-fluid, ,-sm,-md,-lg,-xl,-xxl|}${2| ,overflow-hidden|} ${3|px-1,px-2,px-3,px-4,px-5|} ${4|gy-1,gy-2,gy-3,gy-4,gy-5|}\">",
+			"b5-row${0}",
+			"</div>"
+		],
+		"description": "Bootstrap 5 container"
+	},
+	"Bootstrap 5 row": {
+		"prefix": "b5-row",
+		"body": [
+			"<div class=\"row ${1| ,row-cols-2,row-cols-3, auto,justify-content-md-center,md,lg,xl,xxl|}\">",
+			"b5${0}",
+			"</div>"
+		],
+		"description": "Bootstrap 5 row"
+	},
+	"Bootstrap 5 col": {
+		"prefix": "b5-col",
+		"body": [
+			"  <div class=\"col${1| ,-1,-2,-3,-4,-5,-6,-sm,-md,-lg,-xl,-xxl|}${2| ,-auto,-1,-2,-3,-4,-5,-6,-7,-8,-9,-10,-11,-12|}\">",
+			"    b5${0}",
+			"  </div>"
+		],
+		"description": "Bootstrap 5 col"
+	},
+	"Bootstrap 5 Navbar": {
+		"prefix": "b5-navbar-default",
+		"body": [
+			"<nav class=\"navbar ${1|navbar-expand-lg,navbar-expand- |} ${2|navbar-light bg-light,navbar-dark bg-dark, navbar-dark bg-primary|}\">",
+			"  <div class=\"container-fluid\">",
+			"    <a class=\"navbar-brand\" href=\"${3|#, |}\">",
+			"    <img src=\"${4|https://hansmcmurdy.com/JavaScript-First/logo.svg, |}\" width=\"30\" height=\"30\" alt=\"\" loading=\"lazy\">",
+			"    </a>",
+			"    <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"${5|#navbarNavAltMarkup, |}\" aria-controls=\"${5|#navbarNavAltMarkup, |}\"  aria-expanded=\"false\" aria-label=\"Toggle navigation\">",
+			"      <span class=\"navbar-toggler-icon\"></span>",
+			"    </button>",
+			"    <div class=\"collapse navbar-collapse\" id=\"${5|#navbarNavAltMarkup, |}\">",
+			"      <div class=\"navbar-nav\">",
+			"        b5-nl${0}",
+			"      </div>",
+			"    </div>",
+			"  </div>",
+			"</nav>"
+		],
+		"description": "Bootstrap 5 Navbar"
+	},
+	"Bootstrap 5 nav-item": {
+		"prefix": "b5-nav-item",
+		"body": [
+			"<li class=\"${1|nav-item,dropdown-item, |}\">",
+			"    <a class=\"${2|nav-link,nav-link active, |}\" aria-current=\"${3|page, |}\" href=\"${4|#, |}\">${5|Home,About,Blog,Contact, |}</a>",
+			"</li>"
+		],
+		"description": "Bootstrap 5 nav-item"
+	},
+	"Bootstrap 5 navlink": {
+		"prefix": "b5-navlink",
+		"body": [
+			"<a class=\"nav-link\" ${1| aria-disabled=\"false\",disabled tabindex=\"-1\" aria-disabled=\"true\"|} href=\"${2|#, |}\">${3|Home,About,Blog,Contact, |}</a>",
+			""
+		],
+		"description": "Bootstrap 5 navlink"
+	},
+	"Bootstrap 5 nav-dropdown toggle": {
+		"prefix": "b5-navdd-toggle",
+		"body": [
+			"<a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"${1|navbarDropdownMenuLink, |}\" role=\"button\" data-toggle=\"dropdown\" aria-expanded=\"false\">",
+			"b5-n${0}",
+			"</a>"
+		],
+		"description": "Bootstrap 5 nav-dropdown toggle"
+	},
+	"Bootstrap 5 nav-dropdown": {
+		"prefix": "b5-navdropdown",
+		"body": [
+			"<ul class=\"dropdown-menu\" aria-labelledby=\"${1|navbarDropdownMenuLink, |}\">",
+			"b5-n${0}",
+			"</ul>"
+		],
+		"description": "Bootstrap 5 nav-dropdown"
+	},
+	"Bootstrap 5 Card": {
+		"prefix": "b5-card",
+		"body": [
+			"<div class=\"card\" style=\"width:${1|18rem;, |}\">",
+			"  <img src=\"${2|https://images.unsplash.com/photo-1561154464-82e9adf32764?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60, |}\" class=\"card-img-top\" alt=\"...\">",
+			"  <div class=\"card-body\">",
+			"    <h5 class=\"card-title\">${3|Card title, |}</h5>",
+			"    <h6 class=\"card-subtitle ${4|mb-2 text-muted, |} \">${5|Card subtitle, |}</h6>",
+			"    <p class=\"card-text\">${6|Some quick example text to build on the card title and make up the bulk of the card's content., |}</p>",
+			"    b5${0}",
+			"  </div>",
+			"</div>"
+		],
+		"description": "Bootstrap 5 Card"
+	},
+	"Bootstrap 5 Block Quote": {
+		"prefix": "b5-quote",
+		"body": [
+			"    <blockquote class=\"blockquote ${1|mb-0, |}\">",
+			"      <p>${2|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante., | }</p>",
+			"      <footer class=\"blockquote-footer\">Someone famous in <cite title=\"Source Title\">Source Title</cite></footer>",
+			"    </blockquote>"
+		],
+		"description": "Bootstrap 5 Block Quote"
+	},
+	"Link BTN": {
+		"prefix": "b5-btn",
+		"body": [
+			"<a class=\"btn btn-${2|primary,secondary,success,danger,warning,info,light,dark|}\" href=\"${3|#, |}\" role=\"button\">${4| ,Link|}</a>"
+		],
+		"description": "Link BTN"
+	},
+	"BTN-Outline": {
+		"prefix": "b5-btn-o",
+		"body": [
+			"<a class=\"btn btn-outline-${2|primary,secondary,success,danger,warning,info,light,dark|}\" href=\"${3|#, |}\" role=\"button\">${4| ,Link|}</a>"
+		],
+		"description": "Link BTN"
+	},
+	"Button Group": {
+		"prefix": "b5-btn-gp",
+		"body": [
+			"<div class=\"btn-group ${2| ,btn-group-vertical,btn-group-sm,btn-group-lg,h1|} ${3|m,p|}${4|t,r,b,l,x,y|}${5|auto,0,1,2,3,4,5|}\" role=\"group\" aria-label=\"${1:Basic example}\">",
+			"    b5-btn${0}",
+			"</div>"
+		],
+		"description": "Button Group"
+	},
+	"Bootstrap 5 BTN Reveal": {
+		"prefix": "b5-btn-reveal",
+		"body": [
+			"<button class=\"btn btn-primary\" type=\"button\" data-toggle=\"collapse\" data-target=\"#${1|collapseExample, |}\" aria-expanded=\"false\" aria-controls=\"${1|collapseExample, |}\">",
+			"    ${2|Button with data-target, |}",
+			"</button>",
+			"<div class=\"collapse\" id=\"${1|collapseExample, |}\">",
+			"  <div class=\"card card-body\">",
+			"    ${3|Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident., |}",
+			"  </div>",
+			"</div>"
+		],
+		"description": "Bootstrap 5 BTN Reveal"
+	},
+	"Pagination": {
+		"prefix": "b5-pagination",
+		"body": [
+			"<nav aria-label=\"${10:Page navigation example}\">",
+			"  <ul class=\"pagination ${1|pagination-sm,pagination-lg;|}\">",
+			"    <li class=\"page-item\">",
+			"      <a class=\"page-link\" href=\"#\" aria-label=\"Previous\">",
+			"        <span aria-hidden=\"true\">${2|Previous,&laquo;|}</span>",
+			"      </a>",
+			"    </li>",
+			"    <li class=\"page-item\"><a class=\"page-link\" href=\"#\">1</a></li>",
+			"    <li class=\"page-item\"><a class=\"page-link\" href=\"#\">2</a></li>",
+			"    ${0}",
+			"    <li class=\"page-item\">",
+			"      <a class=\"page-link\" href=\"#\" aria-label=\"Next\">",
+			"        <span aria-hidden=\"true\">${3|Next,&raquo;|}</span>",
+			"      </a>",
+			"    </li>",
+			"  </ul>",
+			"</nav>"
+		],
+		"description": "Pagination"
+	},
+	"Utility Text": {
+		"prefix": "b5-txt",
+		"body": [
+			"<${1|div,p,h1|} class=\"text-${2|sm,md,lg,xl|}-${3|left,center,right|} lh-${4|base,1,sm,lg|} font-${5|italic,normal,weight-normal,weight-bold,weight-bolder,weight-light,weight-lighter|} text-${6|lowercase,uppercase,capitalize|} text-${7|decoration-none,decoration-underline,decoration-line-through|} text-${8|reset,break,monospace|}\">",
+			"${9:Left aligned text on all viewport sizes.}",
+			"</${1|div,p,h1|}>"
+		],
+		"description": "Text Utility"
+	},
+	"Utility Borders": {
+		"prefix": "b5-borders",
+		"body": [
+			"<${1|div,p,h1|} class=\"border${1| ,-0,-top,-right,-bottom,-left,-top-0,-right-0,-bottom-0,-left-0|} border-${2|white,primary,secondary,success,danger,warning,info,light,dark|} ${3| ,rounded,rounded-top,rounded-right,rounded-bottom,rounded-left,rounded-circle,rounded-pill|} ${4| ,rounded-sm,rounded-lg|}\">",
+			"${10:Left aligned text on all viewport sizes.}",
+			"</${1|div,p,h1|}>"
+		],
+		"description": "Utility Borders"
+	},
+	"Utility Spacing": {
+		"prefix": "b5-Spacing",
+		"body": [
+			"<${1|div,p,h1|} class=\"${2|m,p|}${3|t,r,b,l,x,y|}${3|auto,0,1,2,3,4,5|} \">",
+			"${0}",
+			"</${1|div,p,h1|}>"
+		],
+		"description": "Utility Spacing"
+	},
+	"Modal-BTN": {
+		"prefix": "b5-modal-btn",
+		"body": [
+			"<button type=\"button\" class=\"btn btn-${1|primary,secondary,success,danger,warning,info,light,dark|}\" data-toggle=\"modal\" data-target=\"#${2:exampleModal}\">",
+			"  ${3:Launch demo modal}",
+			"</button>"
+		],
+		"description": "Modal-Body"
+	},
+	"Modal-body": {
+		"prefix": "b5-modal-body",
+		"body": [
+			"<div class=\"modal fade\" id=\"${1:staticBackdrop}\" data-backdrop=\"static\" data-keyboard=\"false\" tabindex=\"-1\" aria-labelledby=\"${1:staticBackdrop}\" aria-hidden=\"true\">",
+			"  <div class=\"modal-dialog\">",
+			"    <div class=\"modal-content\">",
+			"      <div class=\"modal-header\">",
+			"        <h5 class=\"modal-title\" id=\"${2:staticBackdropLabel}\">${3:Modal title}</h5>",
+			"        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">",
+			"          <span aria-hidden=\"true\">&times;</span>",
+			"        </button>",
+			"      </div>",
+			"      <div class=\"modal-body\">",
+			"        ${0}",
+			"      </div>",
+			"      ${4| ,<div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button></div>|}",
+			"    </div>",
+			"  </div>",
+			"</div>",
+			""
+		],
+		"description": "Modal-Body"
+	},
+	"Modal-Footer": {
+		"prefix": "b5-modal-footer",
+		"body": [
+			"<div class=\"modal fade ${6|modal-sm,modal-lg,modal-xl|}\" id=\"${1:staticBackdrop}\" data-backdrop=\"static\" data-keyboard=\"false\" tabindex=\"-1\" aria-labelledby=\"${1:staticBackdrop}\" aria-hidden=\"true\">",
+			"  <div class=\"modal-dialog ${5|modal-dialog-centered, modal-dialog-scrollable|}\">",
+			"    <div class=\"modal-content\">",
+			"      <div class=\"modal-header\">",
+			"        <h5 class=\"modal-title\" id=\"${2:staticBackdropLabel}\">${3:Modal title}</h5>",
+			"        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">",
+			"          <span aria-hidden=\"true\">&times;</span>",
+			"        </button>",
+			"      </div>",
+			"      <div class=\"modal-body\">",
+			"        ${0}",
+			"      </div>",
+			"      ${4| ,<div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button></div>|}",
+			"    </div>",
+			"  </div>",
+			"</div>",
+			""
+		],
+		"description": "Modal-BTN"
+	},
+	"badge": {
+		"prefix": "b5-badge",
+		"body": [
+			"<span class=\"badge ${1|rounded-pill,secondary,success|} bg-${2|primary,secondary,success,danger,warning,info,light,dark|} ${3| ,text-dark}\">${4:Primary}</span>"
+		],
+		"description": "badge"
+	},
+	"tooltips": {
+		"prefix": "b5-tooltip",
+		"body": [
+			"<button type=\"button\" class=\"btn btn-${1|primary,secondary,success,danger,warning,info,light,dark|}\" data-toggle=\"tooltip\"  data-html=\"${3|false,true|}\" data-placement=\"${2|top,right,bottom,left|}\" title=\"${2:Tooltip on top}\">",
+			"  ${2:Tooltip on top}",
+			"</button>"
+		],
+		"description": "tooltips"
+	},
+	"alert": {
+		"prefix": "b5-alert",
+		"body": [
+			"<div class=\"alert alert-${1|primary,secondary,success,danger,warning,info,light,dark|}\" role=\"alert\">",
+			"  ${2:A simple primary alert—check it out!}",
+			"</div>"
+		],
+		"description": "alert"
+	},
+	"alert big": {
+		"prefix": "b5-alert-big",
+		"body": [
+			"<div class=\"alert alert-${1|primary,secondary,success,danger,warning,info,light,dark|} alert-dismissible fade show\" role=\"alert\">",
+			"<h4 class=\"alert-heading\">$2:Well done!}</h4>",
+			"  <strong>${3:Holy guacamole!}</strong> ",
+			"  <button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\">",
+			"    <span aria-hidden=\"true\">&times;</span>",
+			"  </button>",
+			"</div>"
+		],
+		"description": "alert big"
+	},
+	"breadcumb": {
+		"prefix": "b5-breadcumb",
+		"body": [
+			"<${1:nav} class=\"breadcrumb\" aria-label=\"breadcrumb\">",
+			"  <${2:ol}>",
+			"  <li class=\"${3|breadcrumb-item|, breadcrumb-item active}\"><a href=\"${5}\">${6:Library}</a></li>",
+			"  </${2:ol|}>",
+			"</${1:nav}>"
+		],
+		"description": "breadcumb"
+	},
+	"Progress Bar": {
+		"prefix": "b5-progress",
+		"body": [
+			"<div class=\"progress\">",
+			"    <div class=\"${1|progress-bar,progress-bar progress-bar-striped|}  bg-${2|success,info,success,warning,wardanger}}\" role=\"progressbar\" style=\"width: ${3|25,50,75,100, |}%;\"",
+			"        aria-valuenow=\"${3|25,50,75,100, |}\" aria-valuemin=\"${4:0}\" aria-valuemax=\"${5:100}\" ${6| ,progress-bar-animated}>${6:Description}</div>",
+			"</div>"
+		],
+		"description": "Progress Bar"
+	},
+	"Bootstrap 5 carousel": {
+		"prefix": "b5-carousel",
+		"body": [
+			"<div id=\"${1:slider1}\" class=\"carousel slide\" data-ride=\"carousel\">",
+			"  <ol class=\"carousel-indicators\">",
+			"    <li data-target=\"#${1:slider1}\" data-slide-to=\"0\" class=\"active\"></li>",
+			"    <li data-target=\"#${1:slider1}\" data-slide-to=\"1\"></li>",
+			"    <li data-target=\"#${1:slider1}\" data-slide-to=\"2\"></li>",
+			"  </ol>",
+			"  <div class=\"carousel-inner\">",
+			"    b5-carousel-item${0}",
+			"  </div>",
+			"  <a class=\"carousel-control-prev\" href=\"#${1:slider1}\" role=\"button\" data-slide=\"prev\">",
+			"    <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>",
+			"    <span class=\"sr-only\">Previous</span>",
+			"  </a>",
+			"  <a class=\"carousel-control-next\" href=\"#${1:slider1}\" role=\"button\" data-slide=\"next\">",
+			"    <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>",
+			"    <span class=\"sr-only\">Next</span>",
+			"  </a>",
+			"</div>",
+			""
+		],
+		"description": "Bootstrap 5 carousel"
+	},
+	"Bootstrap 5 carousel item": {
+		"prefix": "b5-carousel-item",
+		"body": [
+			"    <div class=\"${1|carousel-item,carousel-item active|}\">",
+			"      <img src=\"${2|https://images.unsplash.com/photo-1518384491952-3f4731b5f9cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60,https://images.unsplash.com/photo-1580821810660-5486b8e980a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60|}\" class=\"d-block w-100\" alt=\"${3:The developer is an asshole and didn't want to help you, I'm sorry about that.}\">",
+			"    </div>"
+		],
+		"description": "Bootstrap 5 carousel item"
+	},
+	"Bootstrap 5 scripts": {
+		"prefix": "b5-$",
+		"body": [
+			"<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css\" integrity=\"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I\" crossorigin=\"anonymous\">",
+			"<script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\" integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\" crossorigin=\"anonymous\"></script>",
+			"${1|<script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"></script>, |}"
+		],
+		"description": "Adds the cnd for the css scripts and has an option to use popper."
+	},
+	"Offcanvas Scripts": {
+	"prefix": "b5-$-offcanvas-scripts",
+	"body": [
+		"<style>",
+		"    html,body {overflow-x: hidden; /* Prevent scroll on narrow devices */}",
+		"    body {padding-top: 56px;}",
+		"",
+		"    @media (max-width: 991.98px) {",
+		"    .offcanvas-collapse {",
+		"        position: fixed;",
+		"        top: 56px; /* Height of navbar */",
+		"        bottom: 0;",
+		"        left: 100%;",
+		"        width: 100%;",
+		"        padding-right: 1rem;",
+		"        padding-left: 1rem;",
+		"        overflow-y: auto;",
+		"        visibility: hidden;",
+		"        background-color: #343a40;",
+		"        transition: transform .3s ease-in-out, visibility .3s ease-in-out;",
+		"    }",
+		"    .offcanvas-collapse.open {",
+		"        visibility: visible;",
+		"        transform: translateX(-100%);",
+		"    }",
+		"    }",
+		"",
+		"    .nav-scroller {",
+		"    position: relative;",
+		"    z-index: 2;",
+		"    height: 2.75rem;",
+		"    overflow-y: hidden;",
+		"    }",
+		"",
+		"    .nav-scroller .nav {",
+		"    display: flex;",
+		"    flex-wrap: nowrap;",
+		"    padding-bottom: 1rem;",
+		"    margin-top: -1px;",
+		"    overflow-x: auto;",
+		"    color: rgba(255, 255, 255, .75);",
+		"    text-align: center;",
+		"    white-space: nowrap;",
+		"    -webkit-overflow-scrolling: touch;",
+		"    }",
+		"",
+		"    .nav-underline .nav-link {",
+		"    padding-top: .75rem;",
+		"    padding-bottom: .75rem;",
+		"    font-size: .875rem;",
+		"    color: #6c757d;",
+		"    }",
+		"",
+		"    .nav-underline .nav-link:hover {",
+		"    color: #007bff;",
+		"    }",
+		"",
+		"    .nav-underline .active {",
+		"    font-weight: 500;",
+		"    color: #343a40;",
+		"    }",
+		"",
+		"    .text-white-50 { color: rgba(255, 255, 255, .5); }",
+		"",
+		"    .bg-purple { background-color: #6f42c1; }",
+		"</style>",
+		"<script type=\"text/javascript\">",
+		"    (function () {",
+		"      'use strict'",
+		"        document.querySelector('[data-toggle=\"offcanvas\"]').addEventListener('click', function () {",
+		"        document.querySelector('.offcanvas-collapse').classList.toggle('open')",
+		"      })",
+		"    })()",
+		" </script>"
+	],
+	"description": "Offcanvas Scripts"
+	},
+	"Bootstrap 5 HTML Template": {
+		"prefix": "!b5-$",
+		"body": [
+			"<!DOCTYPE html>",
+			"<html lang=\"en\">",
+			"<head>",
+			"  <meta charset=\"UTF-8\">",
+			"  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
+			"  <title>${1:Bootstrap Site}</title>",
+			"  <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css\" integrity=\"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I\" crossorigin=\"anonymous\">",
+			"  <script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"></script>",
+			"  <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\" integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\" crossorigin=\"anonymous\"></script>",
+			"</head>",
+			"<body>",
+			"<h1>Hello-Bootstrap</h1>",
+			"</body>",
+			"</html>"
+		],
+		"description": "An HTML Boilerplate with  Bootstrap 5"
+	},
+	"Offcanvas Template": {
+		"prefix": "b5-$-offcanvas",
+		"body": [
+		  "<!doctype html>",
+		  "<html lang=\"en\">",
+		  "   <head>",
+		  "      <meta charset=\"utf-8\">",
+		  "      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
+		  "      <meta name=\"author\" content=\"Hans McMurdy\">",
+		  "      <title>Bootstrap 5 Offcanvas Template · Bootstrap</title>",
+		  "      <meta name=\"title\" content=\"#JavaScriptFirst\">",
+		  "      <meta name=\"description\" content=\"Learn how to code with #JavaScriptFirst: https://github.com/HansUXdev/JavaScript-First\">",
+		  "      <!-- Bootstrap core CSS -->",
+		  "      <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css\" integrity=\"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I\" crossorigin=\"anonymous\">",
+		  "      <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\" integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\" crossorigin=\"anonymous\"></script>",
+		  "      <script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"></script>",
+		  "      <!-- Favicons -->",
+		  "",
+		  "      <meta name=\"theme-color\" content=\"#7952b3\">",
+		  "      <style>",
+		  "         .bd-placeholder-img {",
+		  "            font-size: 1.125rem;",
+		  "            text-anchor: middle;",
+		  "            -webkit-user-select: none;",
+		  "            -moz-user-select: none;",
+		  "            -ms-user-select: none;",
+		  "            user-select: none;",
+		  "         }",
+		  "         @media (min-width: 768px) {",
+		  "            .bd-placeholder-img-lg {",
+		  "             font-size: 3.5rem;",
+		  "            }",
+		  "         }",
+		  "      </style>",
+		  "      <style>",
+		  "            /* Prevent scroll on narrow devices */",
+		  "            html,body {overflow-x: hidden; }",
+		  "            body {padding-top: 56px;}",
+		  "            @media (max-width: 991.98px) {",
+		  "                .offcanvas-collapse {",
+		  "                    position: fixed;",
+		  "                    top: 56px; /* Height of navbar */",
+		  "                    bottom: 0;",
+		  "                    left: 100%;",
+		  "                    width: 100%;",
+		  "                    padding-right: 1rem;",
+		  "                    padding-left: 1rem;",
+		  "                    overflow-y: auto;",
+		  "                    visibility: hidden;",
+		  "                    background-color: #343a40;",
+		  "                    transition: transform .3s ease-in-out, visibility .3s ease-in-out;",
+		  "                }",
+		  "                .offcanvas-collapse.open {",
+		  "                    visibility: visible;",
+		  "                    transform: translateX(-100%);",
+		  "                }",
+		  "            }",
+		  "            .nav-scroller {",
+		  "                position: relative;",
+		  "                z-index: 2;",
+		  "                height: 2.75rem;",
+		  "                overflow-y: hidden;",
+		  "            }",
+		  "            .nav-scroller .nav {",
+		  "                display: flex;",
+		  "                flex-wrap: nowrap;",
+		  "                padding-bottom: 1rem;",
+		  "                margin-top: -1px;",
+		  "                overflow-x: auto;",
+		  "                color: rgba(255, 255, 255, .75);",
+		  "                text-align: center;",
+		  "                white-space: nowrap;",
+		  "                -webkit-overflow-scrolling: touch;",
+		  "            }",
+		  "            .nav-underline .nav-link {",
+		  "                padding-top: .75rem;",
+		  "                padding-bottom: .75rem;",
+		  "                font-size: .875rem;",
+		  "                color: #6c757d;",
+		  "            }",
+		  "            .nav-underline .nav-link:hover {color: #007bff;}",
+		  "            .nav-underline .active {font-weight: 500;color: #343a40;}",
+		  "            .text-white-50 { color: rgba(255, 255, 255, .5); }",
+		  "            .bg-purple { background-color: #6f42c1; }",
+		  "      </style>",
+		  "   </head>",
+		  "   <body class=\"bg-light\">",
+		  "      <nav class=\"navbar navbar-expand-lg fixed-top navbar-dark bg-dark\">",
+		  "         <div class=\"container-fluid\">",
+		  "            <a class=\"navbar-brand\" href=\"#\">Offcanvas navbar</a>",
+		  "            <button class=\"navbar-toggler p-0 border-0\" type=\"button\" data-toggle=\"offcanvas\">",
+		  "            <span class=\"navbar-toggler-icon\"></span>",
+		  "            </button>",
+		  "            <div class=\"navbar-collapse offcanvas-collapse\" id=\"navbarsExampleDefault\">",
+		  "               <ul class=\"navbar-nav mr-auto mb-2 mb-lg-0\">",
+		  "                  <li class=\"nav-item active\">",
+		  "                     <a class=\"nav-link\" aria-current=\"page\" href=\"#\">Home</a>",
+		  "                  </li>",
+		  "                  <li class=\"nav-item\">",
+		  "                     <a class=\"nav-link\" href=\"#\">About</a>",
+		  "                  </li>",
+		  "               </ul>",
+		  "            </div>",
+		  "         </div>",
+		  "      </nav>",
+		  "      ",
+		  "      <main class=\"container\">",
+		  "        <div class=\"d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded shadow-sm\">",
+		  "          <img class=\"mr-3\" src=\"https://hansmcmurdy.com/JavaScript-First/logo.svg\" alt=\"\" width=\"48\" height=\"48\">",
+		  "          <div class=\"lh-1\">",
+		  "            <h6 class=\"mb-0 text-white lh-1\">#JavaScriptFirst</h6>",
+		  "            <small>Learn Modern JavaScript, from an Open Source Book that teaches anyone how to code with JavaScript using the node.js runtime environment rather than a browser and by the end, you will build a server and a website using JavaScript.</small>",
+		  "          </div>",
+		  "        </div>",
+		  "",
+		  "      </main>",
+		  "      <script type=\"text/javascript\">",
+		  "         (function () {",
+		  "           'use strict'",
+		  "             document.querySelector('[data-toggle=\"offcanvas\"]').addEventListener('click', function () {",
+		  "             document.querySelector('.offcanvas-collapse').classList.toggle('open')",
+		  "           })",
+		  "         })()",
+		  "      </script>",
+		  "   </body>",
+		  "</html>"
+		],
+		"description": "Offcanvas Template"
+	}
+}

snippets/B5-Snippets/snippets/types/breadcrumb.json

@@ -0,0 +1,19 @@
+{
+    "breadcrumb": {
+        "prefix": "b5-breadcrumb",
+        "body": [
+            "<${1:nav} class=\"breadcrumb\" aria-label=\"breadcrumb\">",
+            "  <ol>",
+            "  <li class=\"${2|breadcrumb-item, breadcrumb-item active|}\"><a href=\"${3:Link}\">${4:Library}</a></li>",
+            "  b5${0}",
+            "  </ol>",
+            "</${1:nav}>"
+        ],
+        "description": "breadcrumb"
+    },
+    "breadcrumb item": {
+        "prefix": "b5-breadcrumb-item",
+        "body": ["<li class=\"${1|breadcrumb-item, breadcrumb-item active|}\"><a href=\"${2:Link}\">${3:Library}</a></li>"],
+        "description": "breadcrumb"
+    }
+}

snippets/B5-Snippets/snippets/types/buttons.json

@@ -0,0 +1,41 @@
+{
+    "Button": {
+        "prefix": "b5-btn",
+        "body": [
+            "<a class=\"btn btn-${1|primary,secondary,success,danger,warning,info,light,dark|} btn-${2|sm,lg|} \" href=\"${3|#, |}\" role=\"button\">${4| ,Link|}</a>"
+        ],
+        "description": "Create a basic button."
+    },
+    "Call to Action Button": {
+        "prefix": "b5-btn-cta",
+        "body": [
+            "<a class=\"btn btn-${1|primary,secondary,success,danger,warning,info,light,dark|} btn-${2|sm,lg|} \" href=\"${3|#, ,tel:123-456-7890,mailto:someone@yoursite.com,bunny.mp4|}\" ${4| ,disabled,dowload|} role=\"button\">${5|Link, ,call,mail|}</a>"
+        ],
+        "description": "Create a CTA Button and drive your customer experience forward. \n Options: \n 1. Call\n 2. Email\n"
+    },
+    "BTN-Outline": {
+        "prefix": "b5-btn-o",
+        "body": [
+            "<a class=\"btn btn-outline-${2|primary,secondary,success,danger,warning,info,light,dark|}\" href=\"${3|#, |}\" role=\"button\">${4| ,Link|}</a>"
+        ],
+        "description": "Link BTN"
+    },
+    "Close Button": {
+        "prefix": "b5-btn-close",
+        "body": [
+            "<button type=\"button\" class=\"close\" ${1| ,disabled|} aria-label=\"Close\">",
+            "  <span aria-hidden=\"true\">&times;</span>",
+            "</button>"
+        ],
+        "description": "Close Button"
+    },
+    "Button Group": {
+        "prefix": "b5-btn-gp",
+        "body": [
+            "<div class=\"btn-group ${2| ,btn-group-vertical,btn-group-sm,btn-group-lg,h1|} ${3|!spacing,!color,!font,!shadow|}\" role=\"group\" aria-label=\"${1:Basic example}\">",
+            "    b5-btn${0}",
+            "</div>"
+        ],
+        "description": "Button Group"
+    }
+}

snippets/B5-Snippets/snippets/types/cards.json

@@ -0,0 +1,17 @@
+{
+    "Bootstrap 5 Card": {
+        "prefix": "b5-card",
+        "body": [
+            "<div class=\"card\" style=\"width:${1|18rem;, |}\">",
+            "  <img src=\"${2|https://images.unsplash.com/photo-1561154464-82e9adf32764?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60, |}\" class=\"card-img-top\" alt=\"...\">",
+            "  <div class=\"card-body\">",
+            "    <h5 class=\"card-title\">${3|Card title, |}</h5>",
+            "    <h6 class=\"card-subtitle ${4|mb-2 text-muted, |} \">${5|Card subtitle, |}</h6>",
+            "    <p class=\"card-text\">${6|Some quick example text to build on the card title and make up the bulk of the card's content., |}</p>",
+            "    b5${0}",
+            "  </div>",
+            "</div>"
+        ],
+        "description": "Bootstrap 5 Card"
+    }
+}

snippets/B5-Snippets/snippets/types/carousel.json

@@ -0,0 +1,36 @@
+{
+    "Bootstrap 5 carousel": {
+        "prefix": "b5-carousel",
+        "body": [
+            "<div id=\"${1:slider1}\" class=\"carousel slide\" data-ride=\"carousel\">",
+            "  <ol class=\"carousel-indicators\">",
+            "    <li data-target=\"#${1:slider1}\" data-slide-to=\"0\" class=\"active\"></li>",
+            "    <li data-target=\"#${1:slider1}\" data-slide-to=\"1\"></li>",
+            "    <li data-target=\"#${1:slider1}\" data-slide-to=\"2\"></li>",
+            "  </ol>",
+            "  <div class=\"carousel-inner\">",
+            "    b5-carousel-item${0}",
+            "  </div>",
+            "  <a class=\"carousel-control-prev\" href=\"#${1:slider1}\" role=\"button\" data-slide=\"prev\">",
+            "    <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>",
+            "    <span class=\"sr-only\">Previous</span>",
+            "  </a>",
+            "  <a class=\"carousel-control-next\" href=\"#${1:slider1}\" role=\"button\" data-slide=\"next\">",
+            "    <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>",
+            "    <span class=\"sr-only\">Next</span>",
+            "  </a>",
+            "</div>",
+            ""
+        ],
+        "description": "Bootstrap 5 carousel"
+    },
+    "Bootstrap 5 carousel item": {
+        "prefix": "b5-carousel-item",
+        "body": [
+            "    <div class=\"${1|carousel-item,carousel-item active|}\">",
+            "      <img src=\"${2|https://images.unsplash.com/photo-1518384491952-3f4731b5f9cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60,https://images.unsplash.com/photo-1580821810660-5486b8e980a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60|}\" class=\"d-block w-100\" alt=\"${3:The developer is an asshole and didn't want to help you, I'm sorry about that.}\">",
+            "    </div>"
+        ],
+        "description": "Bootstrap 5 carousel item"
+    }
+}

snippets/B5-Snippets/snippets/types/collapse.json

@@ -0,0 +1,39 @@
+{
+    "Button Reveal": {
+        "prefix": "b5-btn-reveal",
+        "body": [
+            "<button class=\"btn btn-primary\" type=\"button\" data-toggle=\"collapse\" data-target=\"#${1|collapseExample, |}\" aria-expanded=\"false\" aria-controls=\"${1|collapseExample, |}\">",
+            "    ${2|Button with data-target, |}",
+            "</button>",
+            "<div class=\"collapse\" id=\"${1|collapseExample, |}\">",
+            "  <div class=\"card card-body\">",
+            "    ${3|Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident., |}",
+            "  </div>",
+            "</div>"
+        ],
+        "description": "Button Reveal"
+    },
+    "Accordion Example": {
+        "prefix": "accordion-example",
+        "body": [
+            "<div class=\"accordion\" id=\"${1:accordionExample}\">",
+            "  <div class=\"card\">",
+            "    <div class=\"card-header\" id=\"headingOne\">",
+            "      <h2 class=\"mb-0\">",
+            "        <button class=\"btn btn-link btn-block text-left\" type=\"button\" data-toggle=\"collapse\" data-target=\"#${2:collapseOne}\" aria-expanded=\"true\" aria-controls=\"${2:collapseOne}\">",
+            "          Collapsible Group Item #1",
+            "        </button>",
+            "      </h2>",
+            "    </div>",
+            "",
+            "    <div id=\"${2:collapseOne}\" class=\"collapse show\" aria-labelledby=\"headingOne\" data-parent=\"#${1:accordionExample}\">",
+            "      <div class=\"card-body\">",
+            "        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.",
+            "      </div>",
+            "    </div>",
+            "  </div>",
+            "</div>"
+        ],
+        "description": "Accordion Example"
+    }
+}

snippets/B5-Snippets/snippets/types/content.json

@@ -0,0 +1,12 @@
+{
+    "figure": {
+        "prefix": "b5-figure",
+        "body": [
+            "<figure class=\"figure\">",
+            "  <img src=\"${1:https://placehold.it/400x300}\" class=\"figure-img img-fluid rounded\" alt=\"...\">",
+            "  <figcaption class=\"figure-caption\">${2:A caption for the above image.}</figcaption>",
+            "</figure>"
+        ],
+        "description": "figure"
+    }
+}

snippets/B5-Snippets/snippets/types/forms.json

@@ -0,0 +1,72 @@
+{
+    "form": {
+        "prefix": "b5-form",
+        "body": [
+            "<form class=\"row g-3 needs-validation\" novalidate>",
+            "  <div class=\"col-md-4\">",
+            "    <label for=\"validationCustom01\" class=\"form-label\">First name</label>",
+            "    <input type=\"text\" class=\"form-control\" id=\"validationCustom01\" value=\"Mark\" required>",
+            "    <div class=\"valid-feedback\">",
+            "      Looks good!",
+            "    </div>",
+            "  </div>",
+            "  <div class=\"col-md-4\">",
+            "    <label for=\"validationCustom02\" class=\"form-label\">Last name</label>",
+            "    <input type=\"text\" class=\"form-control\" id=\"validationCustom02\" value=\"Otto\" required>",
+            "    <div class=\"valid-feedback\">",
+            "      Looks good!",
+            "    </div>",
+            "  </div>",
+            "  <div class=\"col-md-4\">",
+            "    <label for=\"validationCustomUsername\" class=\"form-label\">Username</label>",
+            "    <div class=\"input-group\">",
+            "      <span class=\"input-group-text\" id=\"inputGroupPrepend\">@</span>",
+            "      <input type=\"text\" class=\"form-control\" id=\"validationCustomUsername\" aria-describedby=\"inputGroupPrepend\" required>",
+            "      <div class=\"invalid-feedback\">",
+            "        Please choose a username.",
+            "      </div>",
+            "    </div>",
+            "  </div>",
+            "  <div class=\"col-md-6\">",
+            "    <label for=\"validationCustom03\" class=\"form-label\">City</label>",
+            "    <input type=\"text\" class=\"form-control\" id=\"validationCustom03\" required>",
+            "    <div class=\"invalid-feedback\">",
+            "      Please provide a valid city.",
+            "    </div>",
+            "  </div>",
+            "  <div class=\"col-md-3\">",
+            "    <label for=\"validationCustom04\" class=\"form-label\">State</label>",
+            "    <select class=\"form-select\" id=\"validationCustom04\" required>",
+            "      <option selected disabled value=\"\">Choose...</option>",
+            "      <option>...</option>",
+            "    </select>",
+            "    <div class=\"invalid-feedback\">",
+            "      Please select a valid state.",
+            "    </div>",
+            "  </div>",
+            "  <div class=\"col-md-3\">",
+            "    <label for=\"validationCustom05\" class=\"form-label\">Zip</label>",
+            "    <input type=\"text\" class=\"form-control\" id=\"validationCustom05\" required>",
+            "    <div class=\"invalid-feedback\">",
+            "      Please provide a valid zip.",
+            "    </div>",
+            "  </div>",
+            "  <div class=\"col-12\">",
+            "    <div class=\"form-check\">",
+            "      <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"invalidCheck\" required>",
+            "      <label class=\"form-check-label\" for=\"invalidCheck\">",
+            "        Agree to terms and conditions",
+            "      </label>",
+            "      <div class=\"invalid-feedback\">",
+            "        You must agree before submitting.",
+            "      </div>",
+            "    </div>",
+            "  </div>",
+            "  <div class=\"col-12\">",
+            "    <button class=\"btn btn-primary\" type=\"submit\">Submit form</button>",
+            "  </div>",
+            "</form>"
+        ],
+        "description": "form"
+    }
+}

snippets/B5-Snippets/snippets/types/grid.json

@@ -0,0 +1,29 @@
+{
+    "Bootstrap 5 container": {
+        "prefix": "b5-contain",
+        "body": [
+            "<div class=\"container${1|-fluid, ,-sm,-md,-lg,-xl,-xxl|} ${2|!direction,!justify,!align,!fill,!grow-shrink,!flex-wrap,!flex-order|} ${3|!spacing,!shadow,!color,!font,overflow-hidden|}\">",
+            "\tb5-row${0}",
+            "</div>"
+        ],
+        "description": "Bootstrap 5 container"
+    },
+    "Bootstrap 5 row": {
+        "prefix": "b5-row",
+        "body": [
+            "<div class=\"row ${1| ,row-cols-2,row-cols-3, auto,justify-content-md-center,|}\">",
+            "\tb5-col${0}",
+            "</div>"
+        ],
+        "description": "Bootstrap 5 row"
+    },
+    "Bootstrap 5 col": {
+        "prefix": "b5-col",
+        "body": [
+            "<div class=\"col${1| ,-1,-2,-3,-4,-5,-6,-sm,-md,-lg,-xl,-xxl|}${2| ,-auto,-1,-2,-3,-4,-5,-6,-7,-8,-9,-10,-11,-12|}\">",
+            "    b5-col${0}",
+            "</div>"
+        ],
+        "description": "Bootstrap 5 col"
+    }
+}

snippets/B5-Snippets/snippets/types/list-group.json

@@ -0,0 +1,43 @@
+{
+    "tablist": {
+        "prefix": "b5-tablist",
+        "body": [
+            "<!-- List group -->",
+            "<div class=\"list-group\" id=\"myList\" role=\"tablist\">",
+            "  <a class=\"list-group-item list-group-item-action active\" data-toggle=\"list\" href=\"#home\" role=\"tab\">Home</a>",
+            "  <a class=\"list-group-item list-group-item-action\" data-toggle=\"list\" href=\"#profile\" role=\"tab\">Profile</a>",
+            "  <a class=\"list-group-item list-group-item-action\" data-toggle=\"list\" href=\"#messages\" role=\"tab\">Messages</a>",
+            "  <a class=\"list-group-item list-group-item-action\" data-toggle=\"list\" href=\"#settings\" role=\"tab\">Settings</a>",
+            "</div>",
+            "",
+            "<!-- Tab panes -->",
+            "<div class=\"tab-content\">",
+            "  <div class=\"tab-pane active\" id=\"home\" role=\"tabpanel\">...</div>",
+            "  <div class=\"tab-pane\" id=\"profile\" role=\"tabpanel\">...</div>",
+            "  <div class=\"tab-pane\" id=\"messages\" role=\"tabpanel\">...</div>",
+            "  <div class=\"tab-pane\" id=\"settings\" role=\"tabpanel\">...</div>",
+            "</div>"
+        ],
+        "description": "tablist"
+    },
+    "list-group-badge": {
+        "prefix": "b5-list-group-badge",
+        "body": [
+            "<ul class=\"list-group\">",
+            "  <li class=\"list-group-item d-flex justify-content-between align-items-center\">",
+            "    Cras justo odio",
+            "    <span class=\"badge bg-primary rounded-pill\">14</span>",
+            "  </li>",
+            "  <li class=\"list-group-item d-flex justify-content-between align-items-center\">",
+            "    Dapibus ac facilisis in",
+            "    <span class=\"badge bg-primary rounded-pill\">2</span>",
+            "  </li>",
+            "  <li class=\"list-group-item d-flex justify-content-between align-items-center\">",
+            "    Morbi leo risus",
+            "    <span class=\"badge bg-primary rounded-pill\">1</span>",
+            "  </li>",
+            "</ul>"
+        ],
+        "description": "list-group-badge"
+    }
+}

snippets/B5-Snippets/snippets/types/modal.json

@@ -0,0 +1,57 @@
+{
+	"Modal-BTN": {
+		"prefix": "b5-modal-btn",
+		"body": [
+			"<button type=\"button\" class=\"btn btn-${1|primary,secondary,success,danger,warning,info,light,dark|}\" data-toggle=\"modal\" data-target=\"#${2:exampleModal}\">",
+			"  ${3:Launch demo modal}",
+			"</button>"
+		],
+		"description": "Modal-Body"
+	},
+	"Modal-body": {
+		"prefix": "b5-modal-body",
+		"body": [
+			"<div class=\"modal fade\" id=\"${1:staticBackdrop}\" data-backdrop=\"static\" data-keyboard=\"false\" tabindex=\"-1\" aria-labelledby=\"${1:staticBackdrop}\" aria-hidden=\"true\">",
+			"  <div class=\"modal-dialog\">",
+			"    <div class=\"modal-content\">",
+			"      <div class=\"modal-header\">",
+			"        <h5 class=\"modal-title\" id=\"${2:staticBackdropLabel}\">${3:Modal title}</h5>",
+			"        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">",
+			"          <span aria-hidden=\"true\">&times;</span>",
+			"        </button>",
+			"      </div>",
+			"      <div class=\"modal-body\">",
+			"        ${0}",
+			"      </div>",
+			"      ${4| ,<div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button></div>|}",
+			"    </div>",
+			"  </div>",
+			"</div>",
+			""
+		],
+		"description": "Modal-Body"
+	},
+	"Modal-Footer": {
+		"prefix": "b5-modal-footer",
+		"body": [
+			"<div class=\"modal fade ${6|modal-sm,modal-lg,modal-xl|}\" id=\"${1:staticBackdrop}\" data-backdrop=\"static\" data-keyboard=\"false\" tabindex=\"-1\" aria-labelledby=\"${1:staticBackdrop}\" aria-hidden=\"true\">",
+			"  <div class=\"modal-dialog ${5|modal-dialog-centered, modal-dialog-scrollable|}\">",
+			"    <div class=\"modal-content\">",
+			"      <div class=\"modal-header\">",
+			"        <h5 class=\"modal-title\" id=\"${2:staticBackdropLabel}\">${3:Modal title}</h5>",
+			"        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">",
+			"          <span aria-hidden=\"true\">&times;</span>",
+			"        </button>",
+			"      </div>",
+			"      <div class=\"modal-body\">",
+			"        ${0}",
+			"      </div>",
+			"      ${4| ,<div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button></div>|}",
+			"    </div>",
+			"  </div>",
+			"</div>",
+			""
+		],
+		"description": "Modal-BTN"
+	}
+}

snippets/B5-Snippets/snippets/types/navigation.json

@@ -0,0 +1,110 @@
+{
+   "Bootstrap 5 Navbar Defaul": {
+      "prefix": "b5-navbar-default",
+      "body": [
+        "    <nav class=\"navbar ${2|navbar-expand-sm,navbar-expand-md,navbar-expand-lg|} navbar-${3|light,dark|} bg-${4|primary,secondary,success,danger,warning,info,light,dark|}\">",
+        "        <div class=\"container-fluid\">",
+        "            <a class=\"navbar-brand\" href=\"#\">${4:Navbar}</a>",
+        "            <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#${1:navbarID}\"",
+        "                aria-controls=\"${1:navbarID}\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">",
+        "                <span class=\"navbar-toggler-icon\"></span>",
+        "            </button>",
+        "            <div class=\"collapse navbar-collapse\" id=\"${1:navbarID}\">",
+        "                <div class=\"navbar-nav\">",
+        "                    <a class=\"nav-link active\" aria-current=\"page\" href=\"#\">Home</a>",
+        "                    ${0}",
+        "                </div>",
+        "            </div>",
+        "        </div>",
+        "    </nav>"
+      ],
+      "description": "Bootstrap 5 Navbar Defaul"
+    },
+    "Bootstrap 5 nav-item":{
+       "prefix":"b5-nav-item",
+       "body":[
+          "<li class=\"${1|nav-item,dropdown-item, |}\">",
+          "    <a class=\"${2|nav-link,nav-link active, |}\" aria-current=\"${3|page, |}\" href=\"${4|#, |}\">${5|Home,About,Blog,Contact, |}</a>",
+          "</li>"
+       ],
+       "description":"Bootstrap 5 nav-item"
+    },
+    "Bootstrap 5 navlink":{
+       "prefix":"b5-navlink",
+       "body":[
+          "<a class=\"nav-link\" ${1| aria-disabled=\"false\",disabled tabindex=\"-1\" aria-disabled=\"true\"|} href=\"${2|#, |}\">${3|Home,About,Blog,Contact, |}</a>",
+          ""
+       ],
+       "description":"Bootstrap 5 navlink"
+    },
+    "Bootstrap 5 nav-dropdown toggle":{
+       "prefix":"b5-navdd-toggle",
+       "body":[
+          "<a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"${1|navbarDropdownMenuLink, |}\" role=\"button\" data-toggle=\"dropdown\" aria-expanded=\"false\">",
+          "b5-n${0}",
+          "</a>"
+       ],
+       "description":"Bootstrap 5 nav-dropdown toggle"
+    },
+    "Bootstrap 5 nav-dropdown":{
+       "prefix":"b5-navdropdown",
+       "body":[
+          "<ul class=\"dropdown-menu\" aria-labelledby=\"${1|navbarDropdownMenuLink, |}\">",
+          "b5-n${0}",
+          "</ul>"
+       ],
+       "description":"Bootstrap 5 nav-dropdown"
+    },
+    "Nav Bottom":{
+       "prefix":"b5-Nav-bottom",
+       "body":[
+          "<nav class=\"navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark\">",
+          "  <div class=\"container-fluid\">",
+          "    <a class=\"navbar-brand\" href=\"#\">Bottom navbar</a>",
+          "    <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarCollapse\" aria-controls=\"navbarCollapse\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">",
+          "      <span class=\"navbar-toggler-icon\"></span>",
+          "    </button>",
+          "    <div class=\"collapse navbar-collapse\" id=\"navbarCollapse\">",
+          "      <ul class=\"navbar-nav\">",
+          "        <li class=\"nav-item active\">",
+          "          <a class=\"nav-link\" aria-current=\"page\" href=\"#\">Home</a>",
+          "        </li>",
+          "        <li class=\"nav-item\">",
+          "          <a class=\"nav-link\" href=\"#\">Link</a>",
+          "        </li>",
+          "        <li class=\"nav-item\">",
+          "          <a class=\"nav-link disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\">Disabled</a>",
+          "        </li>",
+          "        <li class=\"nav-item dropup\">",
+          "          <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"dropdown10\" data-toggle=\"dropdown\" aria-expanded=\"false\">Dropup</a>",
+          "          <ul class=\"dropdown-menu\" aria-labelledby=\"dropdown10\">",
+          "            <li><a class=\"dropdown-item\" href=\"#\">Action</a></li>",
+          "            <li><a class=\"dropdown-item\" href=\"#\">Another action</a></li>",
+          "            <li><a class=\"dropdown-item\" href=\"#\">Something else here</a></li>",
+          "          </ul>",
+          "        </li>",
+          "      </ul>",
+          "    </div>",
+          "  </div>",
+          "</nav>"
+       ],
+       "description":"Nav Bottom"
+    },
+    "Scrollspy":{
+       "prefix":"b5-scrollspy",
+       "body":[
+          "<nav id=\"${1:navbar-example2}\" class=\"navbar navbar-light bg-light px-3\">",
+          "    <a class=\"navbar-brand\" href=\"#\">Navbar</a>",
+          "    <ul class=\"nav nav-pills\">",
+          "        <li class=\"nav-item\">",
+          "            <a class=\"nav-link\" href=\"#${2:fat}\">@fat</a>",
+          "        </li>",
+          "    </ul>",
+          "</nav>",
+          "<div data-spy=\"scroll\" data-target=\"#${1:navbar-example2}\" data-offset=\"0\">",
+          "    <h4 id=\"${2:fat}\">@fat</h4>",
+          "</div>"
+       ],
+       "description":"Scrollspy"
+    }
+ }

snippets/B5-Snippets/snippets/types/pagination.json

@@ -0,0 +1,25 @@
+{
+    "Pagination": {
+        "prefix": "b5-pagination",
+        "body": [
+            "<nav aria-label=\"${10:Page navigation example}\">",
+            "  <ul class=\"pagination ${1|pagination-sm,pagination-lg;|}\">",
+            "    <li class=\"page-item\">",
+            "      <a class=\"page-link\" href=\"#\" aria-label=\"Previous\">",
+            "        <span aria-hidden=\"true\">${2|Previous,&laquo;|}</span>",
+            "      </a>",
+            "    </li>",
+            "    <li class=\"page-item\"><a class=\"page-link\" href=\"#\">1</a></li>",
+            "    <li class=\"page-item\"><a class=\"page-link\" href=\"#\">2</a></li>",
+            "    ${0}",
+            "    <li class=\"page-item\">",
+            "      <a class=\"page-link\" href=\"#\" aria-label=\"Next\">",
+            "        <span aria-hidden=\"true\">${3|Next,&raquo;|}</span>",
+            "      </a>",
+            "    </li>",
+            "  </ul>",
+            "</nav>"
+        ],
+        "description": "Pagination"
+    }
+}

snippets/B5-Snippets/snippets/types/progressbar.json

@@ -0,0 +1,12 @@
+{
+    "Progress Bar": {
+        "prefix": "b5-progress",
+        "body": [
+            "<div class=\"progress\">",
+            "    <div class=\"${1|progress-bar,progress-bar progress-bar-striped|}  bg-${2|success,info,success,warning,wardanger}}\" role=\"progressbar\" style=\"width: ${3|25,50,75,100, |}%;\"",
+            "        aria-valuenow=\"${3|25,50,75,100, |}\" aria-valuemin=\"${4:0}\" aria-valuemax=\"${5:100}\" ${6| ,progress-bar-animated}>${6:Description}</div>",
+            "</div>"
+        ],
+        "description": "Progress Bar"
+    }
+}

snippets/B5-Snippets/snippets/types/utility.json

@@ -0,0 +1,155 @@
+{
+   "Utilities": {
+      "prefix": "!utility",
+      "body": [
+         "${1|!spacing,!shadow,!color,!font,!flex,!direction,!justify,!align,!display|}"
+      ],
+      "description": "Utilities: Forgot a utility? \n Read about them: \n\n https://deploy-preview-29017--twbs-bootstrap.netlify.app/docs/5.0/utilities/api/"
+   },
+   "Padding / Margin": {
+      "prefix": "!spacing",
+      "body": [
+         "${1|m,p|}${3|x,y,t,r,b,l|}-${4|auto,0,1,2,3,4,5|}"
+      ],
+      "description": "Quickly add Padding & Margins any class."
+   },
+   "Color": {
+      "prefix": "!color",
+      "body": [
+         "${2|text,bg|}-${3|primary,secondary,success,danger,warning,info,light,dark|}"
+      ],
+      "description": "Quickly add color utility classes to any class."
+   },
+   "Font": {
+      "prefix": "!font",
+      "body": [
+         "text-${2|sm,md,lg,xl|}-${3|left,center,right|} lh-${4|base,1,sm,lg|} font-${5|italic,normal,weight-normal,weight-bold,weight-bolder,weight-light,weight-lighter|} text-${6| ,lowercase,uppercase,capitalize|} text-${7|decoration-none,decoration-underline,decoration-line-through|} text-${8|reset,break,monospace|}"
+      ],
+      "description": "Quickly add font utility classes to any class."
+   },
+   "Shadow": {
+      "prefix": "!shadow",
+      "body": [
+         "shadow${1| ,-sm,-lg|} bg-${2|white,light,dark,primary,secondary,success,danger,warning,info|} ${3|m,p|}${3|t,r,b,l,x,y|}${4|auto,0,1,2,3,4,5|}"
+      ],
+      "description": "Add shadow to any class"
+   },
+   "Utility Paper Shadow": {
+      "prefix": "b5-shadow",
+      "body": [
+         "<div class=\"shadow${1| ,-sm,-lg|} p-3 mb-5 bg-${2|primary,secondary,success,danger,warning,info,light,dark|} ${3|!spacing,!color,!font|} \">${0}</div>"
+      ],
+      "description": "Utility Paper Shadow"
+   },
+   "Utility Color": {
+      "prefix": "b5-color",
+      "body": [
+         "${2|text,bg|}${3|primary,secondary,success,danger,warning,info,light,dark|}"
+      ],
+      "description": "Text Utility"
+   },
+   "Utility Text": {
+      "prefix": "b5-txt",
+      "body": [
+         "<${1|div,p,h1|} class=\"text-${2|sm,md,lg,xl|}-${3|left,center,right|} lh-${4|base,1,sm,lg|} font-${5|normal,italic,weight-normal,weight-bold,weight-bolder,weight-light,weight-lighter|} text-${6|none,lowercase,uppercase,capitalize|} text-${7|decoration-none,decoration-underline,decoration-line-through|} text-${8|reset,break,monospace|}\">",
+         "${9:Left aligned text on all viewport sizes.}",
+         "</${1|div,p,h1|}>"
+      ],
+      "description": "Text Utility"
+   },
+   "Utility Borders": {
+      "prefix": "b5-borders",
+      "body": [
+         "<${1|div,p|} class=\"border${2| ,-0,-top,-right,-bottom,-left,-top-0,-right-0,-bottom-0,-left-0|} border-${3|white,primary,secondary,success,danger,warning,info,light,dark|} ${5| ,!round|}\">",
+         "${10:Left aligned text on all viewport sizes.}",
+         "</${1|div,p|}>"
+      ],
+      "description": "Utility Borders"
+   },
+   "Round - Round out any edge.": {
+      "prefix": "!round",
+      "body": [
+         "${1|rounded,rounded-top,rounded-right,rounded-bottom,rounded-left,rounded-circle,rounded-pill|} ${2|rounded-sm,rounded-lg|}"
+      ],
+      "description": "Round - Round out any edge."
+   },
+   "Utility Spacing": {
+      "prefix": "b5-spacing",
+      "body": [
+         "<${1|div,p,h1|} class=\"${2|m,p|}${3|t,r,b,l,x,y|}${4|auto,0,1,2,3,4,5|} \">",
+         "${0}",
+         "</${1|div,p,h1|}>"
+      ],
+      "description": "Utility Spacing"
+   },
+   "Display Utilities:": {
+      "prefix": "!display",
+      "body": [
+         "d-${2|flex,inline-flex,none,block,inline,inline-block,table,table-cell,table-row|} "
+      ],
+      "description": "Display Utilities:"
+   },
+   "Utilities MQ:": {
+      "prefix": "!MQ",
+      "body": [
+         "${1|-sm-,-md,-lg-,-xl-,-xxl-|}"
+      ],
+      "description": "Display Utilities:"
+   },
+   "Flex Utility": {
+      "prefix": "!flex",
+      "body": [
+         "d${1|-,!MQ|}${2|flex,inline-flex|} ${3| ,!direction,!justify,!align,!fill,!grow-shrink,!flex-wrap,!flex-order|}"
+      ],
+      "description": "Flex Utility: Create a flexbox container and transform direct children elements into flex items. \n\n Ends with an options to continue with other flex utilities,!direction,!justify,!align."
+   },
+   "Flex Direction": {
+      "prefix": "!direction",
+      "body": [
+         "flex${1|-,!MQ|}${2|row,row-reverse,column,column-reverse|}"
+      ],
+      "description": "Flex Direction: Set the direction of flex items in a flex container with direction utilities"
+   },
+   "justify-content": {
+      "prefix": "!justify",
+      "body": [
+         "justify-content${1|-,!MQ|}${2|start,end,center,between,around,evenly|}"
+      ],
+      "description": "justify-content: \n change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column) \n Read the docs: \n\n https://deploy-preview-29017--twbs-bootstrap.netlify.app/docs/5.0/utilities/flex/#justify-content \n\n "
+   },
+   "Flex-Align": {
+      "prefix": "!align",
+      "body": [
+         "align-${1|items,self,content|}${2|-,!MQ|}${3|start,end,center,baseline,stretch,around|}"
+      ],
+      "description": "Flex-Align: \n Read the docs: \n https://deploy-preview-29017--twbs-bootstrap.netlify.app/docs/5.0/utilities/flex/#align-items \n\n 1. align-items: change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column) \n\n  2. align-self: change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column) \n\n 3. align-content: align flex items together on the cross axis. \n\n NOTE: CENTER & AROUND only apply to align Content."
+   },
+   "!fill": {
+      "prefix": "!fill",
+      "body": [
+         "flex-${1|fill,sm-fill,md-fill,lg-fill,xl-fill,xxl-fill|}"
+      ],
+      "description": "!fill - use on sibling elements to force them into widths equal to their content"
+   },
+   "!grow-shrink": {
+      "prefix": "!grow-shrink",
+      "body": [
+         "flex${1|-,!MQ|}-${2|grow,shrink|}-${3|0,1|}"
+      ],
+      "description": "!grow-shrink - utilities to toggle a flex item’s ability to grow to fill available space"
+   },
+   "!flex-wrap": {
+      "prefix": "!flex-wrap",
+      "body": [
+         "flex-${1|-,!MQ|}${2|wrap,nowrap,wrap-reverse|}"
+      ],
+      "description": "!flex-wrap - utilities to toggle a flex item’s ability to grow to fill available space."
+   },
+   "!flex-order": {
+      "prefix": "!flex-order",
+      "body": [
+         "order-${1|-,!MQ|}${2|1,2,3,4,5,first,last|}"
+      ],
+      "description": "Flex Order - Change the visual order of specific flex items with a handful of order utilities."
+   }
+}

snippets/B5-Snippets/templates/Untitled-1.html

@@ -0,0 +1,4 @@
+
+
+// ${2|primary,secondary,success,danger,warning,info,light,dark|}
+

snippets/B5-Snippets/templates/album.html

@@ -0,0 +1,321 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="">
+  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
+  <meta name="generator" content="Hugo 0.72.0">
+  <title>Album example · Bootstrap</title>
+
+  <link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/album/">
+
+
+
+  <!-- Bootstrap core CSS -->
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+
+  <style>
+    .bd-placeholder-img {
+      font-size: 1.125rem;
+      text-anchor: middle;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+    }
+
+    @media (min-width: 768px) {
+      .bd-placeholder-img-lg {
+        font-size: 3.5rem;
+      }
+    }
+  </style>
+
+
+</head>
+
+<body>
+
+  <header>
+    <div class="collapse bg-dark" id="navbarHeader">
+      <div class="container">
+        <div class="row">
+          <div class="col-sm-8 col-md-7 py-4">
+            <h4 class="text-white">About</h4>
+            <p class="text-muted">Add some information about the album below, the author, or any other background
+              context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off
+              to some social networking sites or contact information.</p>
+          </div>
+          <div class="col-sm-4 offset-md-1 py-4">
+            <h4 class="text-white">Contact</h4>
+            <ul class="list-unstyled">
+              <li><a href="#" class="text-white">Follow on Twitter</a></li>
+              <li><a href="#" class="text-white">Like on Facebook</a></li>
+              <li><a href="#" class="text-white">Email me</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="navbar navbar-dark bg-dark shadow-sm">
+      <div class="container">
+        <a href="#" class="navbar-brand d-flex align-items-center">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor"
+            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2"
+            viewBox="0 0 24 24">
+            <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
+            <circle cx="12" cy="13" r="4" /></svg>
+          <strong>Album</strong>
+        </a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader"
+          aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+      </div>
+    </div>
+  </header>
+
+  <main>
+
+    <section class="py-5 text-center container">
+      <div class="row py-lg-5">
+        <div class="col-lg-6 col-md-8 mx-auto">
+          <h1 class="font-weight-light">Album example</h1>
+          <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator,
+            etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
+          <p>
+            <a href="#" class="btn btn-primary my-2">Main call to action</a>
+            <a href="#" class="btn btn-secondary my-2">Secondary action</a>
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <div class="album py-5 bg-light">
+      <div class="container">
+
+        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
+          <div class="col">
+            <div class="card shadow-sm">
+              <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
+                aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+                <title>Placeholder</title>
+                <rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
+                  dy=".3em">Thumbnail</text>
+              </svg>
+
+              <div class="card-body">
+                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
+                  content. This content is a little bit longer.</p>
+                <div class="d-flex justify-content-between align-items-center">
+                  <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                  </div>
+                  <small class="text-muted">9 mins</small>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col">
+            <div class="card shadow-sm">
+              <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
+                aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+                <title>Placeholder</title>
+                <rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
+                  dy=".3em">Thumbnail</text>
+              </svg>
+
+              <div class="card-body">
+                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
+                  content. This content is a little bit longer.</p>
+                <div class="d-flex justify-content-between align-items-center">
+                  <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                  </div>
+                  <small class="text-muted">9 mins</small>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col">
+            <div class="card shadow-sm">
+              <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
+                aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+                <title>Placeholder</title>
+                <rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
+                  dy=".3em">Thumbnail</text>
+              </svg>
+
+              <div class="card-body">
+                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
+                  content. This content is a little bit longer.</p>
+                <div class="d-flex justify-content-between align-items-center">
+                  <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                  </div>
+                  <small class="text-muted">9 mins</small>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col">
+            <div class="card shadow-sm">
+              <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
+                aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+                <title>Placeholder</title>
+                <rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
+                  dy=".3em">Thumbnail</text>
+              </svg>
+
+              <div class="card-body">
+                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
+                  content. This content is a little bit longer.</p>
+                <div class="d-flex justify-content-between align-items-center">
+                  <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                  </div>
+                  <small class="text-muted">9 mins</small>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col">
+            <div class="card shadow-sm">
+              <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
+                aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+                <title>Placeholder</title>
+                <rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
+                  dy=".3em">Thumbnail</text>
+              </svg>
+
+              <div class="card-body">
+                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
+                  content. This content is a little bit longer.</p>
+                <div class="d-flex justify-content-between align-items-center">
+                  <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                  </div>
+                  <small class="text-muted">9 mins</small>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col">
+            <div class="card shadow-sm">
+              <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
+                aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+                <title>Placeholder</title>
+                <rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
+                  dy=".3em">Thumbnail</text>
+              </svg>
+
+              <div class="card-body">
+                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
+                  content. This content is a little bit longer.</p>
+                <div class="d-flex justify-content-between align-items-center">
+                  <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                  </div>
+                  <small class="text-muted">9 mins</small>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col">
+            <div class="card shadow-sm">
+              <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
+                aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+                <title>Placeholder</title>
+                <rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
+                  dy=".3em">Thumbnail</text>
+              </svg>
+
+              <div class="card-body">
+                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
+                  content. This content is a little bit longer.</p>
+                <div class="d-flex justify-content-between align-items-center">
+                  <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                  </div>
+                  <small class="text-muted">9 mins</small>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col">
+            <div class="card shadow-sm">
+              <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
+                aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+                <title>Placeholder</title>
+                <rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
+                  dy=".3em">Thumbnail</text>
+              </svg>
+
+              <div class="card-body">
+                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
+                  content. This content is a little bit longer.</p>
+                <div class="d-flex justify-content-between align-items-center">
+                  <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                  </div>
+                  <small class="text-muted">9 mins</small>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col">
+            <div class="card shadow-sm">
+              <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
+                aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+                <title>Placeholder</title>
+                <rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
+                  dy=".3em">Thumbnail</text>
+              </svg>
+
+              <div class="card-body">
+                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
+                  content. This content is a little bit longer.</p>
+                <div class="d-flex justify-content-between align-items-center">
+                  <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                  </div>
+                  <small class="text-muted">9 mins</small>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </main>
+
+  <footer class="text-muted py-5">
+    <div class="container">
+      <p class="float-right mb-1">
+        <a href="#">Back to top</a>
+      </p>
+      <p class="mb-1">Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
+      <p class="mb-0">New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a
+          href="/docs/5.0/getting-started/introduction/">getting started guide</a>.</p>
+    </div>
+  </footer>
+
+</body>
+
+</html>

snippets/B5-Snippets/templates/blocks/featured-post.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Bootstrap Site</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
+</head>
+<body>
+<h1>Hello-Bootstrap</h1>
+<div class="col p-4 d-flex flex-column position-static ">
+    <strong class="d-inline-block mb-2 text-primary">Utility</strong>
+    <h3 class="mb-0">Featured post</h3>
+    <div class="mb-1 text-muted">Nov 12</div>
+    <p class="card-text mb-auto">This is a wider card with supporting text below as a natural
+        lead-in to additional content.</p>
+    <a href="#" class="stretched-link">Continue reading</a>
+</div>
+</body>
+</html>
+
+<div class="col p-4 d-flex flex-column position-static ">
+    <strong class="d-inline-block mb-2 text-primary">Utility</strong>
+    <h3 class="mb-0">Featured post</h3>
+    <div class="mb-1 text-muted">Nov 12</div>
+    <p class="card-text mb-auto">This is a wider card with supporting text below as a natural
+        lead-in to additional content.</p>
+    <a href="#" class="stretched-link">Continue reading</a>
+</div>

snippets/B5-Snippets/templates/blog.html

@@ -0,0 +1,418 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
+    <meta name="generator" content="Hugo 0.72.0">
+    <title>Blog Template · Bootstrap</title>
+
+    <link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/blog/">
+
+
+
+    <!-- Bootstrap core CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+        integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+        integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+        crossorigin="anonymous"></script>
+
+    <style>
+        .bd-placeholder-img {
+            font-size: 1.125rem;
+            text-anchor: middle;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
+
+        @media (min-width: 768px) {
+            .bd-placeholder-img-lg {
+                font-size: 3.5rem;
+            }
+        }
+    </style>
+
+
+    <!-- Custom styles for this template -->
+    <link href="https://fonts.googleapis.com/css?family=Playfair&#43;Display:700,900&amp;display=swap" rel="stylesheet">
+    <!-- Custom styles for this template -->
+    <style>
+        /* stylelint-disable selector-list-comma-newline-after */
+
+        .blog-header {
+            line-height: 1;
+            border-bottom: 1px solid #e5e5e5;
+        }
+
+        .blog-header-logo {
+            font-family: "Playfair Display", Georgia, "Times New Roman", serif;
+            font-size: 2.25rem;
+        }
+
+        .blog-header-logo:hover {
+            text-decoration: none;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            font-family: "Playfair Display", Georgia, "Times New Roman", serif;
+        }
+
+        .display-4 {
+            font-size: 2.5rem;
+        }
+
+        @media (min-width: 768px) {
+            .display-4 {
+                font-size: 3rem;
+            }
+        }
+
+        .nav-scroller {
+            position: relative;
+            z-index: 2;
+            height: 2.75rem;
+            overflow-y: hidden;
+        }
+
+        .nav-scroller .nav {
+            display: flex;
+            flex-wrap: nowrap;
+            padding-bottom: 1rem;
+            margin-top: -1px;
+            overflow-x: auto;
+            text-align: center;
+            white-space: nowrap;
+            -webkit-overflow-scrolling: touch;
+        }
+
+        .nav-scroller .nav-link {
+            padding-top: .75rem;
+            padding-bottom: .75rem;
+            font-size: .875rem;
+        }
+
+        .card-img-right {
+            height: 100%;
+            border-radius: 0 3px 3px 0;
+        }
+
+        .flex-auto {
+            flex: 0 0 auto;
+        }
+
+        .h-250 {
+            height: 250px;
+        }
+
+        @media (min-width: 768px) {
+            .h-md-250 {
+                height: 250px;
+            }
+        }
+
+        /* Pagination */
+        .blog-pagination {
+            margin-bottom: 4rem;
+        }
+
+        .blog-pagination>.btn {
+            border-radius: 2rem;
+        }
+
+        /*
+        * Blog posts
+        */
+        .blog-post {
+            margin-bottom: 4rem;
+        }
+
+        .blog-post-title {
+            margin-bottom: .25rem;
+            font-size: 2.5rem;
+        }
+
+        .blog-post-meta {
+            margin-bottom: 1.25rem;
+            color: #727272;
+        }
+
+        /*
+        * Footer
+        */
+        .blog-footer {
+            padding: 2.5rem 0;
+            color: #727272;
+            text-align: center;
+            background-color: #f9f9f9;
+            border-top: .05rem solid #e5e5e5;
+        }
+
+        .blog-footer p:last-child {
+            margin-bottom: 0;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="container">
+        <header class="blog-header py-3">
+            <div class="row flex-nowrap justify-content-between align-items-center">
+                <div class="col-4 pt-1">
+                    <a class="link-secondary" href="#">Subscribe</a>
+                </div>
+                <div class="col-4 text-center">
+                    <a class="blog-header-logo text-dark" href="#">Large</a>
+                </div>
+                <div class="col-4 d-flex justify-content-end align-items-center">
+                    <a class="link-secondary" href="#" aria-label="Search">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor"
+                            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img"
+                            viewBox="0 0 24 24">
+                            <title>Search</title>
+                            <circle cx="10.5" cy="10.5" r="7.5" />
+                            <path d="M21 21l-5.2-5.2" />
+                        </svg>
+                    </a>
+                    <a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
+                </div>
+            </div>
+        </header>
+
+        <div class="nav-scroller py-1 mb-2">
+            <nav class="nav d-flex justify-content-between">
+                <a class="p-2 link-secondary" href="#">World</a>
+                <a class="p-2 link-secondary" href="#">U.S.</a>
+                <a class="p-2 link-secondary" href="#">Technology</a>
+                <a class="p-2 link-secondary" href="#">Design</a>
+                <a class="p-2 link-secondary" href="#">Culture</a>
+                <a class="p-2 link-secondary" href="#">Business</a>
+                <a class="p-2 link-secondary" href="#">Politics</a>
+                <a class="p-2 link-secondary" href="#">Opinion</a>
+                <a class="p-2 link-secondary" href="#">Science</a>
+                <a class="p-2 link-secondary" href="#">Health</a>
+                <a class="p-2 link-secondary" href="#">Style</a>
+                <a class="p-2 link-secondary" href="#">Travel</a>
+            </nav>
+        </div>
+
+        <div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
+            <div class="col-md-6 px-0">
+                <h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
+                <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and
+                    efficiently about what’s most interesting in this post’s contents.</p>
+                <p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Continue reading...</a></p>
+            </div>
+        </div>
+
+        <div class="row mb-2">
+            <div class="col-md-6">
+                <div
+                    class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+                    <div class="col p-4 d-flex flex-column position-static">
+                        <strong class="d-inline-block mb-2 text-primary">World</strong>
+                        <h3 class="mb-0">Featured post</h3>
+                        <div class="mb-1 text-muted">Nov 12</div>
+                        <p class="card-text mb-auto">This is a wider card with supporting text below as a natural
+                            lead-in to additional content.</p>
+                        <a href="#" class="stretched-link">Continue reading</a>
+                    </div>
+                    <div class="col-auto d-none d-lg-block">
+                        <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg"
+                            aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img"
+                            focusable="false">
+                            <title>Placeholder</title>
+                            <rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
+                                dy=".3em">Thumbnail</text>
+                        </svg>
+
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div
+                    class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+                    <div class="col p-4 d-flex flex-column position-static">
+                        <strong class="d-inline-block mb-2 text-success">Design</strong>
+                        <h3 class="mb-0">Post title</h3>
+                        <div class="mb-1 text-muted">Nov 11</div>
+                        <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to
+                            additional content.</p>
+                        <a href="#" class="stretched-link">Continue reading</a>
+                    </div>
+                    <div class="col-auto d-none d-lg-block">
+                        <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg"
+                            aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img"
+                            focusable="false">
+                            <title>Placeholder</title>
+                            <rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
+                                dy=".3em">Thumbnail</text>
+                        </svg>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <main class="container">
+        <div class="row">
+            <div class="col-md-8">
+                <h3 class="pb-4 mb-4 font-italic border-bottom">
+                    From the Firehose
+                </h3>
+
+                <div class="blog-post">
+                    <h2 class="blog-post-title">Sample blog post</h2>
+                    <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
+
+                    <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap.
+                        Basic typography, images, and code are all supported.</p>
+                    <hr>
+                    <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus
+                        mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere
+                        consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
+                    <blockquote>
+                        <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong>
+                            ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+                    </blockquote>
+                    <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet
+                        fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
+                    <h2>Heading</h2>
+                    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non
+                        commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus,
+                        porta ac consectetur ac, vestibulum at eros.</p>
+                    <h3>Sub-heading</h3>
+                    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+                    <pre><code>Example code block</code></pre>
+                    <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod.
+                        Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
+                    <h3>Sub-heading</h3>
+                    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean
+                        lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce
+                        dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
+                        amet risus.</p>
+                    <ul>
+                        <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
+                        <li>Donec id elit non mi porta gravida at eget metus.</li>
+                        <li>Nulla vitae elit libero, a pharetra augue.</li>
+                    </ul>
+                    <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.
+                    </p>
+                    <ol>
+                        <li>Vestibulum id ligula porta felis euismod semper.</li>
+                        <li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
+                        <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
+                    </ol>
+                    <p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
+                </div><!-- /.blog-post -->
+
+                <div class="blog-post">
+                    <h2 class="blog-post-title">Another blog post</h2>
+                    <p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>
+
+                    <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus
+                        mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere
+                        consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
+                    <blockquote>
+                        <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong>
+                            ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+                    </blockquote>
+                    <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet
+                        fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
+                    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non
+                        commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus,
+                        porta ac consectetur ac, vestibulum at eros.</p>
+                </div><!-- /.blog-post -->
+
+                <div class="blog-post">
+                    <h2 class="blog-post-title">New feature</h2>
+                    <p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>
+
+                    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean
+                        lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce
+                        dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
+                        amet risus.</p>
+                    <ul>
+                        <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
+                        <li>Donec id elit non mi porta gravida at eget metus.</li>
+                        <li>Nulla vitae elit libero, a pharetra augue.</li>
+                    </ul>
+                    <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet
+                        fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
+                    <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.
+                    </p>
+                </div><!-- /.blog-post -->
+
+                <nav class="blog-pagination">
+                    <a class="btn btn-outline-primary" href="#">Older</a>
+                    <a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">Newer</a>
+                </nav>
+
+            </div>
+
+            <aside class="col-md-4">
+                <div class="p-4 mb-3 bg-light rounded">
+                    <h4 class="font-italic">About</h4>
+                    <p class="mb-0">Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur
+                        purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
+                </div>
+
+                <div class="p-4">
+                    <h4 class="font-italic">Archives</h4>
+                    <ol class="list-unstyled mb-0">
+                        <li><a href="#">March 2014</a></li>
+                        <li><a href="#">February 2014</a></li>
+                        <li><a href="#">January 2014</a></li>
+                        <li><a href="#">December 2013</a></li>
+                        <li><a href="#">November 2013</a></li>
+                        <li><a href="#">October 2013</a></li>
+                        <li><a href="#">September 2013</a></li>
+                        <li><a href="#">August 2013</a></li>
+                        <li><a href="#">July 2013</a></li>
+                        <li><a href="#">June 2013</a></li>
+                        <li><a href="#">May 2013</a></li>
+                        <li><a href="#">April 2013</a></li>
+                    </ol>
+                </div>
+
+                <div class="p-4">
+                    <h4 class="font-italic">Elsewhere</h4>
+                    <ol class="list-unstyled">
+                        <li><a href="#">GitHub</a></li>
+                        <li><a href="#">Twitter</a></li>
+                        <li><a href="#">Facebook</a></li>
+                    </ol>
+                </div>
+            </aside>
+
+        </div><!-- /.row -->
+
+    </main><!-- /.container -->
+
+    <footer class="blog-footer">
+        <p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a
+                href="https://twitter.com/mdo">@mdo</a>.</p>
+        <p>
+            <a href="#">Back to top</a>
+        </p>
+    </footer>
+
+
+
+</body>
+
+</html>

snippets/B5-Snippets/templates/carousel.html

@@ -0,0 +1,370 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="">
+  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
+  <meta name="generator" content="Hugo 0.72.0">
+  <title>Carousel Template · Bootstrap</title>
+
+  <link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/carousel/">
+
+
+
+  <!-- Bootstrap core CSS -->
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+    integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+    integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+    crossorigin="anonymous"></script>
+
+  <style>
+    .bd-placeholder-img {
+      font-size: 1.125rem;
+      text-anchor: middle;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+    }
+
+    @media (min-width: 768px) {
+      .bd-placeholder-img-lg {
+        font-size: 3.5rem;
+      }
+    }
+
+    /* GLOBAL STYLES
+    --------------------------------------------- */
+    /* Padding below the footer and lighter body text */
+
+    body {
+      padding-top: 3rem;
+      padding-bottom: 3rem;
+      color: #5a5a5a;
+    }
+
+
+    /* CUSTOMIZE THE CAROUSEL
+    -------------------------------------------- */
+
+    /* Carousel base class */
+    .carousel {
+      margin-bottom: 4rem;
+    }
+
+    /* Since positioning the image, we need to help out the caption */
+    .carousel-caption {
+      bottom: 3rem;
+      z-index: 10;
+    }
+
+    /* Declare heights because of positioning of img element */
+    .carousel-item {
+      height: 32rem;
+    }
+
+    .carousel-item>img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      min-width: 100%;
+      height: 32rem;
+    }
+
+
+    /* MARKETING CONTENT
+-------------------------------------------------- */
+
+    /* Center align the text within the three columns below the carousel */
+    .marketing .col-lg-4 {
+      margin-bottom: 1.5rem;
+      text-align: center;
+    }
+
+    .marketing h2 {
+      font-weight: 400;
+    }
+
+    .marketing .col-lg-4 p {
+      margin-right: .75rem;
+      margin-left: .75rem;
+    }
+
+
+    /* Featurettes
+------------------------- */
+
+    .featurette-divider {
+      margin: 5rem 0;
+      /* Space out the Bootstrap <hr> more */
+    }
+
+    /* Thin out the marketing headings */
+    .featurette-heading {
+      font-weight: 300;
+      line-height: 1;
+      letter-spacing: -.05rem;
+    }
+
+
+    /* RESPONSIVE CSS
+-------------------------------------------------- */
+
+    @media (min-width: 40em) {
+
+      /* Bump up size of carousel content */
+      .carousel-caption p {
+        margin-bottom: 1.25rem;
+        font-size: 1.25rem;
+        line-height: 1.4;
+      }
+
+      .featurette-heading {
+        font-size: 50px;
+      }
+    }
+
+    @media (min-width: 62em) {
+      .featurette-heading {
+        margin-top: 7rem;
+      }
+    }
+  </style>
+
+
+  <!-- Custom styles for this template -->
+  <link href="carousel.css" rel="stylesheet">
+</head>
+
+<body>
+
+  <header>
+    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="#">Carousel</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
+          aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarCollapse">
+          <ul class="navbar-nav mr-auto mb-2 mb-md-0">
+            <li class="nav-item active">
+              <a class="nav-link" aria-current="page" href="#">Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Link</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+            </li>
+          </ul>
+          <form class="d-flex">
+            <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
+            <button class="btn btn-outline-success" type="submit">Search</button>
+          </form>
+        </div>
+      </div>
+    </nav>
+  </header>
+
+  <main>
+
+    <div id="myCarousel" class="carousel slide" data-ride="carousel">
+      <ol class="carousel-indicators">
+        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+        <li data-target="#myCarousel" data-slide-to="1"></li>
+        <li data-target="#myCarousel" data-slide-to="2"></li>
+      </ol>
+      <div class="carousel-inner">
+        <div class="carousel-item active">
+          <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
+            preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+            <rect width="100%" height="100%" fill="#777" /></svg>
+
+          <div class="container">
+            <div class="carousel-caption text-left">
+              <h1>Example headline.</h1>
+              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
+                metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+              <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
+            </div>
+          </div>
+        </div>
+        <div class="carousel-item">
+          <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
+            preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+            <rect width="100%" height="100%" fill="#777" /></svg>
+
+          <div class="container">
+            <div class="carousel-caption">
+              <h1>Another example headline.</h1>
+              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
+                metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
+            </div>
+          </div>
+        </div>
+        <div class="carousel-item">
+          <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
+            preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+            <rect width="100%" height="100%" fill="#777" /></svg>
+
+          <div class="container">
+            <div class="carousel-caption text-right">
+              <h1>One more for good measure.</h1>
+              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
+                metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+              <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="sr-only">Previous</span>
+      </a>
+      <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="sr-only">Next</span>
+      </a>
+    </div>
+
+
+    <!-- Marketing messaging and featurettes
+  ================================================== -->
+    <!-- Wrap the rest of the page in another container to center all the content. -->
+
+    <div class="container marketing">
+
+      <!-- Three columns of text below the carousel -->
+      <div class="row">
+        <div class="col-lg-4">
+          <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg"
+            aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+            <title>Placeholder</title>
+            <rect width="100%" height="100%" fill="#777" /><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text>
+          </svg>
+
+          <h2>Heading</h2>
+          <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies
+            vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus
+            magna.</p>
+          <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
+        </div><!-- /.col-lg-4 -->
+        <div class="col-lg-4">
+          <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg"
+            aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+            <title>Placeholder</title>
+            <rect width="100%" height="100%" fill="#777" /><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text>
+          </svg>
+
+          <h2>Heading</h2>
+          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras
+            mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris
+            condimentum nibh.</p>
+          <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
+        </div><!-- /.col-lg-4 -->
+        <div class="col-lg-4">
+          <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg"
+            aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+            <title>Placeholder</title>
+            <rect width="100%" height="100%" fill="#777" /><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text>
+          </svg>
+
+          <h2>Heading</h2>
+          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta
+            felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
+            massa justo sit amet risus.</p>
+          <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
+        </div><!-- /.col-lg-4 -->
+      </div><!-- /.row -->
+
+
+      <!-- START THE FEATURETTES -->
+
+      <hr class="featurette-divider">
+
+      <div class="row featurette">
+        <div class="col-md-7">
+          <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It’ll blow your mind.</span>
+          </h2>
+          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod
+            semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus
+            commodo.</p>
+        </div>
+        <div class="col-md-5">
+          <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500"
+            height="500" xmlns="http://www.w3.org/2000/svg" aria-label="Placeholder: 500x500"
+            preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+            <title>Placeholder</title>
+            <rect width="100%" height="100%" fill="#eee" /><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text>
+          </svg>
+
+        </div>
+      </div>
+
+      <hr class="featurette-divider">
+
+      <div class="row featurette">
+        <div class="col-md-7 order-md-2">
+          <h2 class="featurette-heading">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2>
+          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod
+            semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus
+            commodo.</p>
+        </div>
+        <div class="col-md-5 order-md-1">
+          <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500"
+            height="500" xmlns="http://www.w3.org/2000/svg" aria-label="Placeholder: 500x500"
+            preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+            <title>Placeholder</title>
+            <rect width="100%" height="100%" fill="#eee" /><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text>
+          </svg>
+
+        </div>
+      </div>
+
+      <hr class="featurette-divider">
+
+      <div class="row featurette">
+        <div class="col-md-7">
+          <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
+          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod
+            semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus
+            commodo.</p>
+        </div>
+        <div class="col-md-5">
+          <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500"
+            height="500" xmlns="http://www.w3.org/2000/svg" aria-label="Placeholder: 500x500"
+            preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+            <title>Placeholder</title>
+            <rect width="100%" height="100%" fill="#eee" /><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text>
+          </svg>
+
+        </div>
+      </div>
+
+      <hr class="featurette-divider">
+
+      <!-- /END THE FEATURETTES -->
+
+    </div><!-- /.container -->
+
+
+    <!-- FOOTER -->
+    <footer class="container">
+      <p class="float-right"><a href="#">Back to top</a></p>
+      <p>&copy; 2017-2020 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
+    </footer>
+  </main>
+
+
+
+</body>
+
+</html>

snippets/B5-Snippets/templates/dashboard.html

@@ -0,0 +1,396 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="">
+  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
+  <meta name="generator" content="Hugo 0.72.0">
+  <title>Dashboard Template · Bootstrap</title>
+
+  <link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/dashboard/">
+
+
+
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+    integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+    crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+    integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+    crossorigin="anonymous"></script>
+
+  <style>
+    .bd-placeholder-img {
+      font-size: 1.125rem;
+      text-anchor: middle;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+    }
+
+    @media (min-width: 768px) {
+      .bd-placeholder-img-lg {
+        font-size: 3.5rem;
+      }
+    }
+
+    body {
+      font-size: .875rem;
+    }
+
+    .feather {
+      width: 16px;
+      height: 16px;
+      vertical-align: text-bottom;
+    }
+
+    /* Sidebar*/
+
+    .sidebar {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 100;
+      /* Behind the navbar */
+      padding: 48px 0 0;
+      /* Height of navbar */
+      box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+    }
+
+    @media (max-width: 767.98px) {
+      .sidebar {
+        top: 5rem;
+      }
+    }
+
+    .sidebar-sticky {
+      position: relative;
+      top: 0;
+      height: calc(100vh - 48px);
+      padding-top: .5rem;
+      overflow-x: hidden;
+      overflow-y: auto;
+      /* Scrollable contents if viewport is shorter than content. */
+    }
+
+    .sidebar .nav-link {
+      font-weight: 500;
+      color: #333;
+    }
+
+    .sidebar .nav-link .feather {
+      margin-right: 4px;
+      color: #727272;
+    }
+
+    .sidebar .nav-link.active {
+      color: #007bff;
+    }
+
+    .sidebar .nav-link:hover .feather,
+    .sidebar .nav-link.active .feather {
+      color: inherit;
+    }
+
+    .sidebar-heading {
+      font-size: .75rem;
+      text-transform: uppercase;
+    }
+
+    /*Navbar*/
+    .navbar-brand {
+      padding-top: .75rem;
+      padding-bottom: .75rem;
+      font-size: 1rem;
+      background-color: rgba(0, 0, 0, .25);
+      box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
+    }
+
+    .navbar .navbar-toggler {
+      top: .25rem;
+      right: 1rem;
+    }
+
+    .navbar .form-control {
+      padding: .75rem 1rem;
+      border-width: 0;
+      border-radius: 0;
+    }
+
+    .form-control-dark {
+      color: #fff;
+      background-color: rgba(255, 255, 255, .1);
+      border-color: rgba(255, 255, 255, .1);
+    }
+
+    .form-control-dark:focus {
+      border-color: transparent;
+      box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
+    }
+  </style>
+</head>
+
+<body>
+
+  <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
+    <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Company name</a>
+    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse"
+      data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
+    <ul class="navbar-nav px-3">
+      <li class="nav-item text-nowrap">
+        <a class="nav-link" href="#">Sign out</a>
+      </li>
+    </ul>
+  </nav>
+
+  <div class="container-fluid">
+    <div class="row">
+      <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
+        <div class="position-sticky pt-3">
+          <ul class="nav flex-column">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="#">
+                <span data-feather="home"></span>
+                Dashboard
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">
+                <span data-feather="file"></span>
+                Orders
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">
+                <span data-feather="shopping-cart"></span>
+                Products
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">
+                <span data-feather="users"></span>
+                Customers
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">
+                <span data-feather="bar-chart-2"></span>
+                Reports
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">
+                <span data-feather="layers"></span>
+                Integrations
+              </a>
+            </li>
+          </ul>
+
+          <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
+            <span>Saved reports</span>
+            <a class="link-secondary" href="#" aria-label="Add a new report">
+              <span data-feather="plus-circle"></span>
+            </a>
+          </h6>
+          <ul class="nav flex-column mb-2">
+            <li class="nav-item">
+              <a class="nav-link" href="#">
+                <span data-feather="file-text"></span>
+                Current month
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">
+                <span data-feather="file-text"></span>
+                Last quarter
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">
+                <span data-feather="file-text"></span>
+                Social engagement
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">
+                <span data-feather="file-text"></span>
+                Year-end sale
+              </a>
+            </li>
+          </ul>
+        </div>
+      </nav>
+
+      <main class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
+        <div
+          class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+          <h1 class="h2">Dashboard</h1>
+          <div class="btn-toolbar mb-2 mb-md-0">
+            <div class="btn-group mr-2">
+              <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
+              <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
+            </div>
+            <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
+              <span data-feather="calendar"></span>
+              This week
+            </button>
+          </div>
+        </div>
+
+        <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
+
+        <h2>Section title</h2>
+        <div class="table-responsive">
+          <table class="table table-striped table-sm">
+            <thead>
+              <tr>
+                <th>#</th>
+                <th>Header</th>
+                <th>Header</th>
+                <th>Header</th>
+                <th>Header</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>1,001</td>
+                <td>Lorem</td>
+                <td>ipsum</td>
+                <td>dolor</td>
+                <td>sit</td>
+              </tr>
+              <tr>
+                <td>1,002</td>
+                <td>amet</td>
+                <td>consectetur</td>
+                <td>adipiscing</td>
+                <td>elit</td>
+              </tr>
+              <tr>
+                <td>1,003</td>
+                <td>Integer</td>
+                <td>nec</td>
+                <td>odio</td>
+                <td>Praesent</td>
+              </tr>
+              <tr>
+                <td>1,003</td>
+                <td>libero</td>
+                <td>Sed</td>
+                <td>cursus</td>
+                <td>ante</td>
+              </tr>
+              <tr>
+                <td>1,004</td>
+                <td>dapibus</td>
+                <td>diam</td>
+                <td>Sed</td>
+                <td>nisi</td>
+              </tr>
+              <tr>
+                <td>1,005</td>
+                <td>Nulla</td>
+                <td>quis</td>
+                <td>sem</td>
+                <td>at</td>
+              </tr>
+              <tr>
+                <td>1,006</td>
+                <td>nibh</td>
+                <td>elementum</td>
+                <td>imperdiet</td>
+                <td>Duis</td>
+              </tr>
+              <tr>
+                <td>1,007</td>
+                <td>sagittis</td>
+                <td>ipsum</td>
+                <td>Praesent</td>
+                <td>mauris</td>
+              </tr>
+              <tr>
+                <td>1,008</td>
+                <td>Fusce</td>
+                <td>nec</td>
+                <td>tellus</td>
+                <td>sed</td>
+              </tr>
+              <tr>
+                <td>1,009</td>
+                <td>augue</td>
+                <td>semper</td>
+                <td>porta</td>
+                <td>Mauris</td>
+              </tr>
+              <tr>
+                <td>1,010</td>
+                <td>massa</td>
+                <td>Vestibulum</td>
+                <td>lacinia</td>
+                <td>arcu</td>
+              </tr>
+              <tr>
+                <td>1,011</td>
+                <td>eget</td>
+                <td>nulla</td>
+                <td>Class</td>
+                <td>aptent</td>
+              </tr>
+              <tr>
+                <td>1,012</td>
+                <td>taciti</td>
+                <td>sociosqu</td>
+                <td>ad</td>
+                <td>litora</td>
+              </tr>
+              <tr>
+                <td>1,013</td>
+                <td>torquent</td>
+                <td>per</td>
+                <td>conubia</td>
+                <td>nostra</td>
+              </tr>
+              <tr>
+                <td>1,014</td>
+                <td>per</td>
+                <td>inceptos</td>
+                <td>himenaeos</td>
+                <td>Curabitur</td>
+              </tr>
+              <tr>
+                <td>1,015</td>
+                <td>sodales</td>
+                <td>ligula</td>
+                <td>in</td>
+                <td>libero</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </main>
+    </div>
+  </div>
+
+
+  <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-DBjhmceckmzwrnMMrjI7BvG2FmRuxQVaTfFYHgfnrdfqMhxKt445b7j3KBQLolRl"
+    crossorigin="anonymous"></script>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.24.1/feather.min.js"
+    integrity="sha384-EbSscX4STvYAC/DxHse8z5gEDaNiKAIGW+EpfzYTfQrgIlHywXXrM9SUIZ0BlyfF"
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"
+    integrity="sha384-i+dHPTzZw7YVZOx9lbH5l6lP74sLRtMtwN2XjVqjf3uAGAREAF4LMIUDTWEVs4LI"
+    crossorigin="anonymous"></script>
+  <script src="dashboard.js"></script>
+</body>
+
+</html>

snippets/B5-Snippets/templates/demo.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Bootstrap Site</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+</head>
+<body>
+<h1>Hello-Bootstrap</h1>
+<div class="d-flex align-content-sm-start"></div>
+</body>
+</html>

snippets/B5-Snippets/templates/grid.html

@@ -0,0 +1,244 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
+    <meta name="generator" content="Hugo 0.72.0">
+    <title>Grid Template · Bootstrap</title>
+
+    <link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/grid/">
+
+
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+    integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+    crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+    integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+    crossorigin="anonymous"></script>
+
+    <style>
+        .bd-placeholder-img {
+            font-size: 1.125rem;
+            text-anchor: middle;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
+
+        @media (min-width: 768px) {
+            .bd-placeholder-img-lg {
+                font-size: 3.5rem;
+            }
+        }
+    </style>
+
+
+    <!-- Custom styles for this template -->
+    <link href="grid.css" rel="stylesheet">
+</head>
+
+<body class="py-4">
+
+
+    
+    <div class="container">
+
+        <h1>Bootstrap grid examples</h1>
+        <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
+        <p>In these examples the <code>.themed-grid-col</code> class is added to the columns to add some theming. This
+            is not a class that is available in Bootstrap by default.</p>
+
+        <h2 class="mt-4">Five grid tiers</h2>
+        <p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts
+            at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
+
+        <div class="row mb-3">
+            <div class="col-4 themed-grid-col">.col-4</div>
+            <div class="col-4 themed-grid-col">.col-4</div>
+            <div class="col-4 themed-grid-col">.col-4</div>
+        </div>
+
+        <div class="row mb-3">
+            <div class="col-sm-4 themed-grid-col">.col-sm-4</div>
+            <div class="col-sm-4 themed-grid-col">.col-sm-4</div>
+            <div class="col-sm-4 themed-grid-col">.col-sm-4</div>
+        </div>
+
+        <div class="row mb-3">
+            <div class="col-md-4 themed-grid-col">.col-md-4</div>
+            <div class="col-md-4 themed-grid-col">.col-md-4</div>
+            <div class="col-md-4 themed-grid-col">.col-md-4</div>
+        </div>
+
+        <div class="row mb-3">
+            <div class="col-lg-4 themed-grid-col">.col-lg-4</div>
+            <div class="col-lg-4 themed-grid-col">.col-lg-4</div>
+            <div class="col-lg-4 themed-grid-col">.col-lg-4</div>
+        </div>
+
+        <div class="row mb-3">
+            <div class="col-xl-4 themed-grid-col">.col-xl-4</div>
+            <div class="col-xl-4 themed-grid-col">.col-xl-4</div>
+            <div class="col-xl-4 themed-grid-col">.col-xl-4</div>
+        </div>
+
+        <div class="row mb-3">
+            <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
+            <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
+            <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
+        </div>
+
+        <h2 class="mt-4">Three equal columns</h2>
+        <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile
+            devices, tablets and below, the columns will automatically stack.</p>
+        <div class="row mb-3">
+            <div class="col-md-4 themed-grid-col">.col-md-4</div>
+            <div class="col-md-4 themed-grid-col">.col-md-4</div>
+            <div class="col-md-4 themed-grid-col">.col-md-4</div>
+        </div>
+
+        <h2 class="mt-4">Three equal columns alternative</h2>
+        <p>By using the <code>.row-cols-*</code> classes, you can easily create a grid with equal columns.</p>
+        <div class="row row-cols-md-3 mb-3">
+            <div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
+            <div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
+            <div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
+        </div>
+
+        <h2 class="mt-4">Three unequal columns</h2>
+        <p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths.
+            Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns
+            start stacking no matter the viewport.</p>
+        <div class="row mb-3">
+            <div class="col-md-3 themed-grid-col">.col-md-3</div>
+            <div class="col-md-6 themed-grid-col">.col-md-6</div>
+            <div class="col-md-3 themed-grid-col">.col-md-3</div>
+        </div>
+
+        <h2 class="mt-4">Two columns</h2>
+        <p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
+        <div class="row mb-3">
+            <div class="col-md-8 themed-grid-col">.col-md-8</div>
+            <div class="col-md-4 themed-grid-col">.col-md-4</div>
+        </div>
+
+        <h2 class="mt-4">Full width, single column</h2>
+        <p class="text-warning">
+            No grid classes are necessary for full-width elements.
+        </p>
+
+        <hr class="my-4">
+
+        <h2 class="mt-4">Two columns with two nested columns</h2>
+        <p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you
+            two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal
+            widths) within the larger column.</p>
+        <p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
+        <div class="row mb-3">
+            <div class="col-md-8 themed-grid-col">
+                <div class="pb-3">
+                    .col-md-8
+                </div>
+                <div class="row">
+                    <div class="col-md-6 themed-grid-col">.col-md-6</div>
+                    <div class="col-md-6 themed-grid-col">.col-md-6</div>
+                </div>
+            </div>
+            <div class="col-md-4 themed-grid-col">.col-md-4</div>
+        </div>
+
+        <hr class="my-4">
+
+        <h2 class="mt-4">Mixed: mobile and desktop</h2>
+        <p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm
+            (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes
+            to create more dynamic and flexible layouts.</p>
+        <p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only
+            need to specify md.</p>
+        <div class="row mb-3">
+            <div class="col-md-8 themed-grid-col">.col-md-8</div>
+            <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
+        </div>
+        <div class="row mb-3">
+            <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
+            <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
+            <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
+        </div>
+        <div class="row mb-3">
+            <div class="col-6 themed-grid-col">.col-6</div>
+            <div class="col-6 themed-grid-col">.col-6</div>
+        </div>
+
+        <hr class="my-4">
+
+        <h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>
+        <div class="row mb-3">
+            <div class="col-sm-6 col-lg-8 themed-grid-col">.col-sm-6 .col-lg-8</div>
+            <div class="col-6 col-lg-4 themed-grid-col">.col-6 .col-lg-4</div>
+        </div>
+        <div class="row mb-3">
+            <div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
+            <div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
+            <div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
+        </div>
+
+        <hr class="my-4">
+
+        <h2 class="mt-4">Gutters</h2>
+        <p>With <code>.gx-*</code> classes, the horizontal gutters can be adjusted.</p>
+        <div class="row row-cols-1 row-cols-md-3 gx-4">
+            <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
+            <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
+            <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
+            <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
+            <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
+            <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
+        </div>
+        <p class="mt-4">Use the <code>.gy-*</code> classes to control the vertical gutters.</p>
+        <div class="row row-cols-1 row-cols-md-3 gy-4">
+            <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
+            <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
+            <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
+            <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
+            <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
+            <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
+        </div>
+        <p class="mt-4">With <code>.g-*</code> classes, the gutters in both directions can be adjusted.</p>
+        <div class="row row-cols-1 row-cols-md-3 g-3">
+            <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
+            <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
+            <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
+            <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
+            <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
+            <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
+        </div>
+    </div>
+
+    <div class="container" id="containers">
+        <hr class="my-4">
+
+        <h2 class="mt-4">Containers</h2>
+        <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.
+            v5 adds a new <code>xxl</code> breakpoint.</p>
+    </div>
+
+    <div class="container themed-container">.container</div>
+    <div class="container-sm themed-container">.container-sm</div>
+    <div class="container-md themed-container">.container-md</div>
+    <div class="container-lg themed-container">.container-lg</div>
+    <div class="container-xl themed-container">.container-xl</div>
+    <div class="container-xxl themed-container">.container-xxl</div>
+    <div class="container-fluid themed-container">.container-fluid</div>
+
+
+
+</body>
+
+</html>

snippets/B5-Snippets/templates/hello.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${1:Bootstrap Site}</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+    integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+    crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+    integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+    crossorigin="anonymous"></script>
+</head>
+
+<body>
+
+
+
+</body>
+
+</html>

snippets/B5-Snippets/templates/masonary.html

@@ -0,0 +1,193 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
+    <meta name="generator" content="Hugo 0.72.0">
+    <title>Masonry example · Bootstrap</title>
+
+    <link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/masonry/">
+
+
+
+    <!-- Bootstrap core CSS -->
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+        integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+        crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+        integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+        crossorigin="anonymous"></script>
+
+    <!-- Favicons -->
+    <!-- <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+    <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+    <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+    <link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
+    <link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
+    <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
+ -->
+
+
+    <meta name="theme-color" content="#7952b3">
+
+
+    <style>
+        .bd-placeholder-img {
+            font-size: 1.125rem;
+            text-anchor: middle;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
+
+        @media (min-width: 768px) {
+            .bd-placeholder-img-lg {
+                font-size: 3.5rem;
+            }
+        }
+    </style>
+
+
+</head>
+
+<body>
+
+    <div class="container py-5">
+        <h1>Bootstrap and Masonry</h1>
+        <p class="lead">Integrate <a href="https://masonry.desandro.com/">Masonry</a> with the Bootstrap grid system and
+            cards component.</p>
+
+        <p>Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like
+            so:</p>
+
+        <pre><code>
+&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js&quot; integrity=&quot;sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D&quot; crossorigin=&quot;anonymous&quot; async&gt;&lt;/script&gt;
+  </code></pre>
+
+        <p>By adding <code>data-masonry='{"percentPosition": true }'</code> to the <code>.row</code> wrapper, we can
+            combine the powers of Bootstrap's responsive grid and Masonry's positioning.</p>
+
+        <hr class="my-5">
+
+        <div class="row" data-masonry='{"percentPosition": true }'>
+            <div class="col-sm-6 col-lg-4 mb-4">
+                <div class="card">
+                    <svg class="bd-placeholder-img card-img-top" width="100%" height="200"
+                        xmlns="http://www.w3.org/2000/svg" aria-label="Placeholder: Image cap"
+                        preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+                        <title>Placeholder</title>
+                        <rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6"
+                            dy=".3em">Image cap</text>
+                    </svg>
+
+                    <div class="card-body">
+                        <h5 class="card-title">Card title that wraps to a new line</h5>
+                        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
+                            additional content. This content is a little bit longer.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-6 col-lg-4 mb-4">
+                <div class="card p-3">
+                    <figure class="p-3 mb-0">
+                        <blockquote class="blockquote">
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                        </blockquote>
+                        <figcaption class="blockquote-footer mb-0 text-muted">
+                            Someone famous in <cite title="Source Title">Source Title</cite>
+                        </figcaption>
+                    </figure>
+                </div>
+            </div>
+            <div class="col-sm-6 col-lg-4 mb-4">
+                <div class="card">
+                    <svg class="bd-placeholder-img card-img-top" width="100%" height="200"
+                        xmlns="http://www.w3.org/2000/svg" aria-label="Placeholder: Image cap"
+                        preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+                        <title>Placeholder</title>
+                        <rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6"
+                            dy=".3em">Image cap</text>
+                    </svg>
+
+                    <div class="card-body">
+                        <h5 class="card-title">Card title</h5>
+                        <p class="card-text">This card has supporting text below as a natural lead-in to additional
+                            content.</p>
+                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-6 col-lg-4 mb-4">
+                <div class="card bg-primary text-white text-center p-3">
+                    <figure class="mb-0">
+                        <blockquote class="blockquote">
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
+                        </blockquote>
+                        <figcaption class="blockquote-footer mb-0 text-white">
+                            Someone famous in <cite title="Source Title">Source Title</cite>
+                        </figcaption>
+                    </figure>
+                </div>
+            </div>
+            <div class="col-sm-6 col-lg-4 mb-4">
+                <div class="card text-center">
+                    <div class="card-body">
+                        <h5 class="card-title">Card title</h5>
+                        <p class="card-text">This card has a regular title and short paragraph of text below it.</p>
+                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-6 col-lg-4 mb-4">
+                <div class="card">
+                    <svg class="bd-placeholder-img card-img" width="100%" height="260"
+                        xmlns="http://www.w3.org/2000/svg" aria-label="Placeholder: Card image"
+                        preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
+                        <title>Placeholder</title>
+                        <rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6"
+                            dy=".3em">Card image</text>
+                    </svg>
+
+                </div>
+            </div>
+            <div class="col-sm-6 col-lg-4 mb-4">
+                <div class="card p-3 text-right">
+                    <figure class="mb-0">
+                        <blockquote class="blockquote">
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                        </blockquote>
+                        <figcaption class="blockquote-footer mb-0 text-muted">
+                            Someone famous in <cite title="Source Title">Source Title</cite>
+                        </figcaption>
+                    </figure>
+                </div>
+            </div>
+            <div class="col-sm-6 col-lg-4 mb-4">
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">Card title</h5>
+                        <p class="card-text">This is another card with title and supporting text below. This card has
+                            some additional content to make it slightly taller overall.</p>
+                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+
+
+    <script async src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
+        integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D"
+        crossorigin="anonymous"></script>
+</body>
+
+</html>

snippets/B5-Snippets/templates/navbar-bottom.html

@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="author" content="Hans McMurdy">
+  <title>Bootstrap 5 Navbar Bottom Template · Bootstrap</title>
+  <meta name="title" content="#JavaScriptFirst">
+  <meta name="description"
+    content="Learn how to code with #JavaScriptFirst: https://github.com/HansUXdev/JavaScript-First">
+  <!-- Bootstrap core CSS -->
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+    integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+    integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+    crossorigin="anonymous"></script>
+  <link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/navbar-bottom/">
+
+  <style>
+    .bd-placeholder-img {
+      font-size: 1.125rem;
+      text-anchor: middle;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+    }
+
+    @media (min-width: 768px) {
+      .bd-placeholder-img-lg {
+        font-size: 3.5rem;
+      }
+    }
+  </style>
+
+
+</head>
+
+<body>
+
+  <main class="container">
+    <div class="d-flex align-items-center p-3 my-3 text-dark-50 bg-purple rounded shadow-sm">
+      <img class="mr-3" src="https://hansmcmurdy.com/JavaScript-First/logo.svg" alt="" width="48" height="48">
+      <div class="lh-1">
+        <h6 class="mb-1 text-dark lh-2">#JavaScriptFirst</h6>
+        <small class="text-sm-left lh-base font-normal text-lowercase text-decoration-none text-reset">
+          ${1:Learn Modern JavaScript, from an Open Source Book that teaches anyone how to code with JavaScript using
+          the node.js runtime environment rather than a browser and by the end, you will build a server and a website
+          using JavaScript.}
+        </small>
+      </div>
+    </div>
+  </main>
+
+
+  <nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">Bottom navbar</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
+        aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarCollapse">
+        <ul class="navbar-nav">
+          <li class="nav-item active">
+            <a class="nav-link" aria-current="page" href="#">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Link</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+          </li>
+          <li class="nav-item dropup">
+            <a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-toggle="dropdown"
+              aria-expanded="false">Dropup</a>
+            <ul class="dropdown-menu" aria-labelledby="dropdown10">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+
+</body>
+
+</html>

snippets/B5-Snippets/templates/offcanvas.html

@@ -0,0 +1,159 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+   <meta charset="utf-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1">
+   <meta name="author" content="Hans McMurdy">
+   <title>Bootstrap 5 Offcanvas Template · Bootstrap</title>
+   <meta name="title" content="#JavaScriptFirst">
+   <meta name="description"
+      content="Learn how to code with #JavaScriptFirst: https://github.com/HansUXdev/JavaScript-First">
+   <!-- Bootstrap core CSS -->
+   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
+   <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"></script>
+   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"></script>
+   <!-- Favicons -->
+
+   <meta name="theme-color" content="#7952b3">
+   
+   <style>
+      .bd-placeholder-img {
+         font-size: 1.125rem;
+         text-anchor: middle;
+         -webkit-user-select: none;
+         -moz-user-select: none;
+         -ms-user-select: none;
+         user-select: none;
+      }
+
+      @media (min-width: 768px) {
+         .bd-placeholder-img-lg {
+            font-size: 3.5rem;
+         }
+      }
+      /* Prevent scroll on narrow devices */
+      html,
+      body {
+         overflow-x: hidden;
+      }
+
+      body {
+         padding-top: 56px;
+      }
+
+      @media (max-width: 991.98px) {
+         .offcanvas-collapse {
+            position: fixed;
+            top: 56px;
+            /* Height of navbar */
+            bottom: 0;
+            left: 100%;
+            width: 100%;
+            padding-right: 1rem;
+            padding-left: 1rem;
+            overflow-y: auto;
+            visibility: hidden;
+            background-color: #343a40;
+            transition: transform .3s ease-in-out, visibility .3s ease-in-out;
+         }
+
+         .offcanvas-collapse.open {
+            visibility: visible;
+            transform: translateX(-100%);
+         }
+      }
+
+      .nav-scroller {
+         position: relative;
+         z-index: 2;
+         height: 2.75rem;
+         overflow-y: hidden;
+      }
+
+      .nav-scroller .nav {
+         display: flex;
+         flex-wrap: nowrap;
+         padding-bottom: 1rem;
+         margin-top: -1px;
+         overflow-x: auto;
+         color: rgba(255, 255, 255, .75);
+         text-align: center;
+         white-space: nowrap;
+         -webkit-overflow-scrolling: touch;
+      }
+
+      .nav-underline .nav-link {
+         padding-top: .75rem;
+         padding-bottom: .75rem;
+         font-size: .875rem;
+         color: #6c757d;
+      }
+
+      .nav-underline .nav-link:hover {
+         color: #007bff;
+      }
+
+      .nav-underline .active {
+         font-weight: 500;
+         color: #343a40;
+      }
+
+      .text-white-50 {
+         color: rgba(255, 255, 255, .5);
+      }
+
+      .bg-purple {
+         background-color: #6f42c1;
+      }
+   </style>
+</head>
+
+<body class="bg-light">
+   <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
+      <div class="container-fluid">
+         <a class="navbar-brand" href="#">Offcanvas navbar</a>
+         <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
+            <span class="navbar-toggler-icon"></span>
+         </button>
+         <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
+            <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
+               <li class="nav-item active">
+                  <a class="nav-link" aria-current="page" href="#">Home</a>
+               </li>
+               <li class="nav-item">
+                  <a class="nav-link" href="#">About</a>
+               </li>
+            </ul>
+         </div>
+      </div>
+   </nav>
+
+   <main class="container">
+      <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded shadow-sm">
+         <img class="mr-3" src="https://hansmcmurdy.com/JavaScript-First/logo.svg" alt="" width="48" height="48">
+         <div class="lh-1">
+            <h6 class="mb-0 text-white lh-1">#JavaScriptFirst</h6>
+            <small>Learn Modern JavaScript, from an Open Source Book that teaches anyone how to code with JavaScript
+               using the node.js runtime environment rather than a browser and by the end, you will build a server and a
+               website using JavaScript.</small>
+         </div>
+      </div>
+
+   </main>
+   <script type="text/javascript">
+      (function () {
+         'use strict'
+         document.querySelector('[data-toggle="offcanvas"]').addEventListener('click', function () {
+            document.querySelector('.offcanvas-collapse').classList.toggle('open')
+         })
+      })()
+   </script>
+</body>
+
+</html>

snippets/B5-Snippets/templates/pricing.html

@@ -0,0 +1,169 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="">
+  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
+  <meta name="generator" content="Hugo 0.72.0">
+  <title>Pricing example · Bootstrap</title>
+
+  <link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/pricing/">
+
+
+
+  <!-- Bootstrap core CSS -->
+  <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
+
+  <!-- Favicons -->
+  <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+  <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+  <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+  <link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
+  <link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
+  <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
+  <meta name="theme-color" content="#7952b3">
+
+
+  <style>
+    .bd-placeholder-img {
+      font-size: 1.125rem;
+      text-anchor: middle;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+    }
+
+    @media (min-width: 768px) {
+      .bd-placeholder-img-lg {
+        font-size: 3.5rem;
+      }
+    }
+  </style>
+
+
+  <!-- Custom styles for this template -->
+  <link href="pricing.css" rel="stylesheet">
+</head>
+
+<body>
+
+  <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
+    <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
+    <nav class="my-2 my-md-0 mr-md-3">
+      <a class="p-2 text-dark" href="#">Features</a>
+      <a class="p-2 text-dark" href="#">Enterprise</a>
+      <a class="p-2 text-dark" href="#">Support</a>
+      <a class="p-2 text-dark" href="#">Pricing</a>
+    </nav>
+    <a class="btn btn-outline-primary" href="#">Sign up</a>
+  </div>
+
+  <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
+    <h1 class="display-4">Pricing</h1>
+    <p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example.
+      It’s built with default Bootstrap components and utilities with little customization.</p>
+  </div>
+
+  <div class="container">
+    <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
+      <div class="col">
+        <div class="card mb-4 shadow-sm">
+          <div class="card-header">
+            <h4 class="my-0 font-weight-normal">Free</h4>
+          </div>
+          <div class="card-body">
+            <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
+            <ul class="list-unstyled mt-3 mb-4">
+              <li>10 users included</li>
+              <li>2 GB of storage</li>
+              <li>Email support</li>
+              <li>Help center access</li>
+            </ul>
+            <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card mb-4 shadow-sm">
+          <div class="card-header">
+            <h4 class="my-0 font-weight-normal">Pro</h4>
+          </div>
+          <div class="card-body">
+            <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
+            <ul class="list-unstyled mt-3 mb-4">
+              <li>20 users included</li>
+              <li>10 GB of storage</li>
+              <li>Priority email support</li>
+              <li>Help center access</li>
+            </ul>
+            <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card mb-4 shadow-sm">
+          <div class="card-header">
+            <h4 class="my-0 font-weight-normal">Enterprise</h4>
+          </div>
+          <div class="card-body">
+            <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
+            <ul class="list-unstyled mt-3 mb-4">
+              <li>30 users included</li>
+              <li>15 GB of storage</li>
+              <li>Phone and email support</li>
+              <li>Help center access</li>
+            </ul>
+            <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <footer class="pt-4 my-md-5 pt-md-5 border-top">
+      <div class="row">
+        <div class="col-12 col-md">
+          <img class="mb-2" src="/docs/5.0/assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">
+          <small class="d-block mb-3 text-muted">&copy; 2017-2020</small>
+        </div>
+        <div class="col-6 col-md">
+          <h5>Features</h5>
+          <ul class="list-unstyled text-small">
+            <li><a class="link-secondary" href="#">Cool stuff</a></li>
+            <li><a class="link-secondary" href="#">Random feature</a></li>
+            <li><a class="link-secondary" href="#">Team feature</a></li>
+            <li><a class="link-secondary" href="#">Stuff for developers</a></li>
+            <li><a class="link-secondary" href="#">Another one</a></li>
+            <li><a class="link-secondary" href="#">Last time</a></li>
+          </ul>
+        </div>
+        <div class="col-6 col-md">
+          <h5>Resources</h5>
+          <ul class="list-unstyled text-small">
+            <li><a class="link-secondary" href="#">Resource</a></li>
+            <li><a class="link-secondary" href="#">Resource name</a></li>
+            <li><a class="link-secondary" href="#">Another resource</a></li>
+            <li><a class="link-secondary" href="#">Final resource</a></li>
+          </ul>
+        </div>
+        <div class="col-6 col-md">
+          <h5>About</h5>
+          <ul class="list-unstyled text-small">
+            <li><a class="link-secondary" href="#">Team</a></li>
+            <li><a class="link-secondary" href="#">Locations</a></li>
+            <li><a class="link-secondary" href="#">Privacy</a></li>
+            <li><a class="link-secondary" href="#">Terms</a></li>
+          </ul>
+        </div>
+      </div>
+    </footer>
+  </div>
+
+
+
+</body>
+
+</html>

snippets/B5-Snippets/templates/product.html

@@ -0,0 +1,294 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
+    <meta name="generator" content="Hugo 0.72.0">
+    <title>Product example · Bootstrap</title>
+
+    <link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/product/">
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+        integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+        integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+        crossorigin="anonymous"></script>
+
+
+
+    <style>
+        .bd-placeholder-img {
+            font-size: 1.125rem;
+            text-anchor: middle;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
+
+        @media (min-width: 768px) {
+            .bd-placeholder-img-lg {
+                font-size: 3.5rem;
+            }
+        }
+    </style>
+
+
+    <!-- Custom styles for this template -->
+    <!-- <link href="product.css" rel="stylesheet"> -->
+    <style>
+        .container {
+            max-width: 960px;
+        }
+
+        /*
+ * Custom translucent site header
+ */
+
+        .site-header {
+            background-color: rgba(0, 0, 0, .85);
+            -webkit-backdrop-filter: saturate(180%) blur(20px);
+            backdrop-filter: saturate(180%) blur(20px);
+        }
+
+        .site-header a {
+            color: #727272;
+            transition: color .15s ease-in-out;
+        }
+
+        .site-header a:hover {
+            color: #fff;
+            text-decoration: none;
+        }
+
+        /*
+ * Dummy devices (replace them with your own or something else entirely!)
+ */
+
+        .product-device {
+            position: absolute;
+            right: 10%;
+            bottom: -30%;
+            width: 300px;
+            height: 540px;
+            background-color: #333;
+            border-radius: 21px;
+            transform: rotate(30deg);
+        }
+
+        .product-device::before {
+            position: absolute;
+            top: 10%;
+            right: 10px;
+            bottom: 10%;
+            left: 10px;
+            content: "";
+            background-color: rgba(255, 255, 255, .1);
+            border-radius: 5px;
+        }
+
+        .product-device-2 {
+            top: -25%;
+            right: auto;
+            bottom: 0;
+            left: 5%;
+            background-color: #e5e5e5;
+        }
+
+
+        /*
+ * Extra utilities
+ */
+
+        .flex-equal>* {
+            flex: 1;
+        }
+
+        @media (min-width: 768px) {
+            .flex-md-equal>* {
+                flex: 1;
+            }
+        }
+    </style>
+</head>
+
+<body>
+
+    <nav class="site-header sticky-top py-1">
+        <div class="container d-flex flex-column flex-md-row justify-content-between">
+            <a class="py-2" href="#" aria-label="Product">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
+                    stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mx-auto" role="img"
+                    viewBox="0 0 24 24">
+                    <title>Product</title>
+                    <circle cx="12" cy="12" r="10" />
+                    <path
+                        d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94" />
+                </svg>
+            </a>
+            <a class="py-2 d-none d-md-inline-block" href="#">Tour</a>
+            <a class="py-2 d-none d-md-inline-block" href="#">Product</a>
+            <a class="py-2 d-none d-md-inline-block" href="#">Features</a>
+            <a class="py-2 d-none d-md-inline-block" href="#">Enterprise</a>
+            <a class="py-2 d-none d-md-inline-block" href="#">Support</a>
+            <a class="py-2 d-none d-md-inline-block" href="#">Pricing</a>
+            <a class="py-2 d-none d-md-inline-block" href="#">Cart</a>
+        </div>
+    </nav>
+
+    <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
+        <div class="col-md-5 p-lg-5 mx-auto my-5">
+            <h1 class="display-4 font-weight-normal">Punny headline</h1>
+            <p class="lead font-weight-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts
+                with this example based on Apple’s marketing pages.</p>
+            <a class="btn btn-outline-secondary" href="#">Coming soon</a>
+        </div>
+        <div class="product-device shadow-sm d-none d-md-block"></div>
+        <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
+    </div>
+
+    <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
+        <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
+            <div class="my-3 py-3">
+                <h2 class="display-5">Another headline</h2>
+                <p class="lead">And an even wittier subheading.</p>
+            </div>
+            <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;">
+            </div>
+        </div>
+        <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+            <div class="my-3 p-3">
+                <h2 class="display-5">Another headline</h2>
+                <p class="lead">And an even wittier subheading.</p>
+            </div>
+            <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;">
+            </div>
+        </div>
+    </div>
+
+    <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
+        <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+            <div class="my-3 p-3">
+                <h2 class="display-5">Another headline</h2>
+                <p class="lead">And an even wittier subheading.</p>
+            </div>
+            <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;">
+            </div>
+        </div>
+        <div class="bg-primary mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
+            <div class="my-3 py-3">
+                <h2 class="display-5">Another headline</h2>
+                <p class="lead">And an even wittier subheading.</p>
+            </div>
+            <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;">
+            </div>
+        </div>
+    </div>
+
+    <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
+        <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+            <div class="my-3 p-3">
+                <h2 class="display-5">Another headline</h2>
+                <p class="lead">And an even wittier subheading.</p>
+            </div>
+            <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;">
+            </div>
+        </div>
+        <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+            <div class="my-3 py-3">
+                <h2 class="display-5">Another headline</h2>
+                <p class="lead">And an even wittier subheading.</p>
+            </div>
+            <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;">
+            </div>
+        </div>
+    </div>
+
+    <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
+        <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+            <div class="my-3 p-3">
+                <h2 class="display-5">Another headline</h2>
+                <p class="lead">And an even wittier subheading.</p>
+            </div>
+            <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;">
+            </div>
+        </div>
+        <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+            <div class="my-3 py-3">
+                <h2 class="display-5">Another headline</h2>
+                <p class="lead">And an even wittier subheading.</p>
+            </div>
+            <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;">
+            </div>
+        </div>
+    </div>
+
+    <footer class="container py-5">
+        <div class="row">
+            <div class="col-12 col-md">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
+                    stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img"
+                    viewBox="0 0 24 24">
+                    <title>Product</title>
+                    <circle cx="12" cy="12" r="10" />
+                    <path
+                        d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94" />
+                </svg>
+                <small class="d-block mb-3 text-muted">&copy; 2017-2020</small>
+            </div>
+            <div class="col-6 col-md">
+                <h5>Features</h5>
+                <ul class="list-unstyled text-small">
+                    <li><a class="link-secondary" href="#">Cool stuff</a></li>
+                    <li><a class="link-secondary" href="#">Random feature</a></li>
+                    <li><a class="link-secondary" href="#">Team feature</a></li>
+                    <li><a class="link-secondary" href="#">Stuff for developers</a></li>
+                    <li><a class="link-secondary" href="#">Another one</a></li>
+                    <li><a class="link-secondary" href="#">Last time</a></li>
+                </ul>
+            </div>
+            <div class="col-6 col-md">
+                <h5>Resources</h5>
+                <ul class="list-unstyled text-small">
+                    <li><a class="link-secondary" href="#">Resource name</a></li>
+                    <li><a class="link-secondary" href="#">Resource</a></li>
+                    <li><a class="link-secondary" href="#">Another resource</a></li>
+                    <li><a class="link-secondary" href="#">Final resource</a></li>
+                </ul>
+            </div>
+            <div class="col-6 col-md">
+                <h5>Resources</h5>
+                <ul class="list-unstyled text-small">
+                    <li><a class="link-secondary" href="#">Business</a></li>
+                    <li><a class="link-secondary" href="#">Education</a></li>
+                    <li><a class="link-secondary" href="#">Government</a></li>
+                    <li><a class="link-secondary" href="#">Gaming</a></li>
+                </ul>
+            </div>
+            <div class="col-6 col-md">
+                <h5>About</h5>
+                <ul class="list-unstyled text-small">
+                    <li><a class="link-secondary" href="#">Team</a></li>
+                    <li><a class="link-secondary" href="#">Locations</a></li>
+                    <li><a class="link-secondary" href="#">Privacy</a></li>
+                    <li><a class="link-secondary" href="#">Terms</a></li>
+                </ul>
+            </div>
+        </div>
+    </footer>
+
+
+    <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-DBjhmceckmzwrnMMrjI7BvG2FmRuxQVaTfFYHgfnrdfqMhxKt445b7j3KBQLolRl"
+        crossorigin="anonymous"></script>
+
+
+</body>
+
+</html>

snippets/B5-Snippets/templates/sign-in.html

@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
+    <meta name="generator" content="Hugo 0.72.0">
+    <title>Signin Template · Bootstrap</title>
+
+    <link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/sign-in/">
+
+
+
+    <!-- Bootstrap core CSS -->
+    <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
+
+    <!-- Favicons -->
+    <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+    <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+    <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+    <link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
+    <link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
+    <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
+    <meta name="theme-color" content="#7952b3">
+
+
+    <style>
+        .bd-placeholder-img {
+            font-size: 1.125rem;
+            text-anchor: middle;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
+
+        @media (min-width: 768px) {
+            .bd-placeholder-img-lg {
+                font-size: 3.5rem;
+            }
+        }
+    </style>
+
+
+    <!-- Custom styles for this template -->
+    <link href="signin.css" rel="stylesheet">
+</head>
+
+<body class="text-center">
+
+    <form class="form-signin">
+        <img class="mb-4" src="/docs/5.0/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
+        <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
+        <label for="inputEmail" class="sr-only">Email address</label>
+        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
+        <label for="inputPassword" class="sr-only">Password</label>
+        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
+        <div class="checkbox mb-3">
+            <label>
+                <input type="checkbox" value="remember-me"> Remember me
+            </label>
+        </div>
+        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
+        <p class="mt-5 mb-3 text-muted">&copy; 2017-2020</p>
+    </form>
+
+
+
+</body>
+
+</html>

snippets/B5-Snippets/templates/snippets/flex-utility.html

@@ -0,0 +1,141 @@
+<div class="d-${1|flex,inline-flex,sm-flex,sm-inline-flex,md-flex,md-inline-flex,lg-flex,lg-inline-flex,xl-flex,xl-inline-flex,xxl-flex,xxl-inline-flex|} ${2|row,row-reverse,column,column-reverse,sm-row,sm-row-reverse,sm-column,sm-column-reverse,md-row,md-row-reverse,md-column,md-column-reverse,lg-row,lg-row-reverse,lg-column,lg-column-reverse,xl-row,xl-row-reverse,xl-column,xl-column-reverse,xxl-row,xxl-row-reverse,xxl-column,xxl-column-reverse|} ${3|!spacing,!shadow,!color,!font|}">
+
+</div>
+
+
+This has x options:
+1. behavior
+2. direction
+3. justify content
+4. align-items
+5. 
+
+
+!flex-justify
+justify-content-${|start,end,center,between,around,evenly,sm-start,sm-end,sm-center,sm-between,sm-around,sm-evenly,md-start,md-end,md-center,md-between,md-around,md-evenly,lg-start,lg-end,lg-center,lg-between,lg-around,lg-evenly,xl-start,xl-end,xl-center,xl-between,xl-around,xl-evenly,xxl-start,xxl-end,xxl-center,xxl-between,xxl-around,xxl-evenly|}
+
+Options:
+- start,
+- end,
+- center,
+- between,
+- around,
+- evenly,
+- sm-start,
+- sm-end,
+- sm-center,
+- sm-between,
+- sm-around,
+- sm-evenly,
+- md-start,
+- md-end,
+- md-center,
+- md-between,
+- md-around,
+- md-evenly,
+- lg-start,
+- lg-end,
+- lg-center,
+- lg-between,
+- lg-around,
+- lg-evenly,
+- xl-start,
+- xl-end,
+- xl-center,
+- xl-between,
+- xl-around,
+- xl-evenly,
+- xxl-start,
+- xxl-end,
+- xxl-center,
+- xxl-between,
+- xxl-around,
+- xxl-evenly,
+
+
+!flex-align-item
+align-items-${1|start,end,center,baseline,stretch,sm-start,sm-end,sm-center,sm-baseline,sm-stretch,md-start,md-end,md-center,md-baseline,md-stretch,lg-start,lg-end,lg-center,lg-baseline,lg-stretch,xl-start,xl-end,xl-center,xl-baseline,xl-stretch,xxl-start,xxl-end,xxl-center,xxl-baseline,xxl-stretch|}
+
+Options: 
+- start,
+- end,
+- center,
+- baseline,
+- stretch,
+- sm-start,
+- sm-end,
+- sm-center,
+- sm-baseline,
+- sm-stretch,
+- md-start,
+- md-end,
+- md-center,
+- md-baseline,
+- md-stretch,
+- lg-start,
+- lg-end,
+- lg-center,
+- lg-baseline,
+- lg-stretch,
+- xl-start,
+- xl-end,
+- xl-center,
+- xl-baseline,
+- xl-stretch,
+- xxl-start,
+- xxl-end,
+- xxl-center,
+- xxl-baseline,
+- xxl-stretch,
+
+
+!flex-align-self
+align-self-${1|start,end,center,baseline,stretch,sm-start,sm-end,sm-center,sm-baseline,sm-stretch,md-start,md-end,md-center,md-baseline,md-stretch,lg-start,lg-end,lg-center,lg-baseline,lg-stretch,xl-start,xl-end,xl-center,xl-baseline,xl-stretch,xxl-start,xxl-end,xxl-center,xxl-baseline,xxl-stretch|}
+
+Options:
+
+- start,
+- end,
+- center,
+- baseline,
+- stretch,
+- sm-start,
+- sm-end,
+- sm-center,
+- sm-baseline,
+- sm-stretch,
+- md-start,
+- md-end,
+- md-center,
+- md-baseline,
+- md-stretch,
+- lg-start,
+- lg-end,
+- lg-center,
+- lg-baseline,
+- lg-stretch,
+- xl-start,
+- xl-end,
+- xl-center,
+- xl-baseline,
+- xl-stretch,
+- xxl-start,
+- xxl-end,
+- xxl-center,
+- xxl-baseline,
+- xxl-stretch,
+
+
+
+!flex-fill
+Description: 
+
+flex-${1|fill,sm-fill,md-fill,lg-fill,xl-fill,xxl-fill|}
+
+Options: 
+- fill
+- sm-fill
+- md-fill
+- lg-fill
+- xl-fill
+- xxl-fill

snippets/B5-Snippets/templates/snippets/flex-utility.md

@@ -0,0 +1,475 @@
+<!-- 
+Read the docs: \n https://deploy-preview-29017--twbs-bootstrap.netlify.app/docs/5.0/utilities/flex/
+
+
+-->
+
+
+
+
+
+
+<div class="d-${1|flex,inline-flex,sm-flex,sm-inline-flex,md-flex,md-inline-flex,lg-flex,lg-inline-flex,xl-flex,xl-inline-flex,xxl-flex,xxl-inline-flex|} ${2|row,row-reverse,column,column-reverse,sm-row,sm-row-reverse,sm-column,sm-column-reverse,md-row,md-row-reverse,md-column,md-column-reverse,lg-row,lg-row-reverse,lg-column,lg-column-reverse,xl-row,xl-row-reverse,xl-column,xl-column-reverse,xxl-row,xxl-row-reverse,xxl-column,xxl-column-reverse|} ">
+
+${3| ,!direction,!justify,!align|}
+<!-- ${|!spacing,!shadow,!color,!font,!flex,!direction,!justify,!align|} -->
+
+</div>
+
+
+This has x options:
+1. behavior
+2. direction
+3. justify content
+4. align-items,self,content
+5. 
+
+
+# Display 
+
+d-sm--flex 
+
+d${1|\b,-sm,-md,-lg,-xl,-xxl|}-${2|flex,inline-flex,none,block,inline,inline-block,table,table-cell,table-row|}
+
+${3| ,!direction,!justify,!align|}
+
+
+none
+inline
+inline-block
+block
+table
+table-cell
+table-row
+flex
+inline-flex
+
+
+# Justify Content
+
+`!justify`
+
+.justify-content-start
+.justify-content-end
+.justify-content-center
+.justify-content-between
+.justify-content-around
+.justify-content-evenly
+
+Description: change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column)
+
+Options: 
+
+justify-content${2|\b-,-sm-,-md-,-lg-,-xl-,-xxl-|}${3|start,end,center,baseline,stretch,around,between,evenly|}
+
+!flex-justify
+justify-content-${|start,end,center,between,around,evenly,sm-start,sm-end,sm-center,sm-between,sm-around,sm-evenly,md-start,md-end,md-center,md-between,md-around,md-evenly,lg-start,lg-end,lg-center,lg-between,lg-around,lg-evenly,xl-start,xl-end,xl-center,xl-between,xl-around,xl-evenly,xxl-start,xxl-end,xxl-center,xxl-between,xxl-around,xxl-evenly|}
+
+Options:
+- start,
+- end,
+- center,
+- between,
+- around,
+- evenly,
+- sm-start,
+- sm-end,
+- sm-center,
+- sm-between,
+- sm-around,
+- sm-evenly,
+- md-start,
+- md-end,
+- md-center,
+- md-between,
+- md-around,
+- md-evenly,
+- lg-start,
+- lg-end,
+- lg-center,
+- lg-between,
+- lg-around,
+- lg-evenly,
+- xl-start,
+- xl-end,
+- xl-center,
+- xl-between,
+- xl-around,
+- xl-evenly,
+- xxl-start,
+- xxl-end,
+- xxl-center,
+- xxl-between,
+- xxl-around,
+- xxl-evenly,
+
+
+!flex-align-item
+align-items-${1|start,end,center,baseline,stretch,sm-start,sm-end,sm-center,sm-baseline,sm-stretch,md-start,md-end,md-center,md-baseline,md-stretch,lg-start,lg-end,lg-center,lg-baseline,lg-stretch,xl-start,xl-end,xl-center,xl-baseline,xl-stretch,xxl-start,xxl-end,xxl-center,xxl-baseline,xxl-stretch|}
+
+Options: 
+- start,
+- end,
+- center,
+- baseline,
+- stretch,
+- sm-start,
+- sm-end,
+- sm-center,
+- sm-baseline,
+- sm-stretch,
+- md-start,
+- md-end,
+- md-center,
+- md-baseline,
+- md-stretch,
+- lg-start,
+- lg-end,
+- lg-center,
+- lg-baseline,
+- lg-stretch,
+- xl-start,
+- xl-end,
+- xl-center,
+- xl-baseline,
+- xl-stretch,
+- xxl-start,
+- xxl-end,
+- xxl-center,
+- xxl-baseline,
+- xxl-stretch,
+
+
+# !flex-align
+
+`!flex-align`
+
+align-self-sm-start
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Descriptions: 1. align-content: aligns items together on the CROSS axis (horizontal) \n  2. align-content: change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column) \n 3. align-self: change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column)
+
+Usage: align-${1|items,self,content|}-${2|\b,-sm,-sm,-md,-md,-lg,-lg,-xl,-xl,-xxl,-xxl|}-${3|start,end,center,baseline,stretch|}
+
+align-self-${1|start,end,center,baseline,stretch,sm-start,sm-end,sm-center,sm-baseline,sm-stretch,md-start,md-end,md-center,md-baseline,md-stretch,lg-start,lg-end,lg-center,lg-baseline,lg-stretch,xl-start,xl-end,xl-center,xl-baseline,xl-stretch,xxl-start,xxl-end,xxl-center,xxl-baseline,xxl-stretch|}
+
+Options:
+
+- start,
+- end,
+- center,
+- baseline,
+- stretch,
+  
+- sm-start,
+- sm-end,
+- sm-center,
+- sm-baseline,
+- sm-stretch,
+- md-start,
+- md-end,
+- md-center,
+- md-baseline,
+- md-stretch,
+- lg-start,
+- lg-end,
+- lg-center,
+- lg-baseline,
+- lg-stretch,
+- xl-start,
+- xl-end,
+- xl-center,
+- xl-baseline,
+- xl-stretch,
+- xxl-start,
+- xxl-end,
+- xxl-center,
+- xxl-baseline,
+- xxl-stretch,
+
+
+# Flex-fill
+`!fill`
+Description: use on sibling elements to force them into widths equal to their content
+
+Usage: flex-${1|fill,sm-fill,md-fill,lg-fill,xl-fill,xxl-fill|}
+
+
+
+Options: 
+- fill
+- sm-fill
+- md-fill
+- lg-fill
+- xl-fill
+- xxl-fill
+
+
+# Grow and shrink
+
+`!flex-grow-shrink`
+
+Description: utilities to toggle a flex item’s ability to grow to fill available space
+
+Usage: flex-${1|\b,-sm,-sm,-md,-md,-lg,-lg,-xl,-xl,-xxl,-xxl|}-${2|grow,shrink|}${3|0,1|}
+
+
+
+Options: 
+
+
+.flex${1|-,-sm,-md-,-lg-,-xl-,-xxl-|}{grow|shrink}-${3|0,1|}
+.flex-{grow|shrink}-1
+.flex-sm-{grow|shrink}-0
+.flex-sm-{grow|shrink}-1
+.flex-md-{grow|shrink}-0
+.flex-lg-{grow|shrink}-0
+.flex-xl-{grow|shrink}-0
+.flex-xl-{grow|shrink}-1
+.flex-xxl-{grow|shrink}-0
+.flex-xxl-{grow|shrink}-1
+
+
+
+# Wrap
+
+`!flex-wrap`
+
+Description: utilities to toggle a flex item’s ability to grow to fill available space.
+
+
+flex-${2|\b,sm-,md-,lg-,xl-,xxl-|}${3| ,wrap,nowrap,wrap-reverse, |}
+
+Options: 
+.flex-nowrap
+.flex-wrap
+.flex-wrap-reverse
+.flex-sm-nowrap
+.flex-sm-wrap
+.flex-sm-wrap-reverse
+.flex-md-nowrap
+.flex-md-wrap
+.flex-md-wrap-reverse
+.flex-lg-nowrap
+.flex-lg-wrap
+.flex-lg-wrap-reverse
+.flex-xl-nowrap
+.flex-xl-wrap
+.flex-xl-wrap-reverse
+.flex-xxl-nowrap
+.flex-xxl-wrap
+.flex-xxl-wrap-reverse
+
+
+
+
+# Order
+
+`!order`
+
+Description: Change the visual order of specific flex items with a handful of order utilities.
+
+
+
+order-${1|\b,sm-,md-,lg-,xl-,xxl-|}${2|1,2,3,4,5,first,last|}
+
+order-first
+
+Options: 
+
+.order-first
+.order-last
+.order-sm-first
+.order-sm-last
+.order-md-first
+.order-md-last
+.order-lg-first
+.order-lg-last
+.order-xl-first
+.order-xl-last
+.order-xxl-first
+.order-xxl-last
+
+
+.order-0
+.order-1
+.order-2
+.order-3
+.order-4
+.order-5
+.order-sm-0
+.order-sm-1
+.order-sm-2
+.order-sm-3
+.order-sm-4
+.order-sm-5
+.order-md-0
+.order-md-1
+.order-md-2
+.order-md-3
+.order-md-4
+.order-md-5
+.order-lg-0
+.order-lg-1
+.order-lg-2
+.order-lg-3
+.order-lg-4
+.order-lg-5
+.order-xl-0
+.order-xl-1
+.order-xl-2
+.order-xl-3
+.order-xl-4
+.order-xl-5
+.order-xxl-0
+.order-xxl-1
+.order-xxl-2
+.order-xxl-3
+.order-xxl-4
+.order-xxl-5
+
+
+
+# border
+
+`!border`
+
+
+Description:
+
+Options: 
+
+rounded rounded-sm
+
+
+# Round
+
+`!round`
+
+Description:
+
+Options: 
+
+rounded rounded-sm
+
+
+# align-content
+
+`!flex-align-content`
+
+Description:  align flex items together on the cross axis. Choose from start (browser default), end, center, between, around, or stretch
+
+align-content-${1|\b,sm-,md-,lg-,xl-,xxl-|}${2|start,end,center,around,stretch|}
+
+
+
+Options: 
+
+.align-content-start
+.align-content-end
+.align-content-center
+.align-content-around
+.align-content-stretch
+.align-content-sm-start
+.align-content-sm-end
+.align-content-sm-center
+.align-content-sm-around
+.align-content-sm-stretch
+.align-content-md-start
+.align-content-md-end
+.align-content-md-center
+.align-content-md-around
+.align-content-md-stretch
+.align-content-lg-start
+.align-content-lg-end
+.align-content-lg-center
+.align-content-lg-around
+.align-content-lg-stretch
+.align-content-xl-start
+.align-content-xl-end
+.align-content-xl-center
+.align-content-xl-around
+.align-content-xl-stretch
+.align-content-xxl-start
+.align-content-xxl-end
+.align-content-xxl-center
+.align-content-xxl-around
+.align-content-xxl-stretch
+
+# Flex Utility
+
+`!flex`
+
+Usage: 
+    d-${1|\b-,-sm-,-md-,-lg-,-xl-,-xxl-|}${2|flex,inline-flex|}
+
+Description: 
+    Create a flexbox container and transform direct children elements into flex items. \n\n Ends with an option to continue tabing out the direction utilities.
+
+Options: 
+
+.d-flex
+.d-inline-flex
+.d-sm-flex
+.d-sm-inline-flex
+.d-md-flex
+.d-md-inline-flex
+.d-lg-flex
+.d-lg-inline-flex
+.d-xl-flex
+.d-xl-inline-flex
+.d-xxl-flex
+.d-xxl-inline-flex
+
+
+
+
+# Direction
+
+`!direction`
+
+Usage:
+flex${1|\b-,-sm-,-md-,-lg-,-xl-,-xxl-|}${2|row-,row-reverse,column,column-reverse|}
+
+.flex-row
+.flex-row-reverse
+.flex-column
+.flex-column-reverse
+.flex-sm-row
+.flex-sm-row-reverse
+.flex-sm-column
+.flex-sm-column-reverse
+.flex-md-row
+.flex-md-row-reverse
+.flex-md-column
+.flex-md-column-reverse
+.flex-lg-row
+.flex-lg-row-reverse
+.flex-lg-column
+.flex-lg-column-reverse
+.flex-xl-row
+.flex-xl-row-reverse
+.flex-xl-column
+.flex-xl-column-reverse
+.flex-xxl-row
+.flex-xxl-row-reverse
+.flex-xxl-column
+.flex-xxl-column-reverse
+
+
+Description:
+
+Options: 
+

snippets/B5-Snippets/test.js

@@ -0,0 +1,28 @@
+var jsonConcat = require("json-concat");
+
+jsonConcat({
+    src: [
+        "snippets/types/utility.json",
+        "snippets/types/modal.json",
+        "snippets/types/navigation.json",
+        "snippets/types/carousel.json",
+        "snippets/types/grid.json",
+        "snippets/types/buttons.json",
+        "snippets/types/collapse.json",
+        "snippets/types/cards.json",
+        "snippets/types/pagination.json",
+        "snippets/types/breadcrumb.json",
+        "snippets/types/content.json",
+        "snippets/types/forms.json",
+        "snippets/types/list-group.json",
+        "snippets/types/progressbar.json",
+        "snippets/types/fonts.json",
+        "snippets/types/templates.json"
+    ],
+    dest: "snippets/bootstrap.json"
+}, function (json) {
+    console.log(json);
+});
+
+// "snippets/types/utility.json",
+// "snippets/types/templates.json"

snippets/B5-Snippets/tsconfig.json

@@ -0,0 +1,21 @@
+{
+	"compilerOptions": {
+		"module": "commonjs",
+		"target": "es6",
+		"outDir": "out",
+		"lib": [
+			"es6"
+		],
+		"sourceMap": true,
+		"rootDir": "src",
+		"strict": true   /* enable all strict type-checking options */
+		/* Additional Checks */
+		// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
+		// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
+		// "noUnusedParameters": true,  /* Report errors on unused parameters. */
+	},
+	"exclude": [
+		"node_modules",
+		".vscode-test"
+	]
+}

snippets/B5-Snippets/tslint.json

@@ -0,0 +1,15 @@
+{
+	"rules": {
+		"no-string-throw": true,
+		"no-unused-expression": true,
+		"no-duplicate-variable": true,
+		"curly": true,
+		"class-name": true,
+		"semicolon": [
+			true,
+			"always"
+		],
+		"triple-equals": true
+	},
+	"defaultSeverity": "warning"
+}

snippets/B5-Snippets/vsc-extension-quickstart.md

@@ -0,0 +1,41 @@
+# Welcome to your VS Code Extension
+
+## What's in the folder
+
+* This folder contains all of the files necessary for your extension.
+* `package.json` - this is the manifest file in which you declare your extension and command.
+  * The sample plugin registers a command and defines its title and command name. With this information VS Code can show the command in the command palette. It doesn’t yet need to load the plugin.
+* `src/extension.ts` - this is the main file where you will provide the implementation of your command.
+  * The file exports one function, `activate`, which is called the very first time your extension is activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`.
+  * We pass the function containing the implementation of the command as the second parameter to `registerCommand`.
+
+## Get up and running straight away
+
+* Press `F5` to open a new window with your extension loaded.
+* Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`.
+* Set breakpoints in your code inside `src/extension.ts` to debug your extension.
+* Find output from your extension in the debug console.
+
+## Make changes
+
+* You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`.
+* You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes.
+
+## Explore the API
+
+* You can open the full set of our API when you open the file `node_modules/vscode/vscode.d.ts`.
+
+## Run tests
+
+* Open the debug viewlet (`Ctrl+Shift+D` or `Cmd+Shift+D` on Mac) and from the launch configuration dropdown pick `Extension Tests`.
+* Press `F5` to run the tests in a new window with your extension loaded.
+* See the output of the test result in the debug console.
+* Make changes to `test/extension.test.ts` or create new test files inside the `test` folder.
+  * By convention, the test runner will only consider files matching the name pattern `**.test.ts`.
+  * You can create folders inside the `test` folder to structure your tests any way you want.
+
+## Go further
+
+ * Reduce the extension size and improve the startup time by [bundling your extension](https://code.visualstudio.com/api/working-with-extensions/testing-extension).
+ * [Publish your extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VSCode extension marketplace.
+ * Automate builds by setting up [Continuous Integration](https://code.visualstudio.com/api/working-with-extensions/continuous-integration).