Bootstrap 4 Support for Atom
Provides Bootstrap 4 classes and HTML tags with autocompletion features.
Install:
apm install atom-bootstrap4
Key Features:
- Supports autocompletion of all helper classes in JavaScript, CSS and HTML
- Snippet support for all components.
- Snippet support for templates.
- Snippet support for layout.
- Snippet support for content.
Screenshot :
Feel free to let me know what else you want added via:
- Twitter @de_gouville
- Slack @de_gouville
- Github Issues
Menu
- Templates
- Layout
- Content
- Components
Snippets
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 |