diff --git a/Gruntfile.js b/Gruntfile.js
index 9aea4cf0..e86e683e 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -36,9 +36,16 @@ module.exports = function(grunt) {
                 outMin: 'build/<%= pkg.name %>.min.js'
             },
             css: {
-                src: 'scss/main.scss',
-                out: 'build/<%= pkg.name %>.css',
-                outMin: 'build/<%= pkg.name %>.min.css'
+                main: {
+                    src: 'scss/main.scss',
+                    out: 'build/<%= pkg.name %>.css',
+                    outMin: 'build/<%= pkg.name %>.min.css'
+                },
+                bootstrap: {
+                    src: 'scss/bootstrap/main.scss',
+                    out: 'build/<%= pkg.name %>.bootstrap.css',
+                    outMin: 'build/<%= pkg.name %>.bootstrap.min.css'
+                }
             },
             html: {
                 src: ['templates/tags-input.html', 'templates/auto-complete.html'],
diff --git a/grunt/options/compress.js b/grunt/options/compress.js
index 82b9bf70..f5ba6d5d 100644
--- a/grunt/options/compress.js
+++ b/grunt/options/compress.js
@@ -9,7 +9,7 @@ module.exports = {
         files : [
             {
                 expand: true,
-                src : ['<%= files.js.outMin %>', '<%= files.css.outMin %>'],
+                src : ['<%= files.js.outMin %>', '<%= files.css.main.outMin %>'],
                 flatten: true
             }
         ]
@@ -21,7 +21,7 @@ module.exports = {
         files : [
             {
                 expand: true,
-                src : ['<%= files.js.out %>', '<%= files.css.out %>'],
+                src : ['<%= files.js.out %>', '<%= files.css.main.out %>'],
                 flatten: true
             }
         ]
diff --git a/grunt/options/cssmin.js b/grunt/options/cssmin.js
index 520f8847..0001f75c 100644
--- a/grunt/options/cssmin.js
+++ b/grunt/options/cssmin.js
@@ -1,7 +1,8 @@
 module.exports = {
     build: {
         files: {
-            '<%= files.css.outMin %>': ['<%= files.css.out %>']
+            '<%= files.css.main.outMin %>': ['<%= files.css.main.out %>'],
+            '<%= files.css.bootstrap.outMin %>': ['<%= files.css.bootstrap.out %>']
         }
     }
 };
\ No newline at end of file
diff --git a/grunt/options/sass.js b/grunt/options/sass.js
index 4d881a91..e9e12be8 100644
--- a/grunt/options/sass.js
+++ b/grunt/options/sass.js
@@ -5,7 +5,8 @@ module.exports = {
             noCache: true
         },
         files: {
-            '<%= files.css.out %>': ['<%= files.css.src %>']
+            '<%= files.css.main.out %>': ['<%= files.css.main.src %>'],
+            '<%= files.css.bootstrap.out %>': ['<%= files.css.bootstrap.src %>']
         }
     }
 };
\ No newline at end of file
diff --git a/scss/auto-complete.scss b/scss/auto-complete.scss
index e0f0c959..ae8a8fb3 100644
--- a/scss/auto-complete.scss
+++ b/scss/auto-complete.scss
@@ -5,11 +5,11 @@ tags-input .autocomplete {
   margin-top: 5px;
   position: absolute;
   padding: 5px 0;
-  z-index: $suggestion-box-z-index;
-  width: $suggestion-box-width;
-  background-color: $suggestion-box-color;
-  border: $suggestion-box-border;
-  @include box-shadow($suggestion-box-shadow);
+  z-index: $suggestions-z-index;
+  width: $suggestions-width;
+  background-color: $suggestions-bgcolor;
+  border: $suggestions-border;
+  @include box-shadow($suggestions-border-shadow);
 
   .suggestion-list {
     margin: 0;
diff --git a/scss/bootstrap/forms.scss b/scss/bootstrap/forms.scss
new file mode 100644
index 00000000..3285d627
--- /dev/null
+++ b/scss/bootstrap/forms.scss
@@ -0,0 +1,97 @@
+@import "../mixins";
+@import "variables";
+
+tags-input.ti-input-lg {
+  min-height: $tags-height-lg;
+
+  .tags {
+    border-radius: $tag-border-radius-lg;
+
+    .tag-item {
+      height: $tag-height-lg;
+      line-height: $tag-height-lg - 1px;
+      font-size: $tag-font-size-lg;
+      border-radius: $tag-border-radius-lg;
+
+      .remove-button {
+        font-size: $remove-button-font-size-lg;
+      }
+    }
+
+    .input {
+      height: $tag-height-lg;
+      font-size: $input-font-size-lg;
+    }
+  }
+}
+
+tags-input.ti-input-sm {
+  min-height: $tags-height-sm;
+
+  .tags {
+    border-radius: $tag-border-radius-sm;
+
+    .tag-item {
+      height: $tag-height-sm;
+      line-height: $tag-height-sm - 1px;
+      font-size: $tag-font-size-sm;
+      border-radius: $tag-border-radius-sm;
+
+      .remove-button {
+        font-size: $remove-button-font-size-sm;
+      }
+    }
+
+    .input {
+      height: $tag-height-sm;
+      font-size: $input-font-size-sm;
+    }
+  }
+}
+
+.has-feedback {
+  tags-input {
+    .tags {
+      padding-right: 30px;
+    }
+  }
+
+  &.has-success {
+    tags-input {
+      .tags {
+        border-color: $tags-border-color-success;
+
+        &.focused {
+          border-color: $tags-outline-border-color-success;
+          @include box-shadow($tags-outline-border-shadow-success)
+        }
+      }
+    }
+  }
+
+  &.has-error {
+    tags-input {
+      .tags {
+        border-color: $tags-border-color-error;
+
+        &.focused {
+          border-color: $tags-outline-border-color-error;
+          @include box-shadow($tags-outline-border-shadow-error)
+        }
+      }
+    }
+  }
+
+  &.has-warning {
+    tags-input {
+      .tags {
+        border-color: $tags-border-color-warning;
+
+        &.focused {
+          border-color: $tags-outline-border-color-warning;
+          @include box-shadow($tags-outline-border-shadow-warning)
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/scss/bootstrap/input-groups.scss b/scss/bootstrap/input-groups.scss
new file mode 100644
index 00000000..7bc75c1a
--- /dev/null
+++ b/scss/bootstrap/input-groups.scss
@@ -0,0 +1,47 @@
+@import "forms";
+@import "variables";
+
+.input-group {
+  tags-input {
+    padding: 0;
+    display: table-cell;
+  }
+
+  tags-input:not(:first-child) {
+    .tags {
+      @include border-left-radius(0)
+    }
+  }
+
+  tags-input:not(:last-child) {
+    .tags {
+      @include border-right-radius(0)
+    }
+  }
+}
+
+.input-group-lg {
+  tags-input {
+    @extend .ti-input-lg;
+  }
+
+  tags-input:first-child {
+    @include border-left-radius($tag-border-radius-lg);
+  }
+
+  tags-input:last-child {
+    @include border-right-radius($tag-border-radius-lg);
+  }
+}
+
+.input-group-sm tags-input {
+  @extend .ti-input-sm;
+
+  tags-input:first-child {
+    @include border-left-radius($tag-border-radius-sm);
+  }
+
+  tags-input:last-child {
+    @include border-right-radius($tag-border-radius-sm);
+  }
+}
\ No newline at end of file
diff --git a/scss/bootstrap/main.scss b/scss/bootstrap/main.scss
new file mode 100644
index 00000000..c4cc893a
--- /dev/null
+++ b/scss/bootstrap/main.scss
@@ -0,0 +1,73 @@
+@import "../mixins";
+@import "variables";
+
+tags-input {
+  box-shadow: none;
+  border: none;
+  padding: 0;
+  min-height: $tags-height;
+
+  .host {
+    margin: 0;
+  }
+
+  .tags {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    border: $tags-border;
+    border-radius: $tags-border-radius;
+    @include box-shadow($tags-border-shadow);
+    @include transition($tags-transition);
+
+    .tag-item {
+      color: $tag-color;
+      background: $tag-bgcolor;
+      border: $tag-border;
+      border-radius: $tag-border-radius;
+
+      &.selected {
+        color: $tag-color-selected;
+        background: $tag-bgcolor-selected;
+        border: $tag-border-selected;
+      }
+
+      .remove-button:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  .tags.focused {
+    border: $tags-outline-border;
+    @include box-shadow($tags-outline-border-shadow);
+  }
+
+  .autocomplete {
+    border-radius: $suggestions-border-radius;
+
+    .suggestion-item {
+      &.selected {
+        color: $suggestion-color-selected;
+        background-color: $suggestion-bgcolor-selected;
+
+        em {
+          color: $suggestion-highlight-color-selected;
+          background-color: $suggestion-highlight-bgcolor-selected;
+        }
+      }
+
+      em {
+        color: $suggestion-highlight-color;
+        background-color: $suggestion-highlight-bgcolor;
+      }
+    }
+  }
+
+  &.ng-invalid .tags {
+    border-color: #843534;
+    @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483)
+  }
+}
+
+@import "input-groups";
+@import "forms";
\ No newline at end of file
diff --git a/scss/bootstrap/variables.scss b/scss/bootstrap/variables.scss
new file mode 100644
index 00000000..fe9a7e0b
--- /dev/null
+++ b/scss/bootstrap/variables.scss
@@ -0,0 +1,55 @@
+// tagsInput
+$tags-border:                           1px solid #ccc;
+$tags-border-radius:                    4px;
+$tags-border-shadow:                    inset 0 1px 1px rgba(0, 0, 0, .075);
+$tags-transition:                       border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+$tags-outline-border:                   1px solid #66afe9;
+$tags-outline-border-shadow:            inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
+
+$tag-color:                             #fff;
+$tag-bgcolor:                           #428bca;
+$tag-border:                            1px solid #357ebd;
+$tag-border-radius:                     4px;
+
+$tag-color-selected:                    #fff;
+$tag-bgcolor-selected:                  #d9534f;
+$tag-border-selected:                   1px solid #d43f3a;
+
+$tags-height:                           34px;
+
+$tags-height-lg:                        46px;
+$tag-height-lg:                         38px;
+$tag-font-size-lg:                      18px;
+$tag-border-radius-lg:                  6px;
+$remove-button-font-size-lg:            20px;
+$input-font-size-lg:                    18px;
+
+$tags-height-sm:                        30px;
+$tag-height-sm:                         22px;
+$tag-font-size-sm:                      12px;
+$tag-border-radius-sm:                  3px;
+$remove-button-font-size-sm:            16px;
+$input-font-size-sm:                    12px;
+
+$tags-border-color-success:             #3c763d;
+$tags-outline-border-color-success:     #2b542c;
+$tags-outline-border-shadow-success:    inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
+
+$tags-border-color-error:               #a94442;
+$tags-outline-border-color-error:       #843534;
+$tags-outline-border-shadow-error:      inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
+
+$tags-border-color-warning:             #8a6d3b;
+$tags-outline-border-color-warning:     #66512c;
+$tags-outline-border-shadow-warning:    inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
+
+// autoComplete
+$suggestions-border-radius:             4px;
+
+$suggestion-color-selected:             #262626;
+$suggestion-bgcolor-selected:           #f5f5f5;
+
+$suggestion-highlight-color:            #000;
+$suggestion-highlight-bgcolor:          #fff;
+$suggestion-highlight-color-selected:   $suggestion-color-selected;
+$suggestion-highlight-bgcolor-selected: $suggestion-bgcolor-selected;
diff --git a/scss/main.scss b/scss/main.scss
index 700f91e4..d46d6e3d 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -1,14 +1,17 @@
-tags-input *, *:before, *:after {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
 tags-input {
+  display: block;
+
+  *, *:before, *:after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
   .host {
     position: relative;
     margin-top: 5px;
     margin-bottom: 5px;
+    height: 100%;
 
     &:active {
       outline: none;
diff --git a/scss/mixins.scss b/scss/mixins.scss
index 20473b8b..a0a30837 100644
--- a/scss/mixins.scss
+++ b/scss/mixins.scss
@@ -7,4 +7,20 @@
   -webkit-box-shadow: $args;
   -moz-box-shadow: $args;
   box-shadow: $args;
+}
+
+@mixin transition($args...) {
+  -webkit-transition: $args;
+  -moz-transition: $args;
+  transition: $args;
+}
+
+@mixin border-left-radius($radius) {
+  border-top-left-radius: $radius;
+  border-bottom-left-radius: $radius;
+}
+
+@mixin border-right-radius($radius) {
+  border-top-right-radius: $radius;
+  border-bottom-right-radius: $radius;
 }
\ No newline at end of file
diff --git a/scss/tags-input.scss b/scss/tags-input.scss
index cd4ca8de..ce5a8be3 100644
--- a/scss/tags-input.scss
+++ b/scss/tags-input.scss
@@ -12,6 +12,7 @@ tags-input {
     background-color: $tags-bgcolor;
     border: $tags-border;
     box-shadow: $tags-border-shadow;
+    height: 100%;
 
     &.focused {
       outline: none;
diff --git a/scss/variables.scss b/scss/variables.scss
index ae38a997..50e8460e 100644
--- a/scss/variables.scss
+++ b/scss/variables.scss
@@ -23,11 +23,11 @@ $remove-button-font:                    bold 16px Arial, sans-serif;
 $input-font:                            $tag-font;
 
 // autoComplete
-$suggestion-box-z-index:                999;
-$suggestion-box-width:                  100%;
-$suggestion-box-color:                  #fff;
-$suggestion-box-border:                 1px solid rgba(0, 0, 0, 0.2);
-$suggestion-box-shadow:                 0 5px 10px rgba(0, 0, 0, 0.2);
+$suggestions-z-index:                   999;
+$suggestions-width:                     100%;
+$suggestions-bgcolor:                   #fff;
+$suggestions-border:                    1px solid rgba(0, 0, 0, 0.2);
+$suggestions-border-shadow:             0 5px 10px rgba(0, 0, 0, 0.2);
 
 $suggestion-font:                       16px $base-font-family;
 $suggestion-color:                      #000;
diff --git a/test/test-page.html b/test/test-page.html
index a553a131..2b962b59 100644
--- a/test/test-page.html
+++ b/test/test-page.html
@@ -4,7 +4,9 @@
   <title>ngTagsInput Test Page</title>
   <script type="text/javascript" src="lib/angular.js"></script>
   <script type="text/javascript" src="../build/ng-tags-input.js"></script>
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
   <link rel="stylesheet" href="../build/ng-tags-input.css"/>
+  <link rel="stylesheet" href="../build/ng-tags-input.bootstrap.css"/>
   <style>
     .foo .tags .input {
       font-size: 16px;
@@ -42,44 +44,54 @@
   </style>
 </head>
 <body ng-controller="Ctrl">
-<input type="checkbox" ng-model="visible"/>
-  <form name="form">
-    <tags-input name="tags" ng-if="visible"
-                type="{{type}}"
-                ng-model="tags"
-                add-on-enter="{{addOnEnter}}"
-                add-on-blur="true"
-                placeholder="{{placeholder}}"
-                remove-tag-symbol="{{removeTagSymbol}}"
-                max-length="5"
-                add-from-autocomplete-only="false"
-                min-tags="{{minTags}}"
-                max-tags="{{maxTags}}"
-                allow-leftover-text="{{allowLeftoverText}}">
-      <auto-complete source="loadItems($query)"
-                     debounce-delay="0"
-                     min-length="1"
-                     max-results-to-show="10"
-                     load-on-down-arrow="true"
-                     show-on-empty="true">
-      </auto-complete>
+    <p></p>
+    <tags-input ng-model="tags">
+        <auto-complete source="loadItems($query)" load-on-down-arrow="true"></auto-complete>
     </tags-input>
-
-    <p>Valid: {{form.tags.$valid}}</p>
-    <p>Errors: {{form.tags.$error}}</p>
-  </form>
-
-  <p><label>placeholder:<input type="text" ng-model="placeholder"/>{{placeholder}}</label></p>
-  <p><label>removeTagSymbol:<input type="text" ng-model="removeTagSymbol"/></label></p>
-  <p><label>addOnEnter:<input type="checkbox" ng-model="addOnEnter"/>{{addOnEnter}}</label></p>
-  <p><label>minTags:<input type="text" ng-model="minTags"/></label>{{minTags}}</p>
-  <p><label>maxTags:<input type="text" ng-model="maxTags"/></label>{{maxTags}}</p>
-  <p><label>allowLeftoverText:<input type="checkbox" ng-model="allowLeftoverText"/></label></p>
-
-  <input type="text" ng-model="removeTagSymbol"/>
-
-<input type="text" ng-model="type"/>
-
+    <p></p>
+    <div class="input-group" style="width: 600px">
+        <span class="input-group-addon">@</span>
+        <tags-input ng-model="tags">
+            <auto-complete source="loadItems($query)" load-on-down-arrow="true"></auto-complete>
+        </tags-input>
+        <span class="input-group-addon">.00</span>
+    </div>
+    <p></p>
+    <div class="input-group input-group-lg" style="width: 600px">
+        <span class="input-group-addon">@</span>
+        <tags-input ng-model="tags">
+            <auto-complete source="loadItems($query)" load-on-down-arrow="true"></auto-complete>
+        </tags-input>
+        <span class="input-group-addon">.00</span>
+    </div>
+<p></p>
+    <div class="input-group input-group-sm" style="width: 600px">
+        <span class="input-group-addon">@</span>
+        <tags-input ng-model="tags">
+            <auto-complete source="loadItems($query)" load-on-down-arrow="true"></auto-complete>
+        </tags-input>
+        <span class="input-group-addon">.00</span>
+    </div>
+    <p></p>
+    <div class="form-group has-success has-feedback" style="width: 500px">
+        <label class="control-label" for="inputSuccess2">Input with success</label>
+        <tags-input ng-model="tags">
+            <auto-complete source="loadItems($query)" load-on-down-arrow="true"></auto-complete>
+        </tags-input>
+        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+    </div>
+    <div class="form-group has-error has-feedback" style="width: 500px">
+      <label class="control-label" for="inputSuccess2">Input with success</label>
+      <tags-input ng-model="tags">
+        <auto-complete source="loadItems($query)" load-on-down-arrow="true"></auto-complete>
+      </tags-input>
+      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
+    </div>
+    <div class="form-group has-success has-feedback" style="width: 500px">
+      <label class="control-label" for="inputSuccess2">Input with success</label>
+      <input type="text" class="form-control"/>
+      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+    </div>
   <script type="text/javascript">
     angular.module('app', ['ngTagsInput'])
         .controller('Ctrl', function($scope, $q) {