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

1. media

   • Type media in your document, then editor will show up a snippet categorized with user snippets along with the description - 'media object'.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.

8. 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.

9. 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.

10. 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.

11. 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.

12. 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.

Summary

Note:

1. For required custom css and custom javascript, you need to open your css/javascript and type the same keyword to add respective css/javascript.
2. All the available snippets required bootstrap 4 css.
3. Required font-awesome version is 4.7.0.

Enjoy!