Brackets Bootstrap

Bootstrap is one of the best framework which is built on HTML, CSS & JavaScript.

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

The Bootstrap Skeleton extension is an alternative to the Bootstrap starter Template extension.

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.

For example–
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

<button type="button" class="btn btn-default">[button]</button>

4. RCH Bootstrap 4 Snippets

The RCH Bootstrap 4 Snippets is one of the best Bootstrap 4 plugin for Brackets. It is a good alternative for ACB Bootstrap 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

For Example:
If you type bs4btn, it will generate a code for Bootstrap Button.

5. Brackets CSS Class Code Hint

Note/Info Now, the author(growlscript) of this extension has stopped maintaining this plugin so we do not recommend you to use this plugin. Instead, it is better to use the ACB Bootstrap Snippets or RCH Bootstrap 4 Snippets.

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 –

<link rel="stylesheet" href="css/bootstrap.css">

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.