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 305K
  • Win 206K
  • OS X 54K
  • Linux 45K
Jan 18 Jan 17 Jan 16 Jan 15 Jan 14 Jan 13 Jan 12 Jan 11 Jan 10 Jan 9 Jan 8 Jan 7 Jan 6 Jan 5 Jan 4 Jan 3 Jan 2 Jan 1 Dec 31 Dec 30 Dec 29 Dec 28 Dec 27 Dec 26 Dec 25 Dec 24 Dec 23 Dec 22 Dec 21 Dec 20 Dec 19 Dec 18 Dec 17 Dec 16 Dec 15 Dec 14 Dec 13 Dec 12 Dec 11 Dec 10 Dec 9 Dec 8 Dec 7 Dec 6 Dec 5 Dec 4
Windows 149 189 218 130 133 170 154 182 204 185 171 104 132 141 192 176 163 99 81 77 114 122 151 133 118 102 105 127 144 152 165 183 104 133 146 161 169 159 187 98 124 151 157 222 210 176
OS X 37 19 21 16 13 11 17 13 12 24 17 7 16 20 13 17 13 8 6 8 11 11 16 15 12 12 7 11 8 15 18 19 13 12 12 17 16 19 19 15 10 16 18 20 17 25
Linux 19 24 23 12 8 20 21 27 17 16 22 19 15 28 30 23 15 12 16 22 18 12 17 14 14 13 9 21 17 21 23 21 17 16 21 29 16 19 23 15 18 23 18 27 20 23

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