Bootstrap Snippets for Brackets

A collection of Bootstrap snippets for Brackets editor.

Install

Git Clone

1. Under main menu select Help > Show Extensions Folder
2. Git clone this repository inside the folder user.

Extension Manager

1. Under main menu select File > Extension Manager...
2. Search for "ACB Bootstrap snippets"
3. Click "Install"

How to use

1. Enable ACB Bootstrap Snippets Under main menu select Edit > Enable ACB Bootstrap Snippets
2. Starting typing "bs3" you'll see the snippets list (code hint provider), just pick a snippet and press ENTER, or
3. Enter a snippet and hit the Tab key (Alternatively you can also hit the key DOWN).

More extensions?

http://brackets.dnbard.com/author/Antonio%20Carlos%20Barbosa

Snippets list

Bootstrap 3 - Minimum Template

bs3
bs3template
bs3html 

Alerts

bs3alertdanger
bs3alertinfo 
bs3alertsuccess
bs3alertwarning
bs3alert

Badge

bs3badge

Breadcrumbs

bs3breadcrumbs

Buttons

bs3blockbuttondanger
bs3blockbuttondefault
bs3blockbuttondisabled
bs3blockbuttoninfo
bs3blockbuttonprimary
bs3blockbuttonsuccess
bs3blockbuttonwarning
bs3blockbutton
bs3buttondanger
bs3buttondefault
bs3buttondisabled
bs3buttongroupvertical
bs3buttongroup
bs3buttoninfo
bs3buttonprimary
bs3buttonsuccess
bs3buttontoolbar
bs3buttonwarning
bs3button
bs3lgbuttondanger
bs3lgbuttondisabled
bs3lgbuttoninfo
bs3lgbuttonprimary
bs3lgbuttonsuccess
bs3lgbuttonwarning
bs3lgbutton
bs3lgbuttondefault
bs3minibuttondanger
bs3minibuttondefault
bs3minibuttondisabled
bs3minibuttoninfo
bs3minibuttonprimary
bs3minibuttonsuccess
bs3minibuttonwarning
bs3minibutton
bs3smbuttondanger
bs3smbuttondefault
bs3smbuttondisabled
bs3smbuttoninfo
bs3smbuttonprimary
bs3smbuttonsuccess
bs3smbuttonwarning
bs3smbutton

Carousel

bs3carousel

// Sample Images 
//
// http://www.publicdomainpictures.net/

CDN

bs3cdn
bs3cdnanimatecss
bs3cdnanimationscss
bs3cdnanimationsjs
bs3cdnappearjs
bs3cdnbackbonejs
bs3cdncss
bs3cdncsvimportjs
bs3cdndatatablecss
bs3cdndatatablejs
bs3cdneasingjs
bs3cdnfancyboxcss
bs3cdnfancyboxjs
bs3cdnfontawesomecss
bs3cdnfoodcart
bs3cdnioniconscss
bs3cdnisotopejs
bs3cdnjasnycss
bs3cdnjasnyjs
bs3cdnjs
bs3cdnmodernizr
bs3cdnpagecurlcss
bs3cdnsmoothscrolljs
bs3cdnstylebluecss
bs3cdnstylegreencss
bs3cdnstyleredcss
bs3cdnstylesolidblackcss
bs3cdnstylesolidredcss
bs3cdnstyleyellowcss
bs3cdnvegascss
bs3cdnvegasjs
bs3cdnwowjs

Clearfix

bs3clearfix

Forms

