Giter Club home page Giter Club logo

bootstrap5-snippets's Introduction

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 "bs5" 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 5 - HTML5 blank Templates

Basic html template with local assets links

bs5
bs5html_local

Basic html template with CDNs assets links

bs5html
bs5template 

Alerts

Dismissible Alert

bs5alert (primary style)
bs5alert_danger
bs5alert_dark
bs5alert_info
bs5alert_light
bs5alert_secondary
bs5alert_success
bs5alert_warning

Basic text Alert

bs5alertbasic (primary style)
bs5alertbasic_danger
bs5alertbasic_dark
bs5alertbasic_info
bs5alertbasic_light
bs5alertbasic_secondary
bs5alertbasic_success
bs5alertbasic_warning

Alert Box (with heading, paragraph and divider)

bs5alertbox (primary style)
bs5alertbox_danger
bs5alertbox_dark
bs5alertbox_info
bs5alertbox_light
bs5alertbox_secondary
bs5alertbox_success
bs5alertbox_warning

Badge

Basics

bs5badge (primary style)
bs5badge_danger
bs5badge_dark
bs5badge_info
bs5badge_light
bs5badge_secondary
bs5badge_success
bs5badge_warning

Pills Badges

bs5badgepill (primary style in pill)
bs5badgepill_danger
bs5badgepill_dark
bs5badgepill_info
bs5badgepill_light
bs5badgepill_secondary
bs5badgepill_success
bs5badgepill_warning

Links Badges

bs5badgelink (primary style in link)
bs5badgelink_danger
bs5badgelink_dark
bs5badgelink_info
bs5badgelink_light
bs5badgelink_secondary
bs5badgelink_success
bs5badgelink_warning

Breadcrumbs

bs5breadcrumbs 

Buttons

(TODO: inputs tags)

Link buttons

bs5abtn (primary)
bs5abtn_danger
bs5abtn_dark
bs5abtn_info
bs5abtn_light
bs5abtn_link
bs5abtn_secondary
bs5abtn_success
bs5abtn_warning

bs5abtnblock (primary)
bs5abtnblock_danger
bs5abtnblock_dark
bs5abtnblock_info
bs5abtnblock_light
bs5abtnblock_link
bs5abtnblock_secondary
bs5abtnblock_success
bs5abtnblock_warning

bs5abtnlg (primary)
bs5abtnlg_danger
bs5abtnlg_dark
bs5abtnlg_info
bs5abtnlg_light
bs5abtnlg_link
bs5abtnlg_secondary
bs5abtnlg_success
bs5abtnlg_warning

bs5abtnsm (primary)
bs5abtnsm_danger
bs5abtnsm_dark
bs5abtnsm_info
bs5abtnsm_light
bs5abtnsm_link
bs5abtnsm_secondary
bs5abtnsm_success
bs5abtnsm_warning
Outlined links buttons
bs5abtnol (primary)
bs5abtnol_danger
bs5abtnol_dark
bs5abtnol_info
bs5abtnol_light
bs5abtnol_link
bs5abtnol_secondary
bs5abtnol_success
bs5abtnol_warning

bs5abtnolblock (primary)
bs5abtnolblock_danger
bs5abtnolblock_dark
bs5abtnolblock_info
bs5abtnolblock_light
bs5abtnolblock_link
bs5abtnolblock_secondary
bs5abtnolblock_success
bs5abtnolblock_warning

bs5abtnollg (primary)
bs5abtnollg_danger
bs5abtnollg_dark
bs5abtnollg_info
bs5abtnollg_light
bs5abtnollg_link
bs5abtnollg_secondary
bs5abtnollg_success
bs5abtnollg_warning

bs5abtnolsm (primary)
bs5abtnolsm_danger
bs5abtnolsm_dark
bs5abtnolsm_info
bs5abtnolsm_light
bs5abtnolsm_link
bs5abtnolsm_secondary
bs5abtnolsm_success
bs5abtnolsm_warning

Buttons (button tag)

bs5btn (primary)
bs5btn_danger
bs5btn_dark
bs5btn_info
bs5btn_light
bs5btn_link
bs5btn_secondary
bs5btn_success
bs5btn_warning

bs5btnblock (primary)
bs5btnblock_danger
bs5btnblock_dark
bs5btnblock_info
bs5btnblock_light
bs5btnblock_link
bs5btnblock_secondary
bs5btnblock_success
bs5btnblock_warning

bs5btnlg (primary)
bs5btnlg_danger
bs5btnlg_dark
bs5btnlg_info
bs5btnlg_light
bs5btnlg_link
bs5btnlg_secondary
bs5btnlg_success
bs5btnlg_warning

