The first, (currently only) and hands down BEST bootstrap 5 snippet extension. Includes templates, powerful utility snippets, and much more.
- Templates one tab away
- Powerful utilities
- Font Awesome icons ! (currently 4.7, eventually 6.0)
- Much more hidden...
- Much more planned, so consider giving it a star on github or the marketplace, become a sponsor.
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...
This extension is built for open-vsx and published on the ONLY open source registry for VS Code extensions.
Learn more about open source versions of vscode such as vscodium, GitPod's IDE and more.
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.
- 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 and several others will be one tab away, so consider sponsoring this or giving it a star.
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 are just one tab away. Most of the official example templates 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... |
There are two way to use utilities.
- Class utilities, which use
!as a prefix. For example, if you want to add a utility class to an existing HTML element, inside ofclass=" "you would addclass="!spacing"then hit tab and fill out the options, the default will beclass="mx-auto"which sets margin to auto on left and right (x). - 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. |
!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/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 `{ |
b5-border |
change border attributes all border attributes. Read about the classes on the official bootstrap documentation. |
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. |
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 and flex classes. 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 |
| b5-col | Pretty much all your need covered and more. Ex: `col${1 |
| 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...
| 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... |
| Trigger | Description |
|---|---|
| b5-card | Basic Card |
| b5-card- | more in this category coming soon... |
| Trigger | Description |
|---|---|
| b5-modal | Basic modal |
| b5-modal- | more in this category coming soon... |
| Trigger | Description |
|---|---|
| b5-btn-reveal | Click a button and reveal some content. |
| b5-modal- | more in this category coming soon... |
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 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. |
Users appreciate release notes as you update your extension.
- Flex Utilities !
- added !round utility
- Added CTA Button - with options for call and email
- breadcrumb - fixed bug and added breadcrumb item
- border- fixed bug and added !round option
- [ ]
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.
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 | 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 | 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], [2]. |
| Name | Description |
|---|---|
| JavaScript-First | 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. |
| Foundation 6 Snippets | This will start as a snippets for sites and then be updated for. |
| Code Slides | A snippet extension for creating educational slides with vscode-reveal and a custom theme. (not public yet) |
| Foundation 6 Snippets | This will start as a snippets for sites and then be updated for.email. If sponsored, I will extend this to eventually replace the CLI and building blocks by implementing a custom feature that writes install kits in a similar way the web boilerplate writes an html, css, and js file. (not started yet) |
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. |