I have tried to reduce the width of my carousel so that it doesn't take up the whole width of the page but it doesn't seem to be working. I would like the width to only span over 8 columns and to be centred. I have tried changing the CSS code so that the width was 50% and not 100% but this did not work.
.item {
height: 300px;
}
.item,
img {
height: 500px !important;
width: 100% !important;
}
.item h3 {
font-family: 'Anton', sans-serif;
font-size: 48px;
color: cornsilk;
}
.item p {
font-family: 'Anton', sans-serif;
font-size: 18px;
color: cornsilk;
}<!--Start of carousel-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"> </li>
<li data-target="#carousel-example-generic" data-slide-to="1"> </li>
<li data-target="#carousel-example-generic" data-slide-to="2"> </li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/c1.jpg" alt="First slide" />
<div class="carousel-caption">
<h3>Welcome to my amazing website</h3>
<p3>Hope you enjoy!</p3>
</div>
</div>
<div class="item">
<img src="images/c2.jpg" alt="Second slide" />
</div>
<div class="item">
<img src="images/c3.jpg" alt="Third slide" />
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>Why wouldn't you work with the upper level, i.e. with the outer div element (id="carousel-example-generic" class="carousel slide")?
E.g.
.carousel{
width: 50%;
margin: 0 auto;
}
With bootstrap you could also use the bootstrap-grid including offsets: https://getbootstrap.com/docs/4.0/layout/grid/