bs3formhorizontal
bs3forminline
bs3formlabel
bs3form
bs3inputcheckbox
bs3inputcolorh
bs3inputcolor
bs3inputdateh
bs3inputdate
bs3inputemailh
bs3inputemail
bs3inputhidden
bs3inputlabel
bs3inputmonthh
bs3inputmonth
bs3inputnumberh
bs3inputnumber
bs3inputpasswordh
bs3inputpassword
bs3inputradio
bs3inputrangeh
bs3inputrange
bs3inputreseth
bs3inputreset
bs3inputsearchh
bs3inputsearch
bs3inputselecth
bs3inputselect
bs3inputsubmith
bs3inputsubmit
bs3inputtelh
bs3inputtel
bs3inputtexth
bs3inputtext
bs3inputtimeh
bs3inputtime
bs3inputurlh
bs3inputurl
bs3inputweekh
bs3inputweek
bs3selecth
bs3select
bs3textareah
bs3textarea

Grid System

bs3col1
bs3col10
bs3col11
bs3col12
bs3col2
bs3col3
bs3col4
bs3col5
bs3col6
bs3col7
bs3col8
bs3col9
bs3container
bs3rowcol
bs3row

Work with columns

bs3col3equal
bs3col3unequal
bs3col2equal
bs3col2nested
bs3colmobdesk
bs3colmobtabdesk
bs3clearfloats
bs3offsettingcol
bs3pushandpullcol

Icons

bs3iconglyphicon
bs3iconsample
bs3icon
bs3iconasterisk
bs3iconplus
bs3iconminus
bs3iconeuro
bs3iconcloud
bs3iconenvelope
bs3iconpencil
bs3iconglass
bs3iconmusic
bs3iconsearch
bs3iconheart
bs3iconstar
bs3iconstarempty
bs3iconuser
bs3iconfilm
bs3iconthlarge
bs3iconth
bs3iconthlist
bs3iconok
bs3iconremove
bs3iconzoomin
bs3iconzoomout
bs3iconoff
bs3iconsignal
bs3iconcog
bs3icontrash
bs3iconhome
bs3iconfile
bs3icontime
bs3iconroad
bs3icondownloadalt
bs3icondownload
bs3iconupload
bs3iconinbox
bs3iconplaycircle
bs3iconrepeat
bs3iconrefresh
bs3iconlistalt
bs3iconlock
bs3iconflag
bs3iconheadphones
bs3iconvolumeoff
bs3iconvolumedown
bs3iconvolumeup
bs3iconqrcode
bs3iconbarcode
bs3icontag
bs3icontags
bs3iconbook
bs3iconbookmark
bs3iconprint
bs3iconcamera
bs3iconfont
bs3iconbold
bs3iconitalic
bs3icontextheight
bs3icontextwidth
bs3iconalignleft
bs3iconaligncenter
bs3iconalignright
bs3iconalignjustify
bs3iconlist
bs3iconindentleft
bs3iconindentright
bs3iconfacetimevideo
bs3iconpicture
bs3iconmapmarker
bs3iconadjust
bs3icontint
bs3iconedit
bs3iconshare
bs3iconcheck
bs3iconmove
bs3iconstepbackward
bs3iconfastbackward
bs3iconbackward
bs3iconplay
bs3iconpause
bs3iconstop
bs3iconforward
bs3iconfastforward
bs3iconstepforward
bs3iconeject
bs3iconchevronleft
bs3iconchevronright
bs3iconplussign
bs3iconminussign
bs3iconremovesign
bs3iconoksign
bs3iconquestionsign
bs3iconinfosign
bs3iconscreenshot
bs3iconremovecircle
bs3iconokcircle
bs3iconbancircle
bs3iconarrowleft
bs3iconarrowright
bs3iconarrowup
bs3iconarrowdown
bs3iconsharealt
bs3iconresizefull
bs3iconresizesmall
bs3iconexclamationsign
bs3icongift
bs3iconleaf
bs3iconfire
bs3iconeyeopen
bs3iconeyeclose
bs3iconwarningsign
bs3iconplane
bs3iconcalendar
bs3iconrandom
bs3iconcomment
bs3iconmagnet
bs3iconchevronup
bs3iconchevrondown
bs3iconretweet
bs3iconshoppingcart
bs3iconfolderclose
bs3iconfolderopen
bs3iconresizevertical
bs3iconresizehorizontal
bs3iconhdd
bs3iconbullhorn
bs3iconbell
bs3iconcertificate
bs3iconthumbsup
bs3iconthumbsdown
bs3iconhandright
bs3iconhandleft
bs3iconhandup
bs3iconhanddown
bs3iconcirclearrowright
bs3iconcirclearrowleft
bs3iconcirclearrowup
bs3iconcirclearrowdown
bs3iconglobe
bs3iconwrench
bs3icontasks
bs3iconfilter
bs3iconbriefcase
bs3iconfullscreen
bs3icondashboard
bs3iconpaperclip
bs3iconheartempty
bs3iconlink
bs3iconphone
bs3iconpushpin
bs3iconusd
bs3icongbp
bs3iconsort
bs3iconsortbyalphabet
bs3iconsortbyalphabetalt
bs3iconsortbyorder
bs3iconsortbyorderalt
bs3iconsortbyattributes
bs3iconsortbyattributesalt
bs3iconunchecked
bs3iconexpand
bs3iconcollapsedown
bs3iconcollapseup
bs3iconlogin
bs3iconflash
bs3iconlogout
bs3iconnewwindow
bs3iconrecord
bs3iconsave
bs3iconopen
bs3iconsaved
bs3iconimport
bs3iconexport
bs3iconsend
bs3iconfloppydisk
bs3iconfloppysaved
bs3iconfloppyremove
bs3iconfloppysave
bs3iconfloppyopen
bs3iconcreditcard
bs3icontransfer
bs3iconcutlery
bs3iconheader
bs3iconcompressed
bs3iconearphone
bs3iconphonealt
bs3icontower
bs3iconstats
bs3iconsdvideo
bs3iconhdvideo
bs3iconsubtitles
bs3iconsoundstereo
bs3iconsounddolby
bs3iconsound51
bs3iconsound61
bs3iconsound71
bs3iconcopyrightmark
bs3iconregistrationmark
bs3iconclouddownload
bs3iconcloudupload
bs3icontreeconifer
bs3icontreedeciduous

