Slide on Bootstrap 3 Carousel error - html

Question

I'm working with a Bootstrap 3 carousel. Here is what I have done far, I want it to look similar to this.
Why does the slide preview from column 2 anytime I click the arrows? Is there a way to hide the preview from showing up when clicking next/previous
Anytime I click past two slides, it errors out and doesn't go back to the first slide.
<style type="text/css">
/* #information, #video {
width: 50%; //CSS styling for table tags.
} */
.linebreak {
display: none;
}
.image {
float: left!important;
}
.carousel slide {
width: 400px;
}
.text {
width: 45%!important;
float: right!important;
right: 14px!important;
/* top: 10px!important; */
margin-right: 35px!important;
/* margin-top: 20px!important; */
}
.carousel-inner {
overflow: visible;
}
.carousel img {
border-radius: 0px;
width: 140px;
margin-right: 10px;
margin-left: 80px;
}
.carousel-control active {
position: fixed;
}
.carousel {
margin-top: 40px;
}
.firstcolumn {
width: 1000px;
}
/*.video-container {
/*position:relative;
padding-bottom:315px;
padding-top:10px; /* width: 100% ;* max-width: 500px; padding-right:0px;
/*max-height:530px; overflow: auto;
border: none;
}
.video-container img {
position:absolute;
top:0;
left:0;
width:100%;
max-width: 500px;
max-height:530px;
height:100%;
margin: 0px;*/
/*}*/
</style>
<div class="firstcolumn">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <!-- DIV 1 BEGIN -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img class="image" src="https://www.evantage-technology.com/wp-content/uploads/2015/04/product_office365.jpg" alt="Los Angeles">
<div class="text">Office 365 is the brand name Microsoft uses for a group of subscriptions that provide productivity software and related services.</div>
</div>
<div class="item">
<img class="image" src="http://office365.ecolearning.eu/img/office_icos/delve-logo.png" alt="Chicago">
<div class="text">Microsoft Office Delve is a data visualization and discovery tool that incorporates elements of social networking and machine learning with the search capability of the Microsoft Office 365 suite.</div>
</div>
<!-- <div class="item">
<img src="ny.jpg" alt="New York">
</div>
</div> -->
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev" style="margin-top: 50px">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next" style="margin-top: 50px">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div> <!-- DIV 1 END -->
<div class="secondcolumn">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<center><h3>WHAT DO YOU WANT TO DO?</h3></center>
<br/>
<div class="row">
<div class="col-sm-6" align="center">.col-sm-3</div>
<div class="col-sm-6" align="center">.col-sm-6</div>
</div>
<div class="row">
<div class="col-sm-6" align="center">.col-sm-3</div>
<div class="col-sm-6" align="center">.col-sm-6</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

If you make use of the Bootstrap Grid inside your Carousel component you can avoid using any customized CSS. You just need to structure your HTML accordingly:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-6">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-4"><img class="img-responsive" src="https://www.evantage-technology.com/wp-content/uploads/2015/04/product_office365.jpg" alt="Los Angeles"></div>
<div class="col-xs-8">Office 365 is the brand name Microsoft uses for a group of subscriptions that provide productivity software and related services.</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-2"><img class="img-responsive" src="http://office365.ecolearning.eu/img/office_icos/delve-logo.png" alt="Chicago"></div>
<div class="col-xs-10">Microsoft Office Delve is a data visualization and discovery tool that incorporates elements of social networking and machine learning with the search capability of the Microsoft Office 365 suite.</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>
</div>
</div>
<div class="col-xs-12 col-md-6">
<h3 class="text-center">WHAT DO YOU WANT TO DO?</h3>
<div class="row">
<div class="col-sm-6 text-center">A</div>
<div class="col-sm-6 text-center">B</div>
</div>
<div class="row">
<div class="col-sm-6 text-center">C</div>
<div class="col-sm-6 text-center">D</div>
</div>
</div>
</div>
</div>
You may need to expand the snippet to view its responsive nature. I would also point out that you were using elements like <center> which were depreciated, or attributes like align="center" on your <div> elements. You should use CSS for this sort of positioning, which with respect to Bootstrap would involve applying the text-center class to the element whose contents you wish to be centered.