# Bootstrap 5
[](https://marketplace.visualstudio.com/items?itemName=HansUXdev.bootstrap5-snippets)
[](https://marketplace.visualstudio.com/items?itemName=HansUXdev.bootstrap5-snippets)
[](https://marketplace.visualstudio.com/items?itemName=HansUXdev.bootstrap5-snippets)
[](http://opensource.org/licenses/MIT) [](https://github.com/HansUXdev/B5-Snippets) [](https://github.com/HansUXdev)
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...
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/).
# 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.
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.
## 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/).
## 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/).
### 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.