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> you have used the wrong class :
.carousel-control.left {
margin-left: -25px;
}
.carousel-control.right {
margin-right: -25px;
}
should be :(increased margin)
.carousel-control-prev {
margin-left: -100px;
}
.carousel-control-next {
margin-right: -100px;
}
demo:
.carousel {
margin: 1.5rem;
}
.carousel-inner {
height: auto;
}
.carousel-control-prev {
margin-left: -100px;
}
.carousel-control-next {
margin-right: -100px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>