Weird movement on bootstrap carousel - css

Question

So I built this "testimonial" slider on my website using bootstrap's carousel plugin but for some reason the movement seems clunky when it changes slides.. I'm not sure if it's my doing on the CSS because I styled on top of some of the elements and I don't really know too much of CSS..
Anyway, here's my code:
HTML
<div class="container-fluid">
<div class="row testimonials">
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="text-center">Testimonials</h3>
</div>
</div>
<div class="carousel slide" id="testimonial_slider" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#testimonial_slider" data-slide-to="0" class="active"></li>
<li data-target="#testimonial_slider" data-slide-to="1"></li>
<li data-target="#testimonial_slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="row item active">
<div class="col-md-6 testimonial">
<img src="my-image-url.jpg">
<p><i class="fa fa-quote-left"></i> The content</p>
<span>The Title</span>
</div>
<div class="col-md-6 testimonial">
<img src="my-image-url.jpg">
<p><i class="fa fa-quote-left"></i> The content</p>
<span>The Title</span>
</div>
</div>
<div class="row item active">
<div class="col-md-6 testimonial">
<img src="my-image-url.jpg">
<p><i class="fa fa-quote-left"></i> The content</p>
<span>The Title</span>
</div>
<div class="col-md-6 testimonial">
<img src="my-image-url.jpg">
<p><i class="fa fa-quote-left"></i> The content</p>
<span>The Title</span>
</div>
</div>
<div class="row item active">
<div class="col-md-6 testimonial">
<img src="my-image-url.jpg">
<p><i class="fa fa-quote-left"></i> The content</p>
<span>The Title</span>
</div>
<div class="col-md-6 testimonial">
<img src="my-image-url.jpg">
<p><i class="fa fa-quote-left"></i> The content</p>
<span>The Title</span>
</div>
</div>
</div>
</div>
</div>
</div>
And the CSS:
.testimonials {
padding-bottom:30px;
}
.testimonial {
position:relative;
height:100px;
margin:10px 0 20px 0;
padding:0 20px 20px 120px;
box-sizing:border-box;
}
.testimonial p i {
color:#eb7022;
}
.testimonial span {
position:absolute;
bottom:0;
left:130px;
}
.testimonial img {
height:100px;
width:100px;
margin-right:120px;
border-radius:6px;
position:absolute;
top:0;
left:16px;
}
You can also see it live here.
Am I breaking something with these styles?
Any help appreciated, thanks!

Answer 1

Don't use .row with .item.
Apply .active class only to first item.
Instead of this:
<div class="row item active">
<div class="col-md-6 testimonial">
<img src="1.jpg">
<p><i class="fa fa-quote-left"></i> The content</p>
<span>The Title</span>
</div>
<div class="col-md-6 testimonial">
<img src="1.jpg">
<p><i class="fa fa-quote-left"></i> The content</p>
<span>The Title</span>
</div>
</div>
Use this:
<div class="item active">
<div class="row>
<div class="col-md-6 testimonial">
<img src="1.jpg">
<p><i class="fa fa-quote-left"></i> The content</p>
<span>The Title</span>
</div>
<div class="col-md-6 testimonial">
<img src="1.jpg">
<p><i class="fa fa-quote-left"></i> The content</p>
<span>The Title</span>
</div>
</div>
</div>