Matthew John Matthew John - 1 year ago 121
HTML Question

Keeping html carousel inline

<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;

<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania" width="460" height="345">

<div class="item">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">

<div class="item">
<img src="img_flower.jpg" alt="Flower" width="460" height="345">

<div class="item">
<img src="img_flower2.jpg" alt="Flower" width="460" height="345">

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>


I'm very new to HTML and coding but I'm trying to out a basic bootstrap carousel on my website. When I do it moves everything around and the next/previous buttons are also not where they are supposed to be. Any help would be appreciated

Answer Source

Override the below bootstrap classes in your <style>

.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {margin-right: 200px}
.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {margin-left: 200px}
.carousel-control {width :0%;}

The first two classes will push the next and prev arrows inline. The third class will remove the excess white space of the carousel.

Hope this helps.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download