Попытка установить текст в карусели так, чтобы он занимал только половину экрана, сохраняя текст в центре

Question

У меня есть карусель Bootstrap с элементами карусели в виде черных кавычек. В настоящее время работает отлично. Я держу это в jumbotron из-за отступа и цвета фона. То, чего я надеюсь добиться, - это просто отобразить текст в центре экрана шириной col-lg-6, col-xs-12, но при этом оставить текст посередине. Прямо сейчас, если вы посмотрите на ссылку, это col-lg-6, но текст отображается полностью слева.

Вот кодовый блок:

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

Answer 1

Вы можете использовать mx-auto на 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>   

Кроме того, было бы лучше использовать w-50 вместо col-lg-6, поскольку вы не используете строку сетки.

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

Используйте отрицательные поля, чтобы освободить место для стрелок ...

   <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