Bootstrap 5

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 or the marketplace, become a sponsor.

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

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.

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.5 - 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.

Powerful, Simple, Flex Snippets

Center, position or reorder any element, by any default breakpoint with under 10 snippets.

Templates/Layout

Templates are just one tab away. Most of the official example templates have been implmented.

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.

Powerful, Simple, Flex Snippets

Center, position or reorder any element, by any default breakpoint with under 10 snippets.

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 and flex classes. If you have any thoughts or suggestions, let me know on github.

Navbar

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

Cards

modal

Collapse

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 which will replace about 5-10 of the most popular extensions add and add things like optional chaining among other methods.

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.

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

Future Snippets & Extensions

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.