intellij-bootstrap icon indicating copy to clipboard operation
intellij-bootstrap copied to clipboard

Bootstrap 3 and Bootstrap 4 plugin for IntelliJ

= Bootstrap IntelliJ Plugin

The IntelliJ Bootstrap plugin for Bootstrap 3 and Bootstrap 4. This plugin enhances productivity by providing live templates - lots of live templates! This plugin works for the following JetBrains products:

  • IntelliJ IDEA
  • WebStorm and PhpStorm
  • Android Studio
  • PyCharm
  • RubyMine
  • AppCode
  • CLion
  • Gogland
  • Rider

And supports Bootstrap 3.3.7 and Bootstrap 4.0.0-beta.

If you like the Bootstrap plugin, please consider donating: image:https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif[Donate,link=https://paypal.me/intellijbootstrap]

image:https://raw.githubusercontent.com/bodiam/intellij-bootstrap3/master/screencasts/starter-template.gif[Plugin in action]

Feel free to let me know what else you want added via the https://github.com/bodiam/intellij-bootstrap3/issues[issues].

Suggestions, feedback and other comments welcome via https://twitter.com/epragt[@epragt] on Twitter.

=== Installation (in 3 easy steps)

To install the plugin open your editor (IntelliJ) and hit:

  1. File > Settings > Plugins and click on the Browse repositories button.

  2. Look for Bootstrap 3 the right click and select Download plugin.

  3. Finally hit the Apply button, agree to restart your IDE and you're all done!

=== Usage

To use the plugin, open an editor, and start typing bs3- for Bootstrap 3, or bs4- for Bootstrap 4 templates followed by pressing CMD+J. A list of templates will show up. Alternatively, you can type e.g. alert, followed by CMD+J, to immediately show only the alert templates.

== What's new

Since 4.1.0 (15 April 2018)

  • Added new template (bs3-panel:default) thanks to cedriczie

Since 4.0 (1 Oct 2017)

  • Bugfixes
  • Initial Bootstrap 4 support (expect more to come soon)

Note: version 3.0 was skipped to better align with Bootstrap versioning

Since 2.4 (12 Mar 2017)

  • Added bs3-form-field:select, thanks to https://github.com/JeyKeu[JQ]

Since 2.3 (13 Feb 2017)

  • Bootstrap 3.3.7
  • Code will now be reformatted, thanks to https://github.com/azeemhassni[Azeem Hassni].

Since 2.2.1 (7 Jan 2016)

  • bugfixes, thanks to https://github.com/azeemhassni[Azeem Hassni].

Since 2.2 (14 Dec 2015)

  • upgraded to Bootstrap 3.3.6

Since 2.1 (22 Jul 2015)

  • upgraded to Bootstrap 3.3.5 thanks to https://github.com/lihaibh[Chuck Housley].

Since 2.0 (26 May 2015)

  • Jade support
  • Small bugfixes

Thanks https://github.com/pjedwabny[Paweł Jedwabny], https://github.com/lihaibh[Lihai Ben-Haim] and https://github.com/oscarbatlle[Oscar Batlle]!

== What's included - contents

  • link:#alert[Alert]
  • link:#alert-link[Alert-link]
  • link:#alert[Alert]
  • link:#badge[Badge]
  • link:#breadcrumbs[Breadcrumbs]
  • link:#button-group[Button-group]
  • link:#button-toolbar[Button-toolbar]
  • link:#button[Button]
  • link:#cdn[Cdn]
  • link:#checkbox[Checkbox]
  • link:#clearfix[Clearfix]
  • link:#col[Col]
  • link:#container[Container]
  • link:#dismissable-alert[Dismissable-alert]
  • link:#feature[Feature]
  • link:#form[Form]
  • link:#form-field[Form-field]
  • link:#form[Form]
  • link:#icon[Icon]
  • link:#image[Image]
  • link:#input[Input]
  • link:#jumbotron[Jumbotron]
  • link:#label[Label]
  • link:#list-group[List-group]
  • link:#media-object[Media-object]
  • link:#modal[Modal]
  • link:#navbar[Navbar]
  • link:#page-header[Page-header]
  • link:#pager[Pager]
  • link:#pagination[Pagination]
  • link:#panel[Panel]
  • link:#pills[Pills]
  • link:#progress-bar[Progress-bar]
  • link:#radio[Radio]
  • link:#responsive-embed[Responsive-embed]
  • link:#row[Row]
  • link:#select[Select]
  • link:#submit[Submit]
  • link:#table[Table]
  • link:#tabs[Tabs]
  • link:#template[Template]
  • link:#thumbnail[Thumbnail]
  • link:#well[Well]

=== Alert

|=== |Component |Snippet code |Context

|Alert |bs3-alert |HTML |===

=== Alert-link

|=== |Component |Snippet code |Context

|Alert with alert link (warning) |bs3-alert-link |HTML |===

=== Alert

|=== |Component |Snippet code |Context

|Alert (Danger) |bs3-alert:danger |HTML |Alert (Info) |bs3-alert:info |HTML |Alert (Success) |bs3-alert:success |HTML |Alert (Warning) |bs3-alert:warning |HTML |===

=== Badge

|=== |Component |Snippet code |Context

|Badge |bs3-badge |HTML |===

=== Breadcrumbs

|=== |Component |Snippet code |Context

|Breadcrumbs |bs3-breadcrumbs |HTML |===

=== Button-group

|=== |Component |Snippet code |Context

|Button group |bs3-button-group |HTML |Button group (Vertical orientation) |bs3-button-group:vertical |HTML |===

=== Button-toolbar

|=== |Component |Snippet code |Context

|Button toolbar |bs3-button-toolbar |HTML |===

=== Button

|=== |Component |Snippet code |Context

|Full dropdown example |bs3-button:dropdown |HTML |===

=== Cdn

|=== |Component |Snippet code |Context

|Bootstrap 3 CSS & JS CDN |bs3-cdn |HTML |Bootstrap 3 CSS CDN |bs3-cdn:css |HTML |Bootstrap 3 JavaScript CDN |bs3-cdn:js |HTML |===

=== Checkbox

|=== |Component |Snippet code |Context

|Checkbox Input Field |bs3-checkbox |HTML |===

=== Clearfix

|=== |Component |Snippet code |Context

|Clearfix |bs3-clearfix |HTML |===

=== Col

|=== |Component |Snippet code |Context

|Column 1 |bs3-col:1 |HTML |Column 10 |bs3-col:10 |HTML |Column 11 |bs3-col:11 |HTML |Column 12 |bs3-col:12 |HTML |Column 2 |bs3-col:2 |HTML |Column 3 |bs3-col:3 |HTML |Column 4 |bs3-col:4 |HTML |Column 5 |bs3-col:5 |HTML |Column 6 |bs3-col:6 |HTML |Column 7 |bs3-col:7 |HTML |Column 8 |bs3-col:8 |HTML |Column 9 |bs3-col:9 |HTML |===

=== Container

|=== |Component |Snippet code |Context

|Container |bs3-container |HTML |Container Fluid |bs3-container:fluid |HTML |===

=== Dismissable-alert

|=== |Component |Snippet code |Context

|Dismissable alert (danger) |bs3-dismissable-alert:danger |HTML |Dismissable alert (info) |bs3-dismissable-alert:info |HTML |Dismissable alert (success) |bs3-dismissable-alert:success |HTML |Dismissable alert (warning) |bs3-dismissable-alert:warning |HTML |===

=== Feature

|=== |Component |Snippet code |Context

|Carousel Rows |bs3-feature:carousel-rows |HTML |Carousel Rows |bs3-feature:carousel-rows-css |CSS |Beautiful image card with description |bs3-feature:image-card-with-description |HTML |Beautiful image card with description |bs3-feature:image-card-with-description-css |CSS |Thumbnail in gallery |bs3-feature:thumbnail |HTML |Thumbnail gallery |bs3-feature:thumbnail-gallery |HTML |===

=== Form

|=== |Component |Snippet code |Context

|Form |bs3-form |HTML |===

=== Form-field

|=== |Component |Snippet code |Context

|No description |bs3-form-field:button |HTML |No description |bs3-form-field:checkbox |HTML |No description |bs3-form-field:select |HTML |No description |bs3-form-field:text |HTML |No description |bs3-form-field:time |HTML |===

=== Form

|=== |Component |Snippet code |Context

|Form (Horizontal) |bs3-form:horizontal |HTML |Form (Inline) |bs3-form:inline |HTML |Form (Label) |bs3-form:label |HTML |===

=== Icon

|=== |Component |Snippet code |Context

|Font Awesome Icon |bs3-icon |HTML |Glyphicon |bs3-icon:glyphicon |HTML |===

=== Image

|=== |Component |Snippet code |Context

|Image |bs3-image |HTML |===

=== Input

|=== |Component |Snippet code |Context

|Input (Form Input) |bs3-input |HTML |Horizontal Form Input Field |bs3-input:h |HTML |===

=== Jumbotron

|=== |Component |Snippet code |Context

|Jumbotron |bs3-jumbotron |HTML |===

=== Label

|=== |Component |Snippet code |Context

|Label |bs3-label |HTML |Label (Danger) |bs3-label:danger |HTML |Label (Default) |bs3-label:default |HTML |Label (Info) |bs3-label:info |HTML |Label (Success) |bs3-label:success |HTML |Label (Warning) |bs3-label:warning |HTML |===

=== List-group

|=== |Component |Snippet code |Context

|List group |bs3-list-group |HTML |List group with Badges |bs3-list-group:badges |HTML |List Group with Content |bs3-list-group:content |HTML |Linked List Group |bs3-list-group:linked |HTML |===

=== Media-object

|=== |Component |Snippet code |Context

|Media object (single entry) |bs3-media-object |HTML |Example media object |bs3-media-object:example |HTML |===

=== Modal

|=== |Component |Snippet code |Context

|Modal Dialog Box |bs3-modal |HTML |===

=== Navbar

|=== |Component |Snippet code |Context

|Navbar |bs3-navbar |HTML |Navbar (Basic) |bs3-navbar:basic |HTML |Navbar (Brand) |bs3-navbar:brand |HTML |Navbar (Fixed Bottom) |bs3-navbar:fixed-bottom |HTML |Navbar (Fixed Top) |bs3-navbar:fixed-top |HTML |Navbar (Form) |bs3-navbar:form |HTML |Navbar (Inverse) |bs3-navbar:inverse |HTML |Navbar (Link) |bs3-navbar:link |HTML |Navbar (Links) |bs3-navbar:links |HTML |Navbar (Responsive) |bs3-navbar:responsive |HTML |Navbar (Static Top) |bs3-navbar:static-top |HTML |Navbar (Text) |bs3-navbar:text |HTML |===

=== Page-header

|=== |Component |Snippet code |Context

|Page Header |bs3-page-header |HTML |===

=== Pager

|=== |Component |Snippet code |Context

|Pager |bs3-pager |HTML |Pager (Aligned) |bs3-pager:aligned |HTML |===

=== Pagination

|=== |Component |Snippet code |Context

|Pagination |bs3-pagination |HTML |Pagination (Large) |bs3-pagination:large |HTML |Pagination (Small) |bs3-pagination:small |HTML |===

=== Panel

|=== |Component |Snippet code |Context

|Panel |bs3-panel |HTML |Panel (Danger) |bs3-panel:danger |HTML |Panel with footer |bs3-panel:footer |HTML |Panel with heading |bs3-panel:heading |HTML |Panel (Info) |bs3-panel:info |HTML |Panel (Primary) |bs3-panel:primary |HTML |Panel (Success) |bs3-panel:success |HTML |Panel with table |bs3-panel:table |HTML |Panel (Warning) |bs3-panel:warning |HTML |===

=== Pills

|=== |Component |Snippet code |Context

|Pills |bs3-pills |HTML |Pills (With dropdown menu) |bs3-pills:dropdown |HTML |Pills (Justified) |bs3-pills:justified |HTML |Pills (Vertical) |bs3-pills:vertical |HTML |===

=== Progress-bar

|=== |Component |Snippet code |Context

|Basic progress bar |bs3-progress-bar |HTML |Progress bar (danger) |bs3-progress-bar:danger |HTML |Progress bar (info) |bs3-progress-bar:info |HTML |Progress bar with label |bs3-progress-bar:label |HTML |Stacked progress bar |bs3-progress-bar:stacked |HTML |Striped progress bar |bs3-progress-bar:striped |HTML |Animated striped progress bar |bs3-progress-bar:striped-animated |HTML |Progress bar (success) |bs3-progress-bar:success |HTML |Progress bar (warning) |bs3-progress-bar:warning |HTML |===

=== Radio

|=== |Component |Snippet code |Context

|Radio Form Field |bs3-radio |HTML |===

=== Responsive-embed

|=== |Component |Snippet code |Context

|Responsive embed of video (16:9) |bs3-responsive-embed:16:9 |HTML |Responsive embed of video (4:3) |bs3-responsive-embed:4:3 |HTML |===

=== Row

|=== |Component |Snippet code |Context

|Row |bs3-row |HTML |===

=== Select

|=== |Component |Snippet code |Context

|Select Box Form Field |bs3-select |HTML |Horizontal Form Select Box Field |bs3-select:h |HTML |===

=== Submit

|=== |Component |Snippet code |Context

|Submit Button for Form |bs3-submit |HTML |Submit Button for Horizontal Forms |bs3-submit:h |HTML |===

=== Table

|=== |Component |Snippet code |Context

|Table |bs3-table |HTML |Table (Bordered) |bs3-table:bordered |HTML |Table (Condensed) |bs3-table:condensed |HTML |Table (Hover) |bs3-table:hover |HTML |Table (Responsive) |bs3-table:responsive |HTML |Table (Striped) |bs3-table:striped |HTML |===

=== Tabs

|=== |Component |Snippet code |Context

|Tabs |bs3-tabs |HTML |Tabs (With dropdown menu) |bs3-tabs:dropdown |HTML |Tabs (Justified) |bs3-tabs:justified |HTML |===

=== Template

|=== |Component |Snippet code |Context

|Bootstrap 3 HTML5 Template |bs3-template:html5 |HTML |Bootstrap 3 Starter Template |bs3-template:starter |HTML |===

=== Thumbnail

|=== |Component |Snippet code |Context

|Thumbnail |bs3-thumbnail |HTML |Thumbnail with content |bs3-thumbnail:content |HTML |===

=== Well

|=== |Component |Snippet code |Context

|Well |bs3-well |HTML |Well (large) |bs3-well:large |HTML |Well (small) |bs3-well:small |HTML |===

=== License

Bootstrap 3 - IntelliJ Plugin is open-sourced software licensed under the http://opensource.org/licenses/MIT[MIT license].

This plugin is based on https://github.com/JasonMortonNZ/bootstrap3-phpstorm-plugin[bootstrap-3-phpstorm-plugin] by https://twitter.com/jasonmortonnz[@JasonMortonNZ], who did all of the hard work of creating most of the templates.