Text aligning in Bootstrap Carousel - html

Question

I had one problem with centering the image in a carousel (fortunately I found the answer here) and now I got into another problem, aligning the text. More precise, I want the image (it a fixed size image 400x400) to be on the left side with text on the right side. Any suggestions ?
HTML:
<!-- Start Carousel -->
<div id="product-detail carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="carousel-img"></div>
<div class="carousel-text">
<p class="cat-title pull-right">Mercury</p>
<p class="cat-icon pull-right">^^^^^</p>
<p class="caption-text pull-right">Movie buff Tony Chou (Tony Zhou) published in his Vimeo video review with an analysis of the demonstration set of SMS and other text messages in modern cinema.</p>
</div>
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left control-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right control-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- End Carousel -->
CSS :
/*************************
CAROUSEL
*************************/
.carousel .carousel-inner {
height: 550px;
background: #faf9f9;
}
.carousel-control.right,
.carousel-control.left {
background-image: none;
}
.control-icon {
color: #393939;
text-shadow: none;
}
.item {
position: relative;
height: 100%;
}
.carousel-img {
width: 400px;
height: 400px;
background-image: url('../img/jewelery.jpg');
background-size: cover;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel-text .cat-icon {
text-shadow: none;
margin-left: 0;
}
.carousel-text .caption-text {
color: #b7b7b7;
font-size: 18px;
font-weight: 300;
line-height: 30px;
text-align: left;
}

Answer 1

This should work. I set the carousel text to display inline block and gave it a left of 400px you can study the rest (there's not much else) here;s a fiddle
// invoke the carousel
$('#myCarousel').carousel({
interval: 3000
});
/* SLIDE ON CLICK */
$('.carousel-linked-nav > li > a').click(function () {
// grab href, remove pound sign, convert to number
var item = Number($(this).attr('href').substring(1));
// slide to number -1 (account for zero indexing)
$('#myCarousel').carousel(item - 1);
// remove current active class
$('.carousel-linked-nav .active').removeClass('active');
// add active class to just clicked on item
$(this).parent().addClass('active');
// don't follow the link
return false;
});
/* AUTOPLAY NAV HIGHLIGHT */
// bind 'slide' function
$('#myCarousel').bind('slide', function () {
// remove active class
$('.carousel-linked-nav .active').removeClass('active');
// get index of currently active item
var idx = $('#myCarousel .item.active').index();
// select currently active item and add active class
$('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
});
.carousel-slide {
width:100%;
height:550px;
background: #faf9f9;
}
.carousel .carousel-inner {
height: 550px;
width:900px;
margin-left:auto;
margin-right:auto;
background: #faf9f9;
}
.carousel-control.right, .carousel-control.left {
background-image: none;
}
.control-icon {
color: #393939;
text-shadow: none;
}
.item {
position: relative;
height: 100%;
}
.carousel-text {
left:400px!important;
display:inline-block;
}
.carousel-img {
width: 400px;
height: 400px;
/* background-image: url('http://rachelgallen.com/images/purpleflowers.jpg');*/
background-size: cover;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel-text p.cat-icon {
text-shadow: none;
left: 407px;
position:relative;
top:30px;
}
.carousel-text p.cat-title {
text-shadow: none;
left:380px;
width:250px;
position:relative;
font-size: 20px;
font-weight: 500;
line-height: 30px;
}
.carousel-text p.caption-text {
top:31px;
left:420px;
width:290px;
position:relative;
color: #b7b7b7;
font-size: 18px;
font-weight: 300;
line-height: 30px;
}
.glyphicon.glyphicon-chevron-right.control-icon {
margin-right:-30px;
width:15px;
position:absolute;
color: #393939;
text-shadow: none;
}
.glyphicon.glyphicon-chevron-left.control-icon {
margin-left:-45px;
width:15px;
position:absolute;
color: #393939;
text-shadow: none;
}
.carousel-linked-nav {
width: 120px;
margin-left:40%!important;
margin-right:40%;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="carousel-img">
<img src="http://rachelgallen.com/images/purpleflowers.jpg" width="400" height="400"></img>
</div>
<div class="carousel-text">
<p class="cat-title pull-right">Mercury</p>
<p class="cat-icon pull-right">^^^^^</p>
<p class="caption-text">Movie buff Tony Chou (Tony Zhou) published in his Vimeo video review with an analysis of the demonstration set of SMS and other text messages in modern cinema.</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-img">
<img src="http://rachelgallen.com/images/daisies.jpg" width="400" height="400"></img>
</div>
<div class="carousel-text">
<p class="cat-title pull-right">Venus</p>
<p class="cat-icon pull-right">^^^^^</p>
<p class="caption-text">Aren't these flowers lovely? Especially in this lovely slider. Lol.</p>
</div>
</div>
</div>
</div>
<!-- Controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left control-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right control-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<ol class="carousel-linked-nav pagination">
<li class="active">•
</li>
<li>•
</li>
<li>•
</li>
</ol>
</div>

Answer 2

I have some modified your html code, I think this code use for you
<!-- Start Carousel -->
<div id="product-detail carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-md-6">
<img src="..." alt="...">
</div>
<div class="col-md-6">
<div class="carousel-text">
<p class="cat-title pull-right">Mercury</p>
<p class="cat-icon pull-right">^^^^^</p>
<p class="caption-text pull-right">Movie buff Tony Chou (Tony Zhou) published in his Vimeo video review with an analysis of the demonstration set of SMS and other text messages in modern cinema.</p>
<p class="cat-title pull-right">Mercury</p>
<p class="cat-icon pull-right">^^^^^</p>
<p class="caption-text pull-right">Movie buff Tony Chou (Tony Zhou) published in his Vimeo video review with an analysis of the demonstration set of SMS and other text messages in modern cinema.</p>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="item">
<div class="col-md-6">
<img src="..." alt="...">
</div>
<div class="col-md-6">
<div class="carousel-text">
<p class="cat-title pull-right">Mercury</p>
<p class="cat-icon pull-right">^^^^^</p>
<p class="caption-text pull-right">Movie buff Tony Chou (Tony Zhou) published in his Vimeo video review with an analysis of the demonstration set of SMS and other text messages in modern cinema.</p>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left control-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right control-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>