Bootstrap 4 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 "RCH Bootstrap snippets"
3. Click "Install"

How to use

1. Enable RCH Bootstrap Snippets
   Under main menu select Edit > Enable RCH Bootstrap Snippets
2. Start typing "bs4" and 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).

Snippets list

Bootstrap 4 - HTML5 blank Templates

Basic html template with local assets links

bs4
bs4htmllocal

Basic html template with CDNs assets links

bs4html
bs4template 

Alerts

bs4alertlink
bs4alertheading
bs4alertdismiss

Dismissible Alert

bs4alert (primary style)
bs4alert_danger
bs4alert_dark
bs4alert_info
bs4alert_light
bs4alert_secondary
bs4alert_success
bs4alert_warning

Basic text Alert

bs4alertbasic (primary style)
bs4alertbasic_danger
bs4alertbasic_dark
bs4alertbasic_info
bs4alertbasic_light
bs4alertbasic_secondary
bs4alertbasic_success
bs4alertbasic_warning

Alert Box (with heading, paragraph and divider)

bs4alertbox (primary style)
bs4alertbox_danger
bs4alertbox_dark
bs4alertbox_info
bs4alertbox_light
bs4alertbox_secondary
bs4alertbox_success
bs4alertbox_warning

Badge

Basics

bs4badge (primary style)
bs4badge_danger
bs4badge_dark
bs4badge_info
bs4badge_light
bs4badge_secondary
bs4badge_success
bs4badge_warning

Pills Badges

bs4badgepill (primary style in pill)
bs4badgepill_danger
bs4badgepill_dark
bs4badgepill_info
bs4badgepill_light
bs4badgepill_secondary
bs4badgepill_success
bs4badgepill_warning

Links Badges

bs4badgelink (primary style in link)
bs4badgelink_danger
bs4badgelink_dark
bs4badgelink_info
bs4badgelink_light
bs4badgelink_secondary
bs4badgelink_success
bs4badgelink_warning

Breadcrumbs

bs4breadcrumbs 

Buttons

(TODO: inputs tags)

Link buttons

bs4abtn (primary)
bs4abtn_danger
bs4abtn_dark
bs4abtn_info
bs4abtn_light
bs4abtn_link
bs4abtn_secondary
bs4abtn_success
bs4abtn_warning

bs4abtnblock (primary)
bs4abtnblock_danger
bs4abtnblock_dark
bs4abtnblock_info
bs4abtnblock_light
bs4abtnblock_link
bs4abtnblock_secondary
bs4abtnblock_success
bs4abtnblock_warning

bs4abtnlg (primary)
bs4abtnlg_danger
bs4abtnlg_dark
bs4abtnlg_info
bs4abtnlg_light
bs4abtnlg_link
bs4abtnlg_secondary
bs4abtnlg_success
bs4abtnlg_warning

bs4abtnsm (primary)
bs4abtnsm_danger
bs4abtnsm_dark
bs4abtnsm_info
bs4abtnsm_light
bs4abtnsm_link
bs4abtnsm_secondary
bs4abtnsm_success
bs4abtnsm_warning

Outlined links buttons

bs4abtnol (primary)
bs4abtnol_danger
bs4abtnol_dark
bs4abtnol_info
bs4abtnol_light
bs4abtnol_link
bs4abtnol_secondary
bs4abtnol_success
bs4abtnol_warning

bs4abtnolblock (primary)
bs4abtnolblock_danger
bs4abtnolblock_dark
bs4abtnolblock_info
bs4abtnolblock_light
bs4abtnolblock_link
bs4abtnolblock_secondary
bs4abtnolblock_success
bs4abtnolblock_warning

bs4abtnollg (primary)
bs4abtnollg_danger
bs4abtnollg_dark
bs4abtnollg_info
bs4abtnollg_light
bs4abtnollg_link
bs4abtnollg_secondary
bs4abtnollg_success
bs4abtnollg_warning

bs4abtnolsm (primary)
bs4abtnolsm_danger
bs4abtnolsm_dark
bs4abtnolsm_info
bs4abtnolsm_light
bs4abtnolsm_link
bs4abtnolsm_secondary
bs4abtnolsm_success
bs4abtnolsm_warning

Buttons (button tag)

bs4btn (primary)
bs4btn_danger
bs4btn_dark
bs4btn_info
bs4btn_light
bs4btn_link
bs4btn_secondary
bs4btn_success
bs4btn_warning

bs4btnblock (primary)
bs4btnblock_danger
bs4btnblock_dark
bs4btnblock_info
bs4btnblock_light
bs4btnblock_link
bs4btnblock_secondary
bs4btnblock_success
bs4btnblock_warning

bs4btnlg (primary)
bs4btnlg_danger
bs4btnlg_dark
bs4btnlg_info
bs4btnlg_light
bs4btnlg_link
bs4btnlg_secondary
bs4btnlg_success
bs4btnlg_warning

bs4btnsm (primary)
bs4btnsm_danger
bs4btnsm_dark
bs4btnsm_info
bs4btnsm_light
bs4btnsm_link
bs4btnsm_secondary
bs4btnsm_success
bs4btnsm_warning

