https://github.com/dimpu/vim-bs4-jsx-snippets
vim-bs4-jsx-snippets
https://github.com/dimpu/vim-bs4-jsx-snippets
Last synced: 5 months ago
JSON representation
vim-bs4-jsx-snippets
- Host: GitHub
- URL: https://github.com/dimpu/vim-bs4-jsx-snippets
- Owner: dimpu
- License: mit
- Created: 2018-01-21T09:19:10.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-22T05:37:08.000Z (over 8 years ago)
- Last Synced: 2025-09-10T00:24:44.928Z (10 months ago)
- Size: 339 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bootstrap 4 Snippets
HTML snippets for [Twitter Bootstrap 4](http://v4-alpha.getbootstrap.com) markup, for the Vim [UltiSnips](https://github.com/SirVer/ultisnips) and [snipMate](https://github.com/garbas/vim-snipmate).
## Installation
### Using [Vundle](https://github.com/VundleVim/Vundle.vim)
# add this line to your .vimrc
$ Plugin 'jvanja/vim-bs4-jsx-snippets'
### Using [Pathogen](https://github.com/tpope/vim-pathogen)
$ cd ~/.vim
$ mkdir bundle
$ cd bundle
# Install vim-bs4-jsx-snippets
$ git clone git://github.com/jvanja/vim-bs4-jsx-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.
```html
btn
```
which generates:
```html
```
See Trigger Glossary below for a full list of triggers.
* Templates
* [Basic](#templates)
* [Example](#templates)
* Layout
* [Grid](#grid)
* [Media](#media)
* [Responsive Utilities](#responsive-utilities)
* Content
* [Typography](#typography)
* [Tables](#tables)
* [Figures](#figures)
* Components
* [Buttons](#buttons)
* [Button group](#button-group)
* [Button dropdown](#button-dropdown)
* [Forms](#forms)
* [Input group](#input-group)
* [Dropdowns](#dropdowns)
* [Jumbotron](#jumbotron)
* [Label](#label)
* [Alerts](#alerts)
* [Card](#card)
* [Navs](#navs)
* [Navbar](#navbar)
* [Breadcrumb](#breadcrumb)
* [Pagination](#pagination)
* [Progress](#progress)
* [List group](#list-group)
* [Modal](#modal)
* [Scrollspy](#scrollspy)
* [Tooltips](#tooltips)
* [Popovers](#popovers)
* [Collapse](#collapse)
* [Carousel](#carousel)
* [Utilities](#utilities)
### 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](https://github.com/degouville/atom-bootstrap4) plugin.
## Bugs
Bootstrap 4 at the time this was created is still in alpha ( v4.0.0-alpha.2 ) so there could be
some breaking changes. Feel free to contribute.
---
[**Back to Top**](#bootstrap-4-snippets)