Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets installs statistics

Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets for Visual studio code

Visual studio code plugin containing Bootstrap 4, Font awesome 4 & Font Awesome 5 Free & Pro snippets. This plugin works in both in the stable & the insiders build

The detailed list of supported template triggers are listed below

Feel free to let me know what else you want added via the issues

Suggestions, feedback and other comments welcome via @1tontech on Twitter.

Installation (in 2 easy steps)

1. Install plugin
2. Press F1, paste ext install bootstrap4-vscode & then press enter (or)
3. Goto extensions by pressing Ctrl-Shift-X (Windows/Linux) or Cmd-Shift-X (Mac) & Search for Bootstrap 4, click on install
4. Reload your editor

You are good to go

Usage

To use the bootstrap snippets, open a HTML file, and start typing b4-, followed by pressing Ctrl+Space. A list of bootstrap snippets will show up

To use font awesome 4 snippets, open a HTML file, and start typing fa4-, the editor will show you all the snippets

To use font awesome 5 free snippets, open a HTML file, and start typing fa5-, the editor will show you all the snippets

To use font awesome 5 pro snippets, open a HTML file, and start typing fa5p-, the editor will show you all the snippets

The detailed list of supported actions are listed below under documentation section

Here are the conventions that will make it easy to lookup templates

If a template trigger starts with @ variation, this snippet targets the attribute of an html element in your markup. Think of @ as html attribute

Mind map

@ => Targets html attribute

Contribution guidelines

1. Clone this repo
2. To modify bootstrap templates, you can find the templates for each snippet under ../snippets/bootstrap. These html templates must follow sublime text snippet format.
3. To modify font awesome snippets, you would need to modify font-awesome*-icons*.yml under ../snippets
4. If you need to change README.md (or) package.json, you should modify their templates (which are used to generate the actual files) under src/util/resources. For eg., If you want package.json within plugin to be modified, you should change package-template.json under src/util/resources. A new package.json & README.md are regenerated for every build from their corresponding templates.
5. Send me a pull request

Changelog

See here

Documentation

Here are available live templates

Bootstrap 4 snippets

Bootstrap master template

Trigger	Description
b4-$	Bootstrap master template

Alert

Trigger	Description
b4-alert-additional-content	Alert additional content
b4-alert-closable	Alert closable
b4-alert-default	Alert default
b4-alert-dismissible	Alert dismissible
b4-alert-link	Alert link

Badge

Trigger	Description
b4-badge-button	Badge button
b4-badge-default	Badge default
b4-badge-heading	Badge heading
b4-badge-link	Badge link
b4-badge-pill	Badge pill

Bgroup

Trigger	Description
b4-bgroup-default	Bgroup default
b4-bgroup-dropdown-vertical	Bgroup dropdown vertical
b4-bgroup-dropdown	Bgroup dropdown
b4-bgroup-size	Bgroup size
b4-bgroup-toolbar	Bgroup toolbar

Breadcrumb

Trigger	Description
b4-breadcrumb-default	Breadcrumb default
b4-breadcrumb-list	Breadcrumb list

Button

Trigger	Description
b4-button-a	Button a
b4-button-block	Button block
b4-button-checkbox	Button checkbox
b4-button-default	Button default
b4-button-disabled-a	Button disabled a
b4-button-input	Button input
b4-button-outline	Button outline
b4-button-radio	Button radio
b4-button-sizes	Button sizes
b4-button-toggle	Button toggle

Card

Trigger	Description
b4-card-align	Card align
b4-card-background-custom	Card background custom
b4-card-background	Card background
b4-card-blockquote	Card blockquote
b4-card-border	Card border
b4-card-columns	Card columns
b4-card-decks	Card decks
b4-card-default	Card default
b4-card-grid	Card grid
b4-card-groups	Card groups
b4-card-head-foot	Card head foot
b4-card-links	Card links
b4-card-list	Card list
b4-card-overlay	Card overlay
b4-card-pill-head	Card pill head
b4-card-subtitle	Card subtitle
b4-card-tab-head	Card tab head

Carousel

Trigger	Description
b4-carousel-caption	Carousel caption
b4-carousel-default	Carousel default

Collapse

Trigger	Description
b4-collapse-accordion	Collapse accordion
b4-collapse-button	Collapse button
b4-collapse-default	Collapse default

Dropdown

Trigger	Description
b4-dropdown-alignment	Dropdown alignment
b4-dropdown-anchor	Dropdown anchor
b4-dropdown-button	Dropdown button
b4-dropdown-colored	Dropdown colored
b4-dropdown-default	Dropdown default
b4-dropdown-sized	Dropdown sized
b4-dropdown-split	Dropdown split
b4-dropdown-up-split	Dropdown up split
b4-dropdown-up	Dropdown up

Form…