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 323K
  • Win 221K
  • OS X 56K
  • Linux 47K
May 21 May 20 May 19 May 18 May 17 May 16 May 15 May 14 May 13 May 12 May 11 May 10 May 9 May 8 May 7 May 6 May 5 May 4 May 3 May 2 May 1 Apr 30 Apr 29 Apr 28 Apr 27 Apr 26 Apr 25 Apr 24 Apr 23 Apr 22 Apr 21 Apr 20 Apr 19 Apr 18 Apr 17 Apr 16 Apr 15 Apr 14 Apr 13 Apr 12 Apr 11 Apr 10 Apr 9 Apr 8 Apr 7 Apr 6
Windows 147 114 120 151 199 181 189 166 102 116 147 171 171 186 118 89 135 123 203 160 99 130 99 116 132 160 150 205 161 107 117 185 210 159 168 169 115 114 152 177 200 193 168 134 161 161
OS X 10 7 11 4 10 13 9 13 9 5 7 12 13 16 4 7 9 12 15 11 11 13 9 9 22 14 12 9 8 9 8 14 6 12 7 20 10 11 10 19 16 13 10 15 19 6
Linux 16 15 8 18 18 22 17 18 11 7 25 10 21 27 18 16 13 15 23 18 16 20 14 10 21 11 21 17 17 8 11 14 24 19 22 19 11 12 27 13 25 22 20 8 10 20

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.