Giter Club home page Giter Club logo

rch-bootstrap-4-snippets's Introduction

Bootstrap 4 Snippets for Brackets

A collection of Bootstrap snippets for Brackets editor.

Donate

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
bs4html_local

Basic html template with CDNs assets links

bs4html
bs4template

Alerts

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
bs4cardimage_bottom
bs4cardimage_overlay
bs4cardpanel
bs4cardpanel_minimal
bs4cardquote

Cards layout

bs4cardgroup
bs4cardgroup_footer
bs4carddeck
bs4carddeck_footer
bs4cardcolumns

Carousel

bs4carousel (basic slider)
bs4carouselfull
bs4carouselwcaptions
bs4carouselwcontrols
bs4carouselwindicators
bs4carousel_fade
bs4carouselfull_fade
bs4carouselwcaptions_fade
bs4carouselwcontrols_fade
bs4carouselwindicators_fade

Collapse and Accordions

bs4collapse_btn
bs4collapse_link
bs4collapse_panel
bs4accordion
bs4accordion_minimal

CDN

bs4cdncss
bs4cdnjs

Embeds

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

Figures

bs4figure

Forms

Form Controls

bs4formcontrol_input
bs4formcontrol_password
bs4formcontrol_email
bs4formcontrol_readonly
bs4formcontrol_select
bs4formcontrol_selectmultiple
bs4formcontrol_textarea
bs4formcontrol_file
bs4formcontrol_checkbox
bs4formcontrol_checkbox_group
bs4formcontrol_radio
bs4formcontrol_radio_group

Basic Forms

bs4form_contact
bs4form_login
bs4form_full 
bs4form_suscribe_inline

Images (simple, thumbnail and picture)

bs4image
bs4image_rounded
bs4image_circle
bs4imagethumbnail
bs4imagethumbnail_rounded
bs4imagethumbnail_circle
bs4image_picture

Jumbotron

bs4jumbotron
bs4jumbotron_fluid

List Groups

bs4listgroup
bs4listgroup_badges
bs4listgroup_content
bs4listgroup_links

Local

bs4localcss
bs4localjs

Media

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)
bs4navbar_basic
bs4navbar_centered

Pagination

bs4pagination (basic, left aligned)
bs4pagination_icons
bs4pagination_centered
bs4pagination_right

Tabs

bs4tabs
bs4tabs_vertical

Tables

bs4table (basic)
bs4table_bordered
bs4table_borderless
bs4table_dark
bs4table_responsive
bs4table_striped

Credits

  • Bootstrap Framework - https://getbootstrap.com
  • jQuery JavaScript Library v3.3.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 K https://github.com/bokub/badges.ml

Thank you all!

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

Donate

License

MIT for this project.

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

rch-bootstrap-4-snippets's People

Contributors

bokub avatar micmladento avatar rjrodriguez avatar ta-riq avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar

Forkers

marcinkordacki webdevbooster ryaprak ta-riq avinash2 kant pldmk tamokjozef daniel-osei c4i9 micmladento gabrielaihara vicio00 rubenvieira brackets-io

rch-bootstrap-4-snippets's Issues

some snippets are not working

Hello ...
first I would like to thank you for this extension it is really fantastic.

my problem is when I start typing "bs4" the snippets list pops and for example I continue typing "bs4navbar" I will have 3 snippets to choose from ("bs4navbar", "bs4navbar_basic", "bs4navbar_centered")
and then when I choose "bs4navbar_basic" the snippet doesn't work ! but when I choose the first one ("bs4navbar") it work perfectly with no problem 😄 .

I've tried to type "bs4navbar_basic" and the TAB what happens that it will converted to a tag like this :
<bs4navbar_basic></bs4navbar_basic>

(also tried to press ctrl + space and then choose it, but it didn't work )

thank you so much again for this great extension you made 😃 .

snippet not working in brackets

when i write bs4 and press tab it produces nothing the option in brackets is also enabled from edit -> enable RCH Bootstrap snippet but works well with down key

not working?

Hello. I was wondering if you can help. I first installed it on Brackets the regular way, then when it didn't work, I installed it from your zipped file here. It is only giving me the buttons and nothing else. Not the carousel, not the cards.. nothing else. Can you help?
I must say it is a great extension but I just wish it works.
Thank you for your efforts. :)

Not work

Im using Brackets 1.14(1.14.2-17770), extension not work. :(

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.