Bootstrap 5

This extension will solve the issue for you with a simple !h + TAB and your up and running with a full template Gif

Shortcuts / Commands

HTML Commands(Available for Angular and Twig too)

Command	Help Text
!h-index	Create a template base index for the application
!h-flexr	Creates an Container with Classes to position element flex and in rows
!h-flexc	Creates an Container with Classes to position element flex and in columns
!h-flexrowcen	Creates an Container with Classes to position element flex and in rows center
!h-gridc	Creates an gridcontainer
!h-brdesktop	Creates an br for desktop template
!h-brmobile	Creates an br for mobile template
!h-showmobile	Creates classes to show html element on mobile template
!h-showdesktop	Creates classes to show html element on desktop template
!h-nonbreakingHyphen	Creates Non breaking Hyphen template
!h-nonbreakingSpace	Creates Non breaking Space template
!h-div	Create an div html element
!h-ul	Create an ul html element
!h-head	Create an head html element
!h-body	Create an body html element
!h-form	Create an form html element
!h-header	Create an header html element
!h-footer	Create an footer html element
!h-bold	Create an bold html element
!h-anchor	Create an anchor html element
!h-paragraph	Create an paragraph html element
!h-hr	Create an hr html element
!h-article	Create an article html element

Angular HTML Commands

Command	Help Text
!h-innerHTML	Creates an Inner HTML Binding property template
!h-container	Creates an Page container
!h-ngfor	Creates an NgFor Directive template
!h-ngif	Creates an NgIf Directive template
!h-ngcontainer	Creates an NgContainer Directive template
!h-image	Creates an Picture component template
!h-image-jekyll	Creates an Image component template for jekyll
!h-pipe	PIPE allow to transform a value and rendered differently
!h-ngclass	ngclass allow to insert a class depends on condition result
!h-click	ngclick allow to insert a event from ts to execute some action

Forms && Navs

Command	Help Text
!h-nav	Default Navigation for Bootstrap
!h-navcenter	Create a center logo navbar
!h-navc	Class to Align Navigation Center
!h-navr	Class to Align Navigation Right
!h-navtab	Class to Use Tab Style Navigation
!h-navsticky	Default Sticky Navigation for Bootstrap
!h-navpill	Class to Use Pill Style Navigation
!h-navdd	Default Dropdown Navigation (Requires Jquery)
!h-navj	Class to Justify Navigation
!h-fg	Bootstrap Form Group parent element
!h-fc	Bootstrap Form Control
!h-form	Bootstrap form with input, select and textarea

SCSS

Command	Help Text
!h-torem	Convert px to REM in Desktop
!h-toremmobile	Convert px to REM in Mobile
!h-mediaquery	Media Query more than md dimensions with Mobile First
!h-mediaqueryrange	Media Query with range
!h-toremmobilereplace	Replace #px to REM in Mobile
!h-toremreplace	Replace #px to REM in Desktop
!h-&sibling-selectors	Pseudo class selectors with ampersands to simplify
!h-&psheudoudoclass	Siblings Selectors with ampersands to simplify coding
!h-tovw	Convert px to viewport width in Desktop
!h-tovh	Convert px to viewport height in Mobile
!h-toletterspacing	calculate Letter Spacing with font-size and ls pixels
!h-toletterspacingmobile	calculate Letter Spacing with font-size and ls pixels
!h-tb	banner animate from top
!h-bb	banner animate from bottom
!h-rb	banner animate from right
!h-lb	banner animate from left

Typescript

Command	Help Text
!h-document	Inject document in the constructor
!h-input	Declare Input
!h-router	Declare Router In Constructor
!h-querySelector	Query Selector
!h-scrollToPosition1	Declare Scroller in Constructor
!h-scrollToPosition2	Scroll to the position 0,0
!h-interface	Interface declaration
!h-settimeout	SetTimeOut Function
!h-console	Console Function Output
!h-routeobject	Route Object
!h-scrollToView	Scroll to the element position
!h-scrollToAnchor	Scroll to the element position
!h-click-toggle	Click Toggle Bootstrap Nav Bar
!h-ngif	Ng If directive validate condition
!h-routerNavigate	Navigate with Angular Router

Twig

Command	Help Text
!h-current-url	Access to the current url of the site routing
!h-show-variable	Show a variable from the content
!h-set-variable	Set a variable
!h-filter-variable	Filter a variable by different parameters
!h-dump-variable	Dump a variable from the content or defined
!h-if	If conditional statement to validate
!h-for	For statement to walk to arrays
!h-interpolation	Operator to access to variables in strings
!h-test-operators	Operator to know if an element is or not is
!h-ternary-operator	Conditional operator in a cleaner way
!h-not-null-operator	Show if an element it's not null
!h-spread-operator	Operator is be used to expand sequences or mappings

[1.1.7]

Updated README and CHANGELOG.

[1.1.6]

Fixed filter snippet.

[1.1.5]

Updated changelog and README and fixed filter snippet and updated extension name.

[1.1.4]

Fixed issue about file names.

[1.1.3]

Create different snippets for twig like the current url and operators and statements like if conditional and for cycle, also added html tags for twig, using bootstrap 5 too.

[1.1.2]

Create Ng If directive to validate condition, Navigate with Angular Router, Ng Class Directive and Click Event. And improve some snippets changing md to lg.

[1.1.1]

Fixed errors on PIPE snippet

[1.1.0]

Create new PIPE allow to transform a value and rendered differently without modify the original value Also for the banners banner animate from left,right,top,bottom

[1.0.9]

Create new Click Toggle Bootstrap Nav Bar automatically

[1.0.8]

Create new media query range, create toLetterSpacing and toLetterSpacingMobile and scrollToAnchor

[1.0.7]

Update media query snippet and add new img template for jekyll,new scrollToView

[1.0.6]

show mobile and desktop, toVH,toVW, non breaking Space and non breaking Hyphen

[1.0.5]

BR on mobile or mobile in desktop

[1.0.4]

Add Pseudo class selectors and Siblings Selectors with ampersand and fixed bugs on toREM and console.log()

[1.0.3]

Add container page,ngFor,ngIf,ngcontainer,picture component,inner binding

[1.0.2]

Add route,console,settimeout,toremreplace snippets

[1.0.1]

Add scss and ts snippets

[1.0.0]

Initial release of Mono Snippets 😍 🚀

Known Issues

No known issues so far.

Credits

@landresfernandezc

Mono Snippets

luisandresfernandez95