Images

bs3image
bs3thumbnailcontent
bs3thumbnail
bs3imagerounded
bs3imagecircle
bs3imagethumbnail
bs3imageresponsive
bs3thumbnailgallerysample
bs3responsiveembed16by9
bs3responsiveembed4by3

Input Groups

bs3inputgroupaddontext
bs3inputgroupaddon
bs3inputgroupbtn
bs3inputgrouptextbtn
bs3inputgroup

Jumbotron

bs3jumbotron

Labels

bs3labeldanger
bs3labeldefault
bs3labelinfo
bs3labelsuccess
bs3labelwarning
bs3label

Link Buttons

bs3blocklinkbuttondanger
bs3blocklinkbuttondefault
bs3blocklinkbuttondisabled
bs3blocklinkbuttoninfo
bs3blocklinkbuttonprimary
bs3blocklinkbuttonsuccess
bs3blocklinkbuttonwarning
bs3blocklinkbutton
bs3lglinkbuttondanger
bs3lglinkbuttondefault
bs3lglinkbuttondisabled
bs3lglinkbuttoninfo
bs3lglinkbuttonprimary
bs3lglinkbuttonsuccess
bs3lglinkbuttonwarning
bs3lglinkbutton
bs3linkbuttondanger
bs3linkbuttondefault
bs3linkbuttondisabled
bs3linkbuttongroupvertical
bs3linkbuttongroup
bs3linkbuttoninfo
bs3linkbuttonprimary
bs3linkbuttonsuccess
bs3linkbuttonwarning
bs3linkbutton
bs3minilinkbuttondanger
bs3minilinkbuttondefault
bs3minilinkbuttondisabled
bs3minilinkbuttoninfo
bs3minilinkbuttonprimary
bs3minilinkbuttonsuccess
bs3minilinkbuttonwarning
bs3minilinkbutton
bs3smlinkbuttondanger
bs3smlinkbuttondefault
bs3smlinkbuttondisabled
bs3smlinkbuttoninfo
bs3smlinkbuttonprimary
bs3smlinkbuttonsuccess
bs3smlinkbuttonwarning
bs3smlinkbutton