Outlined buttons (button tag)

bs4btnol (primary)
bs4btnol_danger
bs4btnol_dark
bs4btnol_info
bs4btnol_light
bs4btnol_link
bs4btnol_secondary
bs4btnol_success
bs4btnol_warning

bs4btnolblock (primary)
bs4btnolblock_danger
bs4btnolblock_dark
bs4btnolblock_info
bs4btnolblock_light
bs4btnolblock_link
bs4btnolblock_secondary
bs4btnolblock_success
bs4btnolblock_warning

bs4btnollg (primary)
bs4btnollg_danger
bs4btnollg_dark
bs4btnollg_info
bs4btnollg_light
bs4btnollg_link
bs4btnollg_secondary
bs4btnollg_success
bs4btnollg_warning

bs4btnolsm (primary)
bs4btnolsm_danger
bs4btnolsm_dark
bs4btnolsm_info
bs4btnolsm_light
bs4btnolsm_link
bs4btnolsm_secondary
bs4btnolsm_success
bs4btnolsm_warning

Button Groups

bs4btngroup
bs4btngroup_bar
bs4btngroup_nested
bs4btngroup_vertical
bs4btngrouplg
bs4btngroupsm

Cards

Single cards

bs4card
bs4cardfeatured
bs4cardfull
bs4cardimage
bs4cardimagebottom
bs4cardimageoverlay
bs4cardpanel
bs4cardpanelminimal
bs4cardquote

Cards layout

bs4cardgroup
bs4cardgroupfooter
bs4carddeck
bs4carddeckfooter
bs4cardcolumns

Carousel

bs4carousel (basic slider)
bs4carouselfull
bs4carouselwcaptions
bs4carouselwcontrols
bs4carouselwindicators

Collapse and Accordions

bs4collapse
bs4collapsebtn
bs4accordion
bs4accordionminimal

CDN

bs4cdncss
bs4cdnjs

Embeds

bs4embed (default 1:1)
bs4embed_4x3
bs4embed_16x9
bs4embed-21x9

Figures

bs4figure

Forms

(TODO)

bs4formhorizontal
bs4forminline
bs4formlabel
bs4form
bs4inputcheckbox
bs4inputcolorh
bs4inputcolor
bs4inputdateh
bs4inputdate
bs4inputemailh
bs4inputemail
bs4inputhidden
bs4inputlabel
bs4inputmonthh
bs4inputmonth
bs4inputnumberh
bs4inputnumber
bs4inputpasswordh
bs4inputpassword
bs4inputradio
bs4inputrangeh
bs4inputrange
bs4inputreseth
bs4inputreset
bs4inputsearchh
bs4inputsearch
bs4inputselecth
bs4inputselect
bs4inputsubmith
bs4inputsubmit
bs4inputtelh
bs4inputtel
bs4inputtexth
bs4inputtext
bs4inputtimeh
bs4inputtime
bs4inputurlh
bs4inputurl
bs4inputweekh
bs4inputweek
bs4selecth
bs4select
bs4textareah
bs4textarea

Images

bs4image
bs4imagerounded
bs4imagecircle

Input Groups

(TODO)

bs4inputgroupaddontext
bs4inputgroupaddon
bs4inputgroupbtn
bs4inputgrouptextbtn
bs4inputgroup

Jumbotron

bs4jumbotron
bs4jumbotronfluid

List Groups

(TODO)

bs4listgroup
bs4listgroupbadges
bs4listgroupcontent
bs4listgrouplinks

Local

bs4localcss
bs4localjs

Media

(TODO)

bs4mediaobject

Modal

bs4modal
bs4modalbtn

Navs

bs4nav
bs4nav_center
bs4nav_right
bs4nav_vertical
bs4navlist
bs4navlist_center
bs4navlist_right
bs4navlist_vertical
bs4navpills
bs4navpills_center
bs4navpills_right
bs4navpills_vertical
bs4navpillslist
bs4navpillslist_center
bs4navpillslist_right
bs4navpillslist_vertical

Navigation

bs4navbar (full)
bs4navbarbasic
bs4navbarcentered

Pagination

bs4pagination (basic, left aligned)
bs4paginationicons
bs4paginationcenterd
bs4paginationright

Tabs

bs4tabs
bs4tabsvertical

Credits

---

• Bootstrap Framework - https://getbootstrap.com
• jQuery JavaScript Library v3.2.1 - jQuery Foundation, Inc. and other contributors
• Snippets based on Bootstrap 3 Sublime Plugin - Thanks Jason Morton - Twitter @JasonMortonNZ
• Snippets based on ACB Bootstrap Snippets Plugin - Thanks Antonio Carlos Barbosa
• Source-code editor used in this project - Brackets - https://www.brackets.io
• Badges in this screen are generated by the amazing project of Boris Kubiak https://github.com/brackets-extension-badges/badge-provider-nodejs

Thank you all!

---

If this project help you to develope faster and nicer, maybe you can invite me a cup of coffee :)

---

License

---

MIT for this project.

Copyright (c) 2017 Ricardo Javier Rodriguez Released under the MIT license