Bootstrap 3 - Sublime Plugin
A sublime plugin complete with Bootstrap 3 snippets
Feel free to let me know what else you want added via:
What's included - contents
Installation
There are 3 methods for installing this plugin.
Search for "Bootstrap 3 Snippets" via the "Package Control: Install Packages" menu.
Note: If you don't have Sublime Package Control installed, you can find out how to install it here https://sublime.wbond.net/installation
Clone the repository into your Sublime Text 2/3 packages directory.
`git clone https://github.com/JasonMortonNZ/bs3-sublime-plugin.git
Download the .zip file and unzip it into your Sublime Text 2/3 packages directory.
Note: You can find your Sublime Text 2/3 packages directory by going to Preferences > Browse Packages.
Usage
Start typing bs3
in html files and the autocomplete window opens. It matches fuzzily. So you can type bs3radio
to find the bs3-input:radio
snippet.
Be sure you have enabled "bs" in your Preferences.sublime-settings:
"auto_complete_triggers": [{"selector": "text.html", "characters": "bs3"}]
Note: If you experience any issues with a leading "<" please look at this issue thread for some potential solutions.
CDN
Component
Snippet code
CDN link (both CSS & JS)
bs3-cdn
CDN link (CSS only)
bs3-cdn:css
CDN link (JS only)
bs3-cdn:js
Local
Component
Snippet code
Link to local bootstrap files
bs3-local
Templates
Component
Snippet code
HTML5 Template Layout
bs3-template:html5
Forms
Component
Snippet code
Form
bs3-form
Inline Form
bs3-form:inline
Horizontal Form
bs3-form:horizontal
Tables
Component
Snippet code
Table
bs3-table
Bordered Table
bs3-table:bordered
Condensed Table
bs3-table:condensed
Hover Table
bs3-table:hover
Striped Table
bs3-table:striped
Input Fields (Form fields)
Note: you can add " :h " to the end of any input field snippet to make it compatible with Bootstrap 3 horizontal forms. E.g.
bs3-input:text:h
bs3-input:hidden:h
Component
Snippet code
Options
Label
bs3-input:label
Text Input
bs3-input:text
:h
Email Input
bs3-input:email
:h
Password Input
bs3-input:password
:h
Hidden Input
bs3-input:hidden
:h
Url Input
bs3-input:url
:h
Color Input
bs3-input:color
:h
Number Input
bs3-input:number
:h
Range Input
bs3-input:range
:h
Date Input
bs3-input:date
:h
Week Input
bs3-input:week
:h
Month Input
bs3-input:month
:h
Time Input
bs3-input:time
:h
Tel Input
bs3-input:tel
:h
Search Input
bs3-input:search
:h
Reset Input
bs3-input:reset
:h
Submit Input
bs3-input:submit
:h
Checkbox Input
bs3-input:checkbox
:h
Radio Box Input
bs3-input:radio
:h
Select Box
bs3-select
:h
Textarea
bs3-textarea
:h
Alerts
Component
Snippet code
Alert Box (Default)
bs3-alert
Danger Alert Box
bs3-alert:danger
Info Alert Box
bs3-alert:info
Success Alert Box
bs3-alert:success
Warning Alert Box
bs3-alert:warning
Badges
Component
Snippet code
Badge (Default)
bs3-badge
Breadcrumbs
Component
Snippet code
Breadcrumbs
bs3-breadcrumbs
Carousel
Component
Snippet code
Carousel
bs3-carousel
Buttons
Note: all button snippets below can have any of the following options append to the end of the snippet *.
:danger
:default
:disabled
:info
:primary
:success
:warning
An example:
bs3-button:success
bs3-large-button:disabled
bs3-block-button:warning
Component
Snippet code
Options
Button
bs3-button
*
Block Button
bs3-block-button
*
Mini Button
bs3-xs-button
*
Small Button
bs3-sm-button
*
Large Button
bs3-lg-button
*
Grid
Note: The bs3-col snippet can be used both on its own or with the addition of a colon followed by the number of columns required: E.g.
bs3-col
bs3-col:6
bs3-col:12
Component
Snippet code
Options
Column
bs3-col
:1-12
Row
bs3-row
Container
bs3-container
Icons
Component
Snippet code
Glyphicon
bs3-icon:glyphicon
Icon (Font Awesome)
bs3-icon
Images
Component
Snippet code
Thumbnail
bs3-thumbnail
Thumbnail with content
bs3-thumbnail:content
Labels
Component
Snippet code
Label
bs3-label
Danger Label
bs3-label:danger
Info Label
bs3-label:info
Success Label
bs3-label:success
Warning Label
bs3-label:warning
Pagination
Component
Snippet code
Pager
bs3-pager
Aligned Pager
bs3-pager:aligned
Pagination
bs3-pagination
Pagination:small
bs3-pagination:sm
Pagination:large
bs3-pagination:lg
Navigation
Component
Snippet code
Navbar (basic navbar)
bs3-navbar
Navbar Brand Element
bs3-navbar:brand
Navbar Button
bs3-navbar:button
Navbar Form
bs3-navbar:form
Navbar Link
bs3-navbar:link
Navbar Text
bs3-navbar:text
Navbar Fixed-Botton
bs3-navbar:fixed-bottom
Navbar Fixed-Top
bs3-navbar:fixed-top
Navbar Inverse
bs3-navbar:inverse
Navbar Responsive
bs3-navbar:responsive
Navbar Static-Top
bs3-navbar:static-top
Jumbotron
Component
Snippet code
Jumbotron (ex Hero Unit)
bs3-jumbotron
Panels
Component
Snippet code
Panel
bs3-panel
Panel (contextual)
bs3-panel:{warning,success,info,danger,primary}
Panel (with heading)
bs3-panel:heading
Panel (with footer)
bs3-panel:footer
List-groups
Component
Snippet code
List group
bs3-list-group
List group (with badges)
bs3-list-group:badges
List group (linked list)
bs3-list-group:linked
List group (with content)
bs3-list-group:content
Media Objects
Component
Snippet code
Media Object
bs3-media-object
Clearfix
Component
Snippet code
Clearfix
bs3-clearfix
Wells
Component
Snippet code
Well
bs3-well
Well (small)
bs3-well:sm
Well (large)
bs3-well:lg
Tabs
Component
Snippet code
Tabs pane
bs3-tabs
Input-groups
Component
Snippet code
Input group
bs3-input-group
Input group(addon & text-field)
bs3-input-group:addon:text
Input group (addon)
bs3-input-group-addon
Input group (button)
bs3-input-group-btn
Input group (text-field & btn)
bs3-input-group:text:btn
License
Bootstrap 3 - Sublime Plugin is open-sourced software licensed under the MIT license .