List Groups

bs3listgroupbadges
bs3listgroupcontent
bs3listgrouplinked
bs3listgroup

Local

bs3local
bs3localcss
bs3localjs

Media

bs3mediaobject

Modal

bs3modal
bs3modalstruct

Navigation

snippets.bs3navbarbasic
snippets.bs3navbarbrand
snippets.bs3navbarfixedbottom
snippets.bs3navbarfixedtop
snippets.bs3navbarform
snippets.bs3navbarinverse
snippets.bs3navbarlink
snippets.bs3navbarlinks
snippets.bs3navbarresponsive
snippets.bs3navbarstatictop
snippets.bs3navbartext
snippets.bs3navbar

Page Header

snippets.bs3pageheader

Pagination

snippets.bs3pageraligned
snippets.bs3pager
snippets.bs3paginationlarge
snippets.bs3paginationsmall
snippets.bs3pagination

Panels

snippets.bs3paneldanger
snippets.bs3panelfooter
snippets.bs3panelheading
snippets.bs3panelinfo
snippets.bs3panelprimary
snippets.bs3panelsuccess
snippets.bs3paneltable
snippets.bs3panelwarning
snippets.bs3panel

Table

snippets.bs3table
snippets.bs3tablehover
snippets.bs3tablebordered
snippets.bs3tableborderedhover
snippets.bs3tablecondensed
snippets.bs3tablecondensedhover
snippets.bs3tableresponsive
snippets.bs3tableresponsivehover
snippets.bs3tablestriped
snippets.bs3tablestripedhover
snippets.bs3tablecontextual

Tabs

snippets.bs3tabs
snippets.tabhover

HTML5 Tamplate

snippets.html5template

Wells

snippets.bs3welllg
snippets.bs3wellsm
snippets.bs3well

Wireframe theme for Bootstrap 3 Support

snippets.bs3sketchcss
snippets.bs3sketchjs

Animated Portfolio Sample

bs3portfoliocss
bs3portfoliolibs
bs3portfoliojs
bs3portfoliomenu
bs3portfoliocarouseltext
bs3portfoliosocialbuttons
bs3portfolioservices
bs3portfoliopricetable
bs3portfoliowork
bs3portfolioteam
bs3portfoliocontact
bs3portfoliosignupform
bs3portfoliocopyright

Bootswatch Template Support

bs3bootswatchcerulean
bs3bootswatchcosmo
bs3bootswatchcustom
bs3bootswatchcyborg
bs3bootswatchdarkly
bs3bootswatchflatly
bs3bootswatchjournal
bs3bootswatchlumen
bs3bootswatchpaper
bs3bootswatchreadble
bs3bootswatchsandstone
bs3bootswatchsimplex
bs3bootswatchslate
bs3bootswatchspacelab
bs3bootswatchsuperhero
bs3bootswatchunited
bs3bootswatchyeti

Bootstrap 3 Media Queries - Mobile First Method

bs3mqfmdesktops
bs3mqfmextrasmalldevices
bs3mqfmiphoneretina
bs3mqfmlargedevices
bs3mqfmmediumdevices
bs3mqfmphones
bs3mqfmsmalldevices
bs3mqfmtablets
bs3mqfmwidescreen

Bootstrap 3 Media Queries - Non-Mobile First Method

bs3mqdesktops
bs3mqextrasmalldevices
bs3mqiphoneretina
bs3mqlargedevices
bs3mqmediumdevices
bs3mqphones
bs3mqsmalldevices
bs3mqtablets
bs3mqwidescreens

Jasny Bootstrap

Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.

Author: Arnold Daniels - [email protected] 
URL: http://www.jasny.net/
Project: https://github.com/jasny/bootstrap

