Question posted in 
I made a text only carousel in Bootstrap 4 beta. How can I get the arrows off of the slider area, outside of it? I tried searching Google and in here but came up with nothing. Since the carousel has only text, the carousel control arrows sit on top of some parts of the text.
Here is all of my code. I also added it to
https://codepen.io/mlegg10/pen/wrLJVN
.carousel {
margin: 1.5rem;
}
.carousel-inner {
height: auto;
}
.carousel-control.left {
margin-left: -25px;
}
.carousel-control.right {
margin-right: -25px;
}<script src="https://use.fontawesome.com/a0aac8df13.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="2000">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-md-6 active">
<blockquote class="blockquote">
<p>Attendees Rated The Program An Overwhelming Success. Your Tools, Techniques And Thought Provoking Ideas On Leadership, Communication Skills And Attitude Left Folks Wanting More.</p>
<footer class="blockquote-footer"><cite>Vickie Doyle, Vice President, Membership<br>
Tucson Convention & Visitors Bureau</cite></footer>
</blockquote>
</div>
<div class="carousel-item col">
<blockquote class="blockquote">
<p>Since Our Seminar, Our Management Team Has Taken More Responsibility In Working With All New Hires.</p>
<footer class="blockquote-footer"><cite>Dominic R. Palmiers, CEO<br>
Odyssey Foods, LLC</cite></footer>
</blockquote>
</div>
<div class="carousel-item col">
<blockquote class="blockquote text-center">
<p>"Our Most Concise Training To Date!</p>
<footer class="blockquote-footer"><cite>John Comeau<br>
Mohegan Sun Casino</cite></footer>
</blockquote>
</div>
<div class="carousel-item col">
<blockquote class="blockquote">
<p>Several Commented On How Mr. Scott Conveyed A Sense of Understanding And Genuine Desire To Provide Them With Concrete And Realistic Answers To The Questions And Concerns.</p>
<footer class="blockquote-footer"><cite>Maria Meza, Training & Development Manager<br>
Tohono O'odham Gaming Authority</cite></footer>
</blockquote>
</div>
<div class="carousel-item col">
<blockquote class="blockquote">
<p>It Was One Of The Best Trainings I've Ever Seen. Our Gaming Board Attended A Session And Just Loved It!</p>
<footer class="blockquote-footer"><cite>Marcus Diaz, Director of Training<br>
Casino Del Sol</cite></footer>
</blockquote>
</div>
<div class="carousel-item col">
<blockquote class="blockquote">
<p>Your Customer Service Training On November 11, 2003, Was One Of The Best Training Events I Have Ever Experienced!</p>
<footer class="blockquote-footer"><cite>Robert Taschetta, Help Desk Manager<br>
Best Western International</cite></footer>
</blockquote>
</div>
<div class="carousel-item col">
<blockquote class="blockquote">
<p>The Feedback That I Received From The Employees Was Overwhelming...The Information You Passed On & Taught Them Was Invaluable. I Have Seen Many Of The Golden Eagle Distributors Employees Use A Wide Variety Of The Techniques That You Taught On A Daily Basis & People Are Thinking About Their Actions.</p>
<footer class="blockquote-footer"><cite>Richard H. Wortman, Corporate Training Director<br>
Golden Eagle Distributors</cite></footer>
</blockquote>
</div>
<div class="carousel-item col">
<blockquote class="blockquote">
<p>In A Very Short Period of Time Our Level of Guest Service & Professionalism Has Dramatically Improved...You Built A Much Stronger And Confident Team.</p>
<footer class="blockquote-footer"><cite>Lynn W. Smith, General Manager<br>
Smuggler's Inn</cite></footer>
</blockquote>
</div>
<div class="carousel-item col">
<blockquote class="blockquote">
<p>I Was Skeptical About This Experiential Training, But It Was Phenomenal!</p>
<footer class="blockquote-footer"><cite>Ana Zysko, Director of Training<br>
Inn Of The Mountain Gods Resort & Casino</cite></footer>
</blockquote>
</div>
<div class="carousel-item col">
<blockquote class="blockquote">
<p>Peter Scott's Programs Are All About Content & Core Values.</p>
<footer class="blockquote-footer"><cite>Dr. Thomas Dullien, Executive Director Human Resources & HR Development<br>
Barona Resort & Casino</cite></footer>
</blockquote>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<i style="color:#FF8C46; text-decoration: none;" class="fa fa-chevron-circle-left fa-2x"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
<i style="color:#FF8C46; text-decoration: none;" class="fa fa-chevron-circle-right fa-2x"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="clearfix"></div>
2
Answers
you have used the wrong class :
should be :(increased margin)
demo:
I would like to confirm G-Cyr’s solution, but point out one problem and therefore propose another solution.
Problem
If you use margin values, you only move the element relatively away from its actual position. Since the carousel arrows have been moved outwards, they may not be visible. This is the case if the slider is the only content element on your page and the viewport is unfavorable. See pictures below:
Here, the arrows are visible as the viewport is favorable.
Here, the browser did not switch to the next breakpoint, so the carousel arrows are not visible as they are moved away from their original position.
Solution:
Therefore, I would like to propose a solution based on the flex classes that Bootstrap offers. First of all, we have to take the absolute position of the arrows (see Css below). Then we rearrange the elements in the HTML document to 1) carousel-control-prev, 2) carousel-inner and 3) carousel-control-next. In addition we have to add the Flex classes to the carousel container. In my example these are the classes “d-flex justify-content-around align-items-center”. To ensure that the arrows are clickable over the entire height of the slider, you must give them the classes “align-self-stretch”. This is my example:
Css
HTML
Notes: Since the arrows are white by default, you may have to color them differently. In my example I did without the filling of the Carousel items because of the clarity. I am open to suggestions for improvement.