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 extensionmyExtension.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
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
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
Follow us on Github
Follow us on facebook
Website
Enjoy!
| |
