From c7ef5810e11bf994d31bb385d794cafc50411c93 Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Wed, 17 Dec 2014 18:30:16 -0800
Subject: [PATCH] rename .item => .carousel-item

---
 docs/examples/carousel/carousel.css |   4 +-
 docs/examples/carousel/index.html   |   6 +-
 docs/javascript/carousel.md         |  16 +--
 js/carousel.js                      |   6 +-
 js/tests/unit/carousel.js           | 152 ++++++++++++++--------------
 js/tests/visual/carousel.html       |   6 +-
 scss/_carousel.scss                 |   2 +-
 7 files changed, 96 insertions(+), 96 deletions(-)

diff --git a/docs/examples/carousel/carousel.css b/docs/examples/carousel/carousel.css
index 7056a41a89..52c93a2966 100644
--- a/docs/examples/carousel/carousel.css
+++ b/docs/examples/carousel/carousel.css
@@ -21,11 +21,11 @@ body {
 }
 
 /* Declare heights because of positioning of img element */
-.carousel .item {
+.carousel-item {
   height: 32rem;
   background-color: #777;
 }
-.carousel-inner > .item > img {
+.carousel-item > img {
   position: absolute;
   top: 0;
   left: 0;
diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html
index 15704ac094..9faa4d3bc2 100644
--- a/docs/examples/carousel/index.html
+++ b/docs/examples/carousel/index.html
@@ -50,7 +50,7 @@
         <li data-target="#myCarousel" data-slide-to="2"></li>
       </ol>
       <div class="carousel-inner" role="listbox">
-        <div class="item active">
+        <div class="carousel-item active">
           <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
           <div class="container">
             <div class="carousel-caption text-left">
@@ -60,7 +60,7 @@
             </div>
           </div>
         </div>
-        <div class="item">
+        <div class="carousel-item">
           <img src="data:image/gif;base64,R0lGODlhAQABAIAAAGZmZgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
           <div class="container">
             <div class="carousel-caption">
@@ -70,7 +70,7 @@
             </div>
           </div>
         </div>
-        <div class="item">
+        <div class="carousel-item">
           <img src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
           <div class="container">
             <div class="carousel-caption text-right">
diff --git a/docs/javascript/carousel.md b/docs/javascript/carousel.md
index ee96f5924b..1b344185c8 100644
--- a/docs/javascript/carousel.md
+++ b/docs/javascript/carousel.md
@@ -15,13 +15,13 @@ A slideshow component for cycling through elements—images or slides of text—
     <li data-target="#carousel-example-generic" data-slide-to="2"></li>
   </ol>
   <div class="carousel-inner" role="listbox">
-    <div class="item active">
+    <div class="carousel-item active">
       <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
     </div>
-    <div class="item">
+    <div class="carousel-item">
       <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
     </div>
-    <div class="item">
+    <div class="carousel-item">
       <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
     </div>
   </div>
@@ -48,7 +48,7 @@ A slideshow component for cycling through elements—images or slides of text—
 
 ### Optional captions
 
-Add captions to your slides easily with the `.carousel-caption` element within any `.item`. Place just about any optional HTML within there and it will be automatically aligned and formatted.
+Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. Place just about any optional HTML within there and it will be automatically aligned and formatted.
 
 <div class="bs-example">
   <div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
@@ -58,21 +58,21 @@ Add captions to your slides easily with the `.carousel-caption` element within a
       <li data-target="#carousel-example-captions" data-slide-to="2"></li>
     </ol>
     <div class="carousel-inner" role="listbox">
-      <div class="item active">
+      <div class="carousel-item active">
         <img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image">
         <div class="carousel-caption">
           <h3>First slide label</h3>
           <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
         </div>
       </div>
-      <div class="item">
+      <div class="carousel-item">
         <img data-src="holder.js/900x500/auto/#666:#666" alt="Second slide image">
         <div class="carousel-caption">
           <h3>Second slide label</h3>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         </div>
       </div>
-      <div class="item">
+      <div class="carousel-item">
         <img data-src="holder.js/900x500/auto/#555:#5555" alt="Third slide image">
         <div class="carousel-caption">
           <h3>Third slide label</h3>
@@ -92,7 +92,7 @@ Add captions to your slides easily with the `.carousel-caption` element within a
 </div>
 
 {% highlight html %}
-<div class="item">
+<div class="carousel-item">
   <img src="..." alt="...">
   <div class="carousel-caption">
     <h3>...</h3>
diff --git a/js/carousel.js b/js/carousel.js
index 99a077c10a..1e8215c8b2 100644
--- a/js/carousel.js
+++ b/js/carousel.js
@@ -65,7 +65,7 @@
   }
 
   Carousel.prototype.getItemIndex = function (item) {
-    this.$items = item.parent().children('.item')
+    this.$items = item.parent().children('.carousel-item')
     return this.$items.index(item || this.$active)
   }
 
@@ -81,7 +81,7 @@
 
   Carousel.prototype.to = function (pos) {
     var that        = this
-    var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))
+    var activeIndex = this.getItemIndex(this.$active = this.$element.find('.carousel-item.active'))
 
     if (pos > (this.$items.length - 1) || pos < 0) return
 
@@ -115,7 +115,7 @@
   }
 
   Carousel.prototype.slide = function (type, next) {
-    var $active   = this.$element.find('.item.active')
+    var $active   = this.$element.find('.carousel-item.active')
     var $next     = next || this.getItemForDirection(type, $active)
     var isCycling = this.interval
     var direction = type == 'next' ? 'left' : 'right'
diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index 008b720825..1598787f1d 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -51,13 +51,13 @@ $(function () {
         + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
         + '</ol>'
         + '<div class="carousel-inner">'
-        + '<div class="item active">'
+        + '<div class="carousel-item active">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="item">'
+        + '<div class="carousel-item">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="item">'
+        + '<div class="carousel-item">'
         + '<div class="carousel-caption"/>'
         + '</div>'
         + '</div>'
@@ -71,16 +71,16 @@ $(function () {
       .one('slide.bs.carousel', function (e) {
         e.preventDefault()
         setTimeout(function () {
-          ok($carousel.find('.item:eq(0)').is('.active'), 'first item still active')
+          ok($carousel.find('.carousel-item:eq(0)').is('.active'), 'first item still active')
           ok($carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active')
           $carousel.bootstrapCarousel('next')
         }, 0)
       })
       .one('slid.bs.carousel', function () {
         setTimeout(function () {
-          ok(!$carousel.find('.item:eq(0)').is('.active'), 'first item still active')
+          ok(!$carousel.find('.carousel-item:eq(0)').is('.active'), 'first item still active')
           ok(!$carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active')
-          ok($carousel.find('.item:eq(1)').is('.active'), 'second item active')
+          ok($carousel.find('.carousel-item:eq(1)').is('.active'), 'second item active')
           ok($carousel.find('.carousel-indicators li:eq(1)').is('.active'), 'second indicator active')
           start()
         }, 0)
@@ -91,7 +91,7 @@ $(function () {
   test('should fire slide event with direction', function () {
     var carouselHTML = '<div id="myCarousel" class="carousel slide">'
         + '<div class="carousel-inner">'
-        + '<div class="item active">'
+        + '<div class="carousel-item active">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>First Thumbnail label</h4>'
@@ -100,7 +100,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="item">'
+        + '<div class="carousel-item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Second Thumbnail label</h4>'
@@ -109,7 +109,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="item">'
+        + '<div class="carousel-item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Third Thumbnail label</h4>'
@@ -145,7 +145,7 @@ $(function () {
   test('should fire slid event with direction', function () {
     var carouselHTML = '<div id="myCarousel" class="carousel slide">'
         + '<div class="carousel-inner">'
-        + '<div class="item active">'
+        + '<div class="carousel-item active">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>First Thumbnail label</h4>'
@@ -154,7 +154,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="item">'
+        + '<div class="carousel-item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Second Thumbnail label</h4>'
@@ -163,7 +163,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="item">'
+        + '<div class="carousel-item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Third Thumbnail label</h4>'
@@ -199,7 +199,7 @@ $(function () {
   test('should fire slide event with relatedTarget', function () {
     var template = '<div id="myCarousel" class="carousel slide">'
         + '<div class="carousel-inner">'
-        + '<div class="item active">'
+        + '<div class="carousel-item active">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>First Thumbnail label</h4>'
@@ -208,7 +208,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="item">'
+        + '<div class="carousel-item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Second Thumbnail label</h4>'
@@ -217,7 +217,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="item">'
+        + '<div class="carousel-item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Third Thumbnail label</h4>'
@@ -236,7 +236,7 @@ $(function () {
     $(template)
       .on('slide.bs.carousel', function (e) {
         ok(e.relatedTarget, 'relatedTarget present')
-        ok($(e.relatedTarget).hasClass('item'), 'relatedTarget has class "item"')
+        ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "carousel-item"')
         start()
       })
       .bootstrapCarousel('next')
@@ -245,7 +245,7 @@ $(function () {
   test('should fire slid event with relatedTarget', function () {
     var template = '<div id="myCarousel" class="carousel slide">'
         + '<div class="carousel-inner">'
-        + '<div class="item active">'
+        + '<div class="carousel-item active">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>First Thumbnail label</h4>'
@@ -254,7 +254,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="item">'
+        + '<div class="carousel-item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Second Thumbnail label</h4>'
@@ -263,7 +263,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="item">'
+        + '<div class="carousel-item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Third Thumbnail label</h4>'
@@ -282,7 +282,7 @@ $(function () {
     $(template)
       .on('slid.bs.carousel', function (e) {
         ok(e.relatedTarget, 'relatedTarget present')
-        ok($(e.relatedTarget).hasClass('item'), 'relatedTarget has class "item"')
+        ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "carousel-item"')
         start()
       })
       .bootstrapCarousel('next')
@@ -291,7 +291,7 @@ $(function () {
   test('should set interval from data attribute', function () {
     var templateHTML = '<div id="myCarousel" class="carousel slide">'
         + '<div class="carousel-inner">'
-        + '<div class="item active">'
+        + '<div class="carousel-item active">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>First Thumbnail label</h4>'
@@ -300,7 +300,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="item">'
+        + '<div class="carousel-item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Second Thumbnail label</h4>'
@@ -309,7 +309,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="item">'
+        + '<div class="carousel-item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Third Thumbnail label</h4>'
@@ -352,14 +352,14 @@ $(function () {
   test('should skip over non-items when using item indices', function () {
     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">'
         + '<div class="carousel-inner">'
-        + '<div class="item active">'
+        + '<div class="carousel-item active">'
         + '<img alt="">'
         + '</div>'
         + '<script type="text/x-metamorph" id="thingy"/>'
-        + '<div class="item">'
+        + '<div class="carousel-item">'
         + '<img alt="">'
         + '</div>'
-        + '<div class="item">'
+        + '<div class="carousel-item">'
         + '</div>'
         + '</div>'
         + '</div>'
@@ -367,24 +367,24 @@ $(function () {
 
     $template.bootstrapCarousel()
 
-    strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
+    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
 
     $template.bootstrapCarousel(1)
 
-    strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
+    strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
   })
 
   test('should skip over non-items when using next/prev methods', function () {
     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">'
         + '<div class="carousel-inner">'
-        + '<div class="item active">'
+        + '<div class="carousel-item active">'
         + '<img alt="">'
         + '</div>'
         + '<script type="text/x-metamorph" id="thingy"/>'
-        + '<div class="item">'
+        + '<div class="carousel-item">'
         + '<img alt="">'
         + '</div>'
-        + '<div class="item">'
+        + '<div class="carousel-item">'
         + '</div>'
         + '</div>'
         + '</div>'
@@ -392,23 +392,23 @@ $(function () {
 
     $template.bootstrapCarousel()
 
-    strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
+    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
 
     $template.bootstrapCarousel('next')
 
-    strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
+    strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
   })
 
   test('should go to previous item if left arrow key is pressed', function () {
     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
         + '<div class="carousel-inner">'
-        + '<div id="first" class="item">'
+        + '<div id="first" class="carousel-item">'
         + '<img alt="">'
         + '</div>'
-        + '<div id="second" class="item active">'
+        + '<div id="second" class="carousel-item active">'
         + '<img alt="">'
         + '</div>'
-        + '<div id="third" class="item">'
+        + '<div id="third" class="carousel-item">'
         + '<img alt="">'
         + '</div>'
         + '</div>'
@@ -417,23 +417,23 @@ $(function () {
 
     $template.bootstrapCarousel()
 
-    strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
+    strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
 
     $template.trigger($.Event('keydown', { which: 37 }))
 
-    strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
+    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
   })
 
   test('should go to next item if right arrow key is pressed', function () {
     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
         + '<div class="carousel-inner">'
-        + '<div id="first" class="item active">'
+        + '<div id="first" class="carousel-item active">'
         + '<img alt="">'
         + '</div>'
-        + '<div id="second" class="item">'
+        + '<div id="second" class="carousel-item">'
         + '<img alt="">'
         + '</div>'
-        + '<div id="third" class="item">'
+        + '<div id="third" class="carousel-item">'
         + '<img alt="">'
         + '</div>'
         + '</div>'
@@ -442,23 +442,23 @@ $(function () {
 
     $template.bootstrapCarousel()
 
-    strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
+    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
 
     $template.trigger($.Event('keydown', { which: 39 }))
 
-    strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
+    strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
   })
 
   test('should support disabling the keyboard navigation', function () {
     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-keyboard="false">'
         + '<div class="carousel-inner">'
-        + '<div id="first" class="item active">'
+        + '<div id="first" class="carousel-item active">'
         + '<img alt="">'
         + '</div>'
-        + '<div id="second" class="item">'
+        + '<div id="second" class="carousel-item">'
         + '<img alt="">'
         + '</div>'
-        + '<div id="third" class="item">'
+        + '<div id="third" class="carousel-item">'
         + '<img alt="">'
         + '</div>'
         + '</div>'
@@ -467,29 +467,29 @@ $(function () {
 
     $template.bootstrapCarousel()
 
-    strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
+    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
 
     $template.trigger($.Event('keydown', { which: 39 }))
 
-    strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after right arrow press')
+    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after right arrow press')
 
     $template.trigger($.Event('keydown', { which: 37 }))
 
-    strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press')
+    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press')
   })
 
   test('should ignore keyboard events within <input>s and <textarea>s', function () {
     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
         + '<div class="carousel-inner">'
-        + '<div id="first" class="item active">'
+        + '<div id="first" class="carousel-item active">'
         + '<img alt="">'
         + '<input type="text" id="in-put">'
         + '<textarea id="text-area"></textarea>'
         + '</div>'
-        + '<div id="second" class="item">'
+        + '<div id="second" class="carousel-item">'
         + '<img alt="">'
         + '</div>'
-        + '<div id="third" class="item">'
+        + '<div id="third" class="carousel-item">'
         + '<img alt="">'
         + '</div>'
         + '</div>'
@@ -503,34 +503,34 @@ $(function () {
 
     $template.bootstrapCarousel()
 
-    strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
+    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
 
 
     $input.trigger($.Event('keydown', { which: 39 }))
-    strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <input>')
+    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <input>')
 
     $input.trigger($.Event('keydown', { which: 37 }))
-    strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <input>')
+    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <input>')
 
 
     $textarea.trigger($.Event('keydown', { which: 39 }))
-    strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <textarea>')
+    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <textarea>')
 
     $textarea.trigger($.Event('keydown', { which: 37 }))
-    strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <textarea>')
+    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <textarea>')
   })
 
   test('should only add mouseenter and mouseleave listeners when not on mobile', function () {
     var isMobile     = 'ontouchstart' in document.documentElement
     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-pause="hover">'
         + '<div class="carousel-inner">'
-        + '<div id="first" class="item active">'
+        + '<div id="first" class="carousel-item active">'
         + '<img alt="">'
         + '</div>'
-        + '<div id="second" class="item">'
+        + '<div id="second" class="carousel-item">'
         + '<img alt="">'
         + '</div>'
-        + '<div id="third" class="item">'
+        + '<div id="third" class="carousel-item">'
         + '<img alt="">'
         + '</div>'
         + '</div>'
@@ -550,13 +550,13 @@ $(function () {
         + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
         + '</ol>'
         + '<div class="carousel-inner">'
-        + '<div class="item active" id="one">'
+        + '<div class="carousel-item active" id="one">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="item" id="two">'
+        + '<div class="carousel-item" id="two">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="item" id="three">'
+        + '<div class="carousel-item" id="three">'
         + '<div class="carousel-caption"/>'
         + '</div>'
         + '</div>'
@@ -564,7 +564,7 @@ $(function () {
         + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
         + '</div>'
     var $carousel = $(carouselHTML)
-    var getActiveId = function () { return $carousel.find('.item.active').attr('id') }
+    var getActiveId = function () { return $carousel.find('.carousel-item.active').attr('id') }
 
     stop()
 
@@ -594,13 +594,13 @@ $(function () {
         + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
         + '</ol>'
         + '<div class="carousel-inner">'
-        + '<div class="item active" id="one">'
+        + '<div class="carousel-item active" id="one">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="item" id="two">'
+        + '<div class="carousel-item" id="two">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="item" id="three">'
+        + '<div class="carousel-item" id="three">'
         + '<div class="carousel-caption"/>'
         + '</div>'
         + '</div>'
@@ -613,7 +613,7 @@ $(function () {
 
     $carousel
       .on('slid.bs.carousel', function () {
-        strictEqual($carousel.find('.item.active').attr('id'), 'three', 'carousel wrapped around and slid from 1st to 3rd slide')
+        strictEqual($carousel.find('.carousel-item.active').attr('id'), 'three', 'carousel wrapped around and slid from 1st to 3rd slide')
         start()
       })
       .bootstrapCarousel('prev')
@@ -627,13 +627,13 @@ $(function () {
         + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
         + '</ol>'
         + '<div class="carousel-inner">'
-        + '<div class="item active" id="one">'
+        + '<div class="carousel-item active" id="one">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="item" id="two">'
+        + '<div class="carousel-item" id="two">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="item" id="three">'
+        + '<div class="carousel-item" id="three">'
         + '<div class="carousel-caption"/>'
         + '</div>'
         + '</div>'
@@ -641,7 +641,7 @@ $(function () {
         + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
         + '</div>'
     var $carousel = $(carouselHTML)
-    var getActiveId = function () { return $carousel.find('.item.active').attr('id') }
+    var getActiveId = function () { return $carousel.find('.carousel-item.active').attr('id') }
 
     stop()
 
@@ -672,13 +672,13 @@ $(function () {
         + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
         + '</ol>'
         + '<div class="carousel-inner">'
-        + '<div class="item active" id="one">'
+        + '<div class="carousel-item active" id="one">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="item" id="two">'
+        + '<div class="carousel-item" id="two">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="item" id="three">'
+        + '<div class="carousel-item" id="three">'
         + '<div class="carousel-caption"/>'
         + '</div>'
         + '</div>'
@@ -692,6 +692,6 @@ $(function () {
         ok(false, 'carousel slid when it should not have slid')
       })
       .bootstrapCarousel('prev')
-    strictEqual($carousel.find('.item.active').attr('id'), 'one', 'carousel did not wrap around and stayed on 1st slide')
+    strictEqual($carousel.find('.carousel-item.active').attr('id'), 'one', 'carousel did not wrap around and stayed on 1st slide')
   })
 })
diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html
index ee8cab63d7..5b071679fc 100644
--- a/js/tests/visual/carousel.html
+++ b/js/tests/visual/carousel.html
@@ -22,13 +22,13 @@
       <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
     </ol>
     <div class="carousel-inner">
-      <div class="item active">
+      <div class="carousel-item active">
         <img alt="First slide" src="http://37.media.tumblr.com/tumblr_m8tay0JcfG1qa42jro1_1280.jpg">
       </div>
-      <div class="item">
+      <div class="carousel-item">
         <img alt="Second slide" src="http://37.media.tumblr.com/tumblr_m8tazfiVYJ1qa42jro1_1280.jpg">
       </div>
-      <div class="item">
+      <div class="carousel-item">
         <img alt="Third slide" src="http://38.media.tumblr.com/tumblr_m8tb2rVsD31qa42jro1_1280.jpg">
       </div>
     </div>
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 72280028d2..4802aea4c9 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -13,7 +13,7 @@
   width: 100%;
   overflow: hidden;
 
-  > .item {
+  > .carousel-item {
     position: relative;
     display: none;
     transition: .6s ease-in-out left;