bs5btnsm (primary)
bs5btnsm_danger
bs5btnsm_dark
bs5btnsm_info
bs5btnsm_light
bs5btnsm_link
bs5btnsm_secondary
bs5btnsm_success
bs5btnsm_warning
Outlined buttons (button tag)
bs5btnol (primary)
bs5btnol_danger
bs5btnol_dark
bs5btnol_info
bs5btnol_light
bs5btnol_link
bs5btnol_secondary
bs5btnol_success
bs5btnol_warning

bs5btnolblock (primary)
bs5btnolblock_danger
bs5btnolblock_dark
bs5btnolblock_info
bs5btnolblock_light
bs5btnolblock_link
bs5btnolblock_secondary
bs5btnolblock_success
bs5btnolblock_warning

bs5btnollg (primary)
bs5btnollg_danger
bs5btnollg_dark
bs5btnollg_info
bs5btnollg_light
bs5btnollg_link
bs5btnollg_secondary
bs5btnollg_success
bs5btnollg_warning

bs5btnolsm (primary)
bs5btnolsm_danger
bs5btnolsm_dark
bs5btnolsm_info
bs5btnolsm_light
bs5btnolsm_link
bs5btnolsm_secondary
bs5btnolsm_success
bs5btnolsm_warning

Button Groups

bs5btngroup
bs5btngroup_bar
bs5btngroup_nested
bs5btngroup_vertical
bs5btngrouplg
bs5btngroupsm

Cards

Single cards

bs5card
bs5cardfeatured
bs5cardfull
bs5cardimage
bs5cardimage_bottom
bs5cardimage_overlay
bs5cardpanel
bs5cardpanel_minimal
bs5cardquote

Cards layout

bs5cardgroup
bs5cardgroup_footer
bs5carddeck
bs5carddeck_footer
bs5cardcolumns

Carousel

bs5carousel (basic slider)
bs5carouselfull
bs5carouselwcaptions
bs5carouselwcontrols
bs5carouselwindicators
bs5carousel_fade
bs5carouselfull_fade
bs5carouselwcaptions_fade
bs5carouselwcontrols_fade
bs5carouselwindicators_fade

Collapse and Accordions

bs5collapse_btn
bs5collapse_link
bs5collapse_panel
bs5accordion
bs5accordion_minimal

CDN

bs5cdncss
bs5cdnjs

Embeds

bs5embed (default 1:1)
bs5embed_4x3
bs5embed_16x9
bs5embed-21x9

Figures

bs5figure

Forms

Form Controls

bs5formcontrol_input
bs5formcontrol_password
bs5formcontrol_email
bs5formcontrol_readonly
bs5formcontrol_select
bs5formcontrol_selectmultiple
bs5formcontrol_textarea
bs5formcontrol_file
bs5formcontrol_checkbox
bs5formcontrol_checkbox_group
bs5formcontrol_radio
bs5formcontrol_radio_group

Basic Forms

bs5form_contact
bs5form_login
bs5form_full 
bs5form_suscribe_inline

Images (simple, thumbnail and picture)

bs5image
bs5image_rounded
bs5image_circle
bs5imagethumbnail
bs5imagethumbnail_rounded
bs5imagethumbnail_circle
bs5image_picture

Jumbotron

bs5jumbotron
bs5jumbotron_fluid

List Groups

bs5listgroup
bs5listgroup_badges
bs5listgroup_content
bs5listgroup_links

Local

bs5localcss
bs5localjs

Media

bs5mediaobject

Modal

bs5modal
bs5modalbtn

Navs

bs5nav
bs5nav_center
bs5nav_right
bs5nav_vertical
bs5navlist
bs5navlist_center
bs5navlist_right
bs5navlist_vertical
bs5navpills
bs5navpills_center
bs5navpills_right
bs5navpills_vertical
bs5navpillslist
bs5navpillslist_center
bs5navpillslist_right
bs5navpillslist_vertical

Navigation

bs5navbar (full)
bs5navbar_basic
bs5navbar_centered

Pagination

bs5pagination (basic, left aligned)
bs5pagination_icons
bs5pagination_centered
bs5pagination_right

Tabs

bs5tabs
bs5tabs_vertical

Tables

bs5table (basic)
bs5table_bordered
bs5table_borderless
bs5table_dark
bs5table_responsive
bs5table_striped

Credits



If this project helps you to develop faster and nicer, please consider donating :)

Donate


License


MIT for this project.

Copyright (c) 2020 Jonathan Lee Released under the MIT license

bootstrap5-snippets's People

Contributors

jonodjlee avatar

Stargazers

Johanna Fagerås avatar

Watchers

James Cloos avatar  avatar

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.