bootstrap-snippets-atom
A set of bootstrap 4 snippets for atom.
Type the following keywords to see available snippets in your document.
All the snippets available below required bootstrap 4.2.1 css file.
To use the bootstrap snippets, type the specified keyword. A list of bootstrap snippets will show up.
Installation Instructions
- Open atom, click on packages which is present on the top of the editor and then settings view > open or simply press
ctrl+comma
. - Now click on install and search for the package
bootstrap-snippets-atom
in the search bar and click install. - Now restart the atom.
Available Snippets
-
media
- Type
media
in your document, then editor will show up a snippet categorized with user snippets along with the description - 'media object'.
- Type
-
card
- Type
card
in your document, then editor will show up a snippet categorized with user snippets along with the description - 'card with image, text, rating and button'. - This snippet requires font-awesome.
- Type
-
accordion
- Type
accordion
in your document, then editor will show up a snippet categorized with user snippets along with the description - 'accordion with plus and minus icons that toggles'. - This snippet requires font-awesome and bootstrap 4.2.1 js.
- This snippet also requires custom style in css. So, open css file and type 'accordion', this will show up a user snippet and then add that snippet.
- Type
-
header-t-f
- Type
header-t-f
in your document, then editor will show up a snippet categorized with user snippets along with the description - 'basic header with fixed on top'. - This snippet requires bootstrap 4.2.1 js.
- Type
-
tabs
- Type
tabs
in your document, then editor will show up a snippet categorized with user snippets along with the description - 'Dynamic tab pills'. - This snippet requires bootstrap 4.2.1 js.
- Type
-
table-r
- Type
table-r
in your document, then editor will show up a snippet categorized with user snippets along with the description - 'basic table with responsive '. - This snippet requires bootstrap 4.2.1 js.
- Type
-
carousel-slider
- Type
carousel-slider
in your document, then editor will show up a snippet categorized with user snippets along with the description - 'carousel with indicators,controls and captions'. - This snippet requires bootstrap 4.2.1 js.
- This snippet also requires custom style in css. So, open css file and type 'carousel-slider', this will show up a user snippet and then add that snippet.
- Type
-
timeline-r
- Type
timeline-r
in your document, then editor will show up a snippet categorized with user snippets along with the description - 'timeline with responsive'. - This snippet requires font-awesome.
- This snippet also requires custom style in css. So, open css file and type 'timeline-r', this will show up a user snippet and then add that snippet.
- Type
-
footer
- Type
footer
in your document, then editor will show up a snippet categorized with user snippets along with the description - 'basic footer with four columns'. - This snippet also requires custom style in css. So, open css file and type 'footer', this will show up a user snippet and then add that snippet.
- Type
-
flip-card
- Type
flip-card
in your document, then editor will show up a snippet categorized with user snippets along with the description - 'Flips card on hover'. - This snippet also requires custom style in css. So, open css file and type 'flip-card ', this will show up a user snippet and then add that snippet.
- Type
-
sidebar-icons
- Type
sidebar-icons
in your document, then editor will show up a snippet categorized with user snippets along with the description - 'sticky sidebar collapse to icons with responsive'. - This snippet requires font-awesome.
- This snippet also requires custom style in css and custom script in javascript. So, open css file and js file then type 'sidebar-icons', this will show up a user snippet in both files and then add that snippet.
- Type
-
login-signup
- Type
login-signup
in your document, then editor will show up a snippet categorized with user snippets along with the description - 'basic login/signup form using modal'. - This snippet requires bootstrap 4.2.1 js.
- Type
Summary
Keyword | Description | Css | Javascript | Font-awesome |
---|---|---|---|---|
media | media object | - | - | - |
card | card with image, text, rating and button | - | - | yes |
accordion | accordion with plus and minus icons that toggles | required custom css in css file | required bootstrap js | yes |
header-t-f | basic header with fixed on top | - | required bootstrap js | - |
tabs | Dynamic tab pills | - | required bootstrap js | - |
table-r | basic table with responsive | - | - | - |
carousel-slider | carousel with indicators,controls and captions | required custom css in css file | required bootstrap js | - |
timeline-r | timeline with responsive | required custom css in css file | - | yes |
footer | basic footer with four columns | required custom css in css file | - | - |
flip-card | Flips card on hover | required custom css in css file | - | - |
sidebar-icons | sticky sidebar collapse to icons with responsive | required custom css in css file | required custom javascript in javascript file | yes |
login-signup | basic login/signup form using modal | - | required bootstrap js | - |
Note:
- For required custom css and custom javascript, you need to open your css/javascript and type the same keyword to add respective css/javascript.
- All the available snippets required bootstrap 4 css.
- Required font-awesome version is 4.7.0.
If you can contribute or you want to, feel free to do it at Buy me a coffee!, I will be really thankfull for anything even if it is a coffee or just a kind comment towards my work, because that helps me a lot. Thank you!
Enjoy!