MySpamKit/vim-bootstrap4-snippets

Bootstrap 4 markup snippets for Vim

Bootstrap 4 Snippets

HTML snippets for Twitter Bootstrap 4 markup, for the Vim UltiSnips and snipMate.

Installation

Using Vundle

# add this line to your .vimrc
$ Plugin 'jvanja/vim-bootstrap4-snippets'

Using Pathogen

$ cd ~/.vim
$ mkdir bundle
$ cd bundle

# Install vim-bootstrap4-snippets
$ git clone git://github.com/jvanja/vim-bootstrap4-snippets.git

Usage

In an html file, type a trigger name in Insert mode, and press your snippet trigger key to expand it into HTML markup.

btn

which generates:

<button type="button" class="btn btn-primary"></button>

See Trigger Glossary below for a full list of triggers.

Menu

• Templates
  • Basic
  • Example
• Layout
  • Grid
  • Media
  • Responsive Utilities
• Content
  • Typography
  • Tables
  • Figures
• Components
  • Buttons
  • Button group
  • Button dropdown
  • Forms
  • Input group
  • Dropdowns
  • Jumbotron
  • Label
  • Alerts
  • Card
  • Navs
  • Navbar
  • Breadcrumb
  • Pagination
  • Progress
  • List group
  • Modal
  • Scrollspy
  • Tooltips
  • Popovers
  • Collapse
  • Carousel
  • Utilities

Trigger Glossary

Templates

Snippets	Descriptions
cdnb4	Generates a CSS & JS from CDN
htmlb4	Generates a Basic HTML Template
htmlbl	Generates a Blog Template
htmlca	Generates a Carousel Template
htmlco	Generates a Cover Template
htmlda	Generates a Dashboard Template
htmlgd	Generates a Grids Template
htmljb	Generates a Jumbotron Template
htmlnb	Generates a Navbar Template
htmlnbfx	Generates a Fixed Navbar Template
htmlnbj	Generates a Justified nav Template
htmlnbst	Generates a Static top Navbar Templat
htmlsf	Generates a Sticky footer Template
htmlsfn	Generates a Sticky footer w/ navbar T
htmlsi	Generates a Sign-in Template
htmlst	Generates a Starter Template

Layout

Grid

Snippets	Descriptions
con	Generates a container
conf	Generates a fluid container
row	Generates a row
grid	Generates a grid
col	Generates a column
col-xs	Generates a extra small column
col-sm	Generates a small column
col-md	Generates a medium column
col-lg	Generates a large column
col-xl	Generates a extra large column
colcf	Generates a Clearfix for Grid system
3col	Generates a 3 Columns Grid
2col	Generates a 2 Columns Grid
4col	Generates a 4 Columns Grid
6col	Generates a 6 Columns Grid
12col	Generates a 12 Columns Grid
2colr	Generates a Responsive 3 Columns Grid
3colr	Generates a Responsive 2 Columns Grid
4colr	Generates a Responsive 4 Columns Grid
6colr	Generates a Responsive 6 Columns Grid
12colr	Generates a Responsive 12 Columns Gri

Media

Snippets	Descriptions
med	Generates a Media
medr	Generates a Media right
medm	Generates a Media middle
medb	Generates a Media bottom
medl	Generates a Media List

Responsive Utilities

Snippets	Descriptions
colh	Generates a Responsive hidden classes
colvp	Generates a Responsive visible print
colhp	Generates a Responsive hidden print c

Content

Typography

Snippets	Descriptions
texm	Generates a Text Muted
dih	Generates a Display Heading
lead	Generates a Lead
blo	Generates a Blockquotes
blor	Generates a Blockquotes Reverse
lisun	Generates a List Unstyled
lisin	Generates a List Inline
desho	Generates a Horizontal Description
imgr	Generates a Responsive Image -
imgro	Generates an Image Rounded -
imgci	Generates an Image Circle -
imgth	Generates an Image Thumbnail -
imgl	Generates an Image Left -
imgr	Generates an Image Right -
imgce	Generates an Image Center -

Tables

Snippets	Descriptions
tab	Generates a Table
tabs	Generates a Tables (full option)
tabhin	Generates a Tables Head Inverse
tabr	Generates a Tables Responsive
tdcs	Generates a Tables Colspan
tabtrc	Generates a Tables Colors (tr)
tabtdc	Generates a Tables Colors (td)

Figures

Snippets	Descriptions
figooo	Figure

Components

Buttons

Snippets	Descriptions
btn	Generates a Button
btnc	Generates a Button colors
btno	Generates a Button Outline
btna	Generates a Button < a >
btni	Generates a Button < input >
btnsz	Generates a Button sizes
btnbk	Generates a Button block
btnast	Generates a Button state < a>
btnst	Generates a Button state
btnt	Generates a Button toggle
btnpr	Generates a Button plugin Radio

Button group

