bs4code

Adnan Ayoub

|
5,032 installs
|
5,349 downloads
| (1) | Free
Boilerplate of bootstrap 4 ready in a moment
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Bootstrap 4 with CDN Boilerplate

This extension will solve the issue for you with a simple !bscdn

Features

Bootstrap 4 readymade HTML with CSS

Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

  • Include Bootstrap's HTML codes
  • By type a shortcutCode and get a HTML & CSS code.

Shortcuts / Commands

Code Description for shortcut code
!bscdn Creates an Bootstrap 4 starter template. With Jquery, popper.js and Font-Awesome 5
!bsnav Default Navigation for Bootstrap 4
!bsnavc Class to Align Navigation Center
!bsnavr Class to Align Navigation Right
!bsf Bootstrap Form
!bsfc Bootstrap Form Control
!bscard Bootstrap 4 Card
!bscardhf Bootstrap 4 Card with Header & Footer
!bscardc Bootstrap 4 Card Align Center
!bsls Bootstrap List
!bslslb Bootstrap List with Links and Buttons
!bsalert Bootstrap basic Alert
!bsaldanger Alert with red background and foreground color
!bsalertdis Alert - to dismiss any alert inline
!bsalerthp Alerts can also contain additional HTML elements like headings, paragraphs and dividers
!bsj Jumbotron: A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
!bsm Dialogs to your site for lightboxes, user notifications, or completely custom content.
!bsbtm Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
!bsbtn Use Bootstrap’s custom button styles for actions in forms etc.
!bsbg Group a series of buttons together on a single line with the button group.
!bscon Bootstrap default container.
!bscrc1 Container with row and col

Requirements

  • Visual Studio Code version 1.28.0 or Up required.

Extension Settings

Include if your extension adds any VS Code settings through the contributes.configuration extension point.

For example:

This extension contributes the following settings:

  • myExtension.enable: enable/disable this extension
  • myExtension.thing: set to blah to do something

Known Issues

Calling out known issues can help limit users opening duplicate issues against your extension.

Release Notes

Users appreciate release notes as you update your extension.

1.0.0

Initial release of bootstrap 4 shortcut codes

1.2.0

Form added List added

1.3.0

  • Bug fixed

1.4.0

  • Alert - Provide contextual feedback messages
  • Additional content Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
  • Dismissing Dismiss any alert inline.
  • Jumbotron
    • A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
  • Button
  • Group a series of buttons together on a single line with the button group.

1.5.0

  • Layout with Container, Rows, Cols

Demo

Look a Demo

Working with Markdown

Note: You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:

  • Split the editor (Cmd+\ on macOS or Ctrl+\ on Windows and Linux)
  • Toggle preview (Shift+CMD+V on macOS or Shift+Ctrl+V on Windows and Linux)
  • Press Ctrl+Space (Windows, Linux) or Cmd+Space (macOS) to see a list of Markdown snippets

Credits

Adnan Ayoub

Follow us on Github

@adnanganie

Follow us on facebook

@adnanganie

Website

@alkowsartech

For more information

Enjoy!