Trying to set the text in the carousel so it spans only half the screen, keeping the text in the center

1
votes

I have a Bootstrap carousel with carouse-items as blackquotes. Currently it is working perfectly fine. I keep it in jumbotron because of the padding and background color. What I'm hoping to achieve is simply have the text appear in the center of the screen, having the width of col-lg-6, col-xs-12 but still keep the text in the middle. Right now, if you look at the link, it's col-lg-6 but the text appears all the way to the left.

Here's the codeply:

https://www.codeply.com/go/xulwussWF3

1
bootstrap-4carousel

1 Answers

1
votes

You can use mx-auto on the col-lg-6...

<div id="carouselContent" class="carousel slide col-lg-6 mx-auto" data-ride="carousel">
     <div class="carousel-inner" role="listbox">
          ...
     </div>    
</div>

Also, it would be better to use w-50 instead of col-lg-6 since you're not using a grid row.

 <div id="carouselContent" class="carousel slide w-50 mx-auto" data-ride="carousel">
     <div class="carousel-inner" role="listbox">
          ...
     </div>    
</div>

Use negative margins to allow more room for the arrows...

   <a class="carousel-control-prev ml-n5" href="#carouselContent" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next mr-n5" href="#carouselContent" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
   </a>

https://www.codeply.com/go/ZBwaLzuGT7