Jasny CDN

bs3jsncdncss
bs3jsncdnjs

Bootstrap Minimum Jasny Templates

bs3jsnhtml
bs3jsnhtmlnavbar
bs3jsnhtmlnavbaroffcanvas

Container

Added .container-smooth a container to use the same max-width for all viewport sizes. This means that the container size won't jump at media query breakpoints. bs3jsncontainer

Buttons

Standard button with label

bs3jsnbtnleft

Standard button with label on the right side

bs3jsnbtnright

Success button with label

bs3jsnbtnsuccess

Danger button with label

bs3jsnbtndanger

Navmenu

Body padding required!! The fixed navmenu will overlay your other content, unless you add padding to the left or right of the . Try out your own values or use our snippet below. Tip: By default, the navmenu is 300px wide.

 @media (min-width: 992px) {
   body {
     padding-left: 300px;
  }
 }

Navmenu bs3 commands

Media Query

bs3jsnnavmenumediaquery

Navmenu

bs3jsnnavmenu

Navmenu - Fixed to left or right

Add either .navmenu-fixed-left or .navmenu-fixed-right.

bs3jsnnavmenufixedleft
bs3jsnnavmenufixedright
bs3jsnnavmenuoffcanvasreveal
bs3jsnnavmenuoffcanvaspush

Alerts

Fixed to top / bottom. Add .alert-fixed-top top stick the alert on top of your page. Use .alert-fixed-bottom for the bottom. bs3jsnalerttop bs3jsnalertbottom

bs3jsnalertdangertop
bs3jsnalertdangerbottom

bs3jsnalertwarningtop
bs3jsnalertwarningbottom

bs3jsnalertinfotop
bs3jsnalertinfobottom

bs3jsnalertsuccesstop
bs3jsnalertsuccessbottom

Table - ROWLINK

bs3jsntablerowlink

Data Entry Mask

bs3jsninputmask
bs3jsnfileselect
bs3jsnbtnfileselect
bs3jsnuploadimag

To get supplementary files and assets for Animated Portfolio Sample check Bootstrap Portfolio Project

Notes

** v0.0.14 - Now with 601 bs3 commands and Bootstrap 3 including media query default sizes and Jasny!!! (More info check bs-func.txt and snippet.js files)

Credits

• Bootstrap Framework - http://getboostrap.com
• jQuery JavaScript Library v1.11.1 - jQuery Foundation, Inc. and other contributors
• Portfolio Snippets based on http://www.designbootstrap.com themes.
• Snippets based on Bootstrap 3 Sublime Plugin - Thanks Jason Morton - Twitter @JasonMortonNZ
• Images provided by http://www.publicdomainpictures.net
• Animate.css - http://daneden.me/animate
• Animations v2.1, Copyright 2014, Joe Mottershaw, https://github.com/joemottershaw/
• Font Awesome 4.3.0 by @davegandy - http://fontawesome.io
• Ionicons, v2.0.0 - Created by Ben Sperry - http://ionicons.com/
• jQuery.appear - Michael Hixson and Alexander Brovikov - https://github.com/bas2k/jquery.appear/
• jQuery Easing v1.3 - Robert Penner- http://gsgd.co.uk/sandbox/jquery/easing/
• Isotope v1.5.25 - David DeSandro / Metafizzy - http://isotope.metafizzy.co
• WOW - v1.1.2 - Matthieu Aussaguel - http://mynameismatthieu.com/WOW/
• Source-code editor used in this project - Brackets - http://www.brackets.io
• Bootsketch - https://github.com/Yago/Bootsketch
• Bootswatch - Copyright 2014 Thomas Park - http://bootswatch.com/
• Jasny Bootstrap - Arnold Daniels - [email protected] - https://github.com/jasny/bootstrap

Thank you all!!!

License

MIT for this project.

Copyright (c) 2015 Antonio Carlos Barbosa Released under the MIT license