ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Bootstrap 3 Snippets

by JasonMortonNZ ST2/ST3 Top 100

Twitter Bootstrap 3 Snippets Plugin for Sublime Text 2/3

Labels snippets

Details

Installs

  • Total 253K
  • Win 165K
  • OS X 49K
  • Linux 38K
Mar 23 Mar 22 Mar 21 Mar 20 Mar 19 Mar 18 Mar 17 Mar 16 Mar 15 Mar 14 Mar 13 Mar 12 Mar 11 Mar 10 Mar 9 Mar 8 Mar 7 Mar 6 Mar 5 Mar 4 Mar 3 Mar 2 Mar 1 Feb 28 Feb 27 Feb 26 Feb 25 Feb 24 Feb 23 Feb 22 Feb 21 Feb 20 Feb 19 Feb 18 Feb 17 Feb 16 Feb 15 Feb 14 Feb 13 Feb 12 Feb 11 Feb 10 Feb 9 Feb 8 Feb 7 Feb 6
Windows 170 242 216 249 151 178 193 230 321 271 226 172 194 209 227 230 265 238 150 175 204 228 285 240 301 156 173 173 225 210 238 227 153 143 198 215 238 208 220 126 132 181 235 197 227 190
OS X 19 29 24 21 22 26 30 28 41 36 37 16 28 25 35 37 33 39 31 26 31 37 38 35 33 27 36 29 31 44 26 26 22 23 25 40 30 39 27 24 20 30 38 33 30 32
Linux 18 27 32 40 30 27 29 35 34 45 31 23 35 46 27 37 35 40 24 35 37 33 43 41 39 26 28 22 33 47 43 46 22 30 30 44 44 32 57 30 29 44 43 37 38 35

Readme

Source
raw.​githubusercontent.​com

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.

  1. 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

  2. Clone the repository into your Sublime Text 2/3 packages directory. git clone https://github.com/JasonMortonNZ/bs3-sublime-plugin.git

  3. 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 “<” and “bs” in your Preferences.sublime-settings:

"auto_complete_triggers": [{"selector": "text.html", "characters": "<"},{"selector": "text.html", "characters": "bs3"}]

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.