There are a lot of web Developers and designers who prefer to use Bootstrap to create a responsive websites.
Using Brackets code editor, it is easy to code Bootstrap 3 or Bootstrap 4.
In this article, we will show some best Bootstrap extensions which will make the Bootstrap coding a lot easier. Few popular Bootstrap extensions for Brackets are –
1. Brackets Starter template
The Bootstrap starter Template creates a starter template for Bootstrap. This contains Bootstrap skeleton similar to HTML skeleton.
Once you install this extension, simply go to –
File -> New Bootstrap Template or use the shortcut Ctrl + Alt + B.
This template is similar to the template that you will download from the official Bootstrap website.
2. Brackets Bootstrap Skeleton
After installing this extension, create a new File(Ctrl + N) and go to –
Edit -> New Bootstrap Document.
It will also create a Bootstrap skeleton similar to the one which is available in the official Bootstrap website.
3. ACB Bootstrap Snippets
Another popular Bootstrap extension for Brackets is ACB Bootstrap Snippets.
This helps to code Bootstrap faster in Brackets code editor. It provides the snippets and the code hints for the Bootstrap classes.
So, this reduces the time to manually type the entire code with class. This is extremely helpful for those who forgets the Bootstrap class names.
Suppose, you need to create a button, then you can simply type –
bs3bu and it will show the short codes like bs3button, bs3buttongroup, etc.
Once you click on bs3bu, it will automatically give you the code with class like –
Expanded code from shortcode
4. RCH Bootstrap 4 Snippets
Click on this link to go to the GitHub link of this extension. This page contains all the Bootstrap shortcodes available with this extension for Brackets.
After installing this plugin, go to Edit -> Enable RCH Bootstrap Snippets
If you type bs4btn, it will generate a code for Bootstrap Button.
5. Brackets CSS Class Code Hint
There is a popular extension Brackets CSS Class Code Hint which provides the code hinting for Bootstrap.
You need to place the bootstrap.css file in your CSS Folder and refresh your Brackets editor.
Now, you need to link this stylesheet to your HTML document like below –
Suppose, you forgot the class name while coding, then it will automatically suggest the class names.
This plugin is not only for Bootstrap as it will provide the code hints for any other custom class names also.