Snippets	Descriptions
btngr	Generates a Button group
btntlb	Generates a Button toolbar
btngrsi	Generates a Button group size
btndr	Generates a Button dropdown
btngrvr	Generates a Button group

Button dropdown

Snippets	Descriptions
btndd	Generates a Button dropdown
btndu	Generates a Button dropup

Forms

Snippets	Descriptions
form	Generates a Form Controls
formgr	Generates a Form group
formin	Generates a Form inline
formhl	Generates a Form hidden label
formgrid	Generates a Form w/ Grid
formcb	Generates a Form Checkbox
formcbin	Generates a Form Checkbox inline
formra	Generates a Form Radio
formrain	Generates a Form Radio inline
formrawola	Generates a Form Radio w/o label
formsc	Generates a Form Static Controls
formdis	Generates a Form disabled state
formreo	Generates a Form Readonly
formiptsz	Generates a Form input sizing
formsltsz	Generates a Form select sizing
formcolsz	Generates a Form column sizing
formht	Generates a Form Help text
formval	Generates a Form Validation
formctmcb	Generates a Form Custom checkbox
formctmra	Generates a Form Custom radio

Input group

Snippets	Descriptions
iptg	Generates an Input Group
iptgsz	Generates an Input Group Sizing
iptbtnadd	Generates a Buttons addons
iptbtnwdd	Generates a Buttons w/ dropdowns
iptbtnseg	Generates a Segmented buttons

Dropdowns

Snippets	Descriptions
drp	Generates a Dropdown
drpagm	Generates a Dropdown Alignement
drpmh	Generates a Dropdown menu header

Jumbotron

Snippets	Descriptions
jum	Generates a Jumbotron
jumf	Generates a Fluid Jumbotron

Label

Snippets	Descriptions
lab	Generates a Label
labco	Generates a Label context
labpi	Generates a Label pill

Alerts

Snippets	Descriptions
alesu	Generates an Alert success
alein	Generates an Alert info
alewa	Generates an Alert warning
aleda	Generates an Alert danger
aledis	Generates an Alert dismissing

Card

Snippets	Descriptions
car	Generates a Cards
carct	Generates a Cards content type
carsz	Generates a Cards sizing
carta	Generates a Cards Text alignment
caric	Generates a Cards image caps
cario	Generates a Cards image overlays
carit	Generates a Cards inverted text
cargr	Generates a Cards groups
cardk	Generates a Cards decks
carcol	Generates a Cards columns
cargr	Generates a Cards groups
cargr	Generates a Cards groups

Navs

Snippets	Descriptions
nav	Generates a Nav
navin	Generates a Nav inline
navtb	Generates a Nav tabs
navpl	Generates a Nav pills
navplsk	Generates a Nav pills stacked
navtbdd	Generates a Nav tabs w/ dropdown

Navbar

Snippets	Descriptions
nvb	Generates a Navbar
nvbc	Generates a Navbar color
nvbconout	Generates a Navbar container out
nvbconin	Generates a Navbar container in
nvbft	Generates a Navbar fixed top
nvbfb	Generates a Navbar fixed bottom
nvbclp	Generates a Navbar collapse
nvbtg	Generates a Navbar toggler
nvb	Generates a Navbar

Breadcrumb

Snippets	Descriptions
bre	Generates a Breadcrumb

Pagination

Snippets	Descriptions
pag	Generates a Pagination
pagsz	Generates a Pagination
pager	Generates a Pagination pager

Progress

Snippets	Descriptions
pro	Generates a Progress
proco	Generates a Progress context
procost	Generates a Progress striped
prostan	Generates a Progress

List group

Snippets	Descriptions
lis	Generates a List
lisla	Generates a List label
lisli	Generates a List linked
lisbtn	Generates a List button
lisdis	Generates a List disabled items
lisco	Generates a List context
liscc	Generates a List custom content

Modal

Snippets	Descriptions
mod	Generates a Modal
modsz	Generates a Modal sizes
modgr	Generates a Modal grid
modcb	Generates a Modal content based

Scrollspy

Snippets	Descriptions
scr	Generates a Scrollspy

Tooltips

Snippets	Descriptions
too	Generates a Tooltipc

Popovers

Snippets	Descriptions
pop	Generates a Popover
popdi	Generates a Popover direction

Collapse

Snippets	Descriptions
coll	Generates a Collapse
colla	Generates a Collapse accordion

Carousel

Snippets	Descriptions
caro	Generates a Carousel
caroca	Generates a Carousel caption

Utilities

Snippets	Descriptions
texta	Generates a Text alignment
textt	Generates a Text transform
textcol	Generates a Text context colors
cloi	Generates a Close icon
cenb	Generates a Center block
cle	Generates a Clearfix
hid	Generates a Hidden content
inv	Generates an Invisible content
sro	Generates a Screen reader
imgre	Generates an Image replacement
emb	Generates a Responsive embeds

Credits

These snippets are Vim rewrite of the Atom Bootstrap 4 plugin.

Bugs

Feel free to contribute.

---

Back to Top