Bootstrap 4 - Change Position of Carousel Controls

Bootstrap 4 - change position of carousel controls

In the latest Bootstrap v4 Beta, the distance of the carousel controls from the bottom of the carousel is controlled by the bottom CSS attribute.

Therefore, it's fairly easy to control the placing of the left and right carousel control icons by setting the bottom percentage. Here's an example where I place them about 75% of the way from the center of the carousel.

.carousel-control-prev,
.carousel-control-next{
      bottom: 75%;
}

Here's a working codepen: https://codepen.io/Washable/pen/xPYJma?editors=1100

How to position the bootstrap carousel controls to the extreme right and extreme left?

you can update the element style

.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
  right: 0;  //or you can increase this
}

.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
  left: 0; //or you can increase this
}

How to position carousel indicators in Bootstrap 4

Setting bottom: -50px on .carousel-indicators works fine to move the indicators below the carousel, however the result is not visible because of the overflow: hidden, as you suspected correctly. The indicators are simply clipped, as they get out of the bounding box of the carousel.

Instead of setting the height and the overflow property of the #slider itself, I would suggest to fix the height via the .carousel-item class like as follows:

.carousel-item {
    height: 350px;
}

.carousel-indicators li {
    width: 10px;
    height: 10px;
    border-radius: 100%;
}
.carousel-indicators {
    bottom: -50px;
}

This is not interfering with the positioning of the indicators.

A working example is available as a Codepen.

How do i customize the Bootstrap 4 carousel controls background shape?

The controls can be positioned absolute. As it then collapses it requires a new dimension (width/height). Also the z-index is important to make sure both arrows are accessible.

.controls {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    bottom: 20px;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
    height: 40px;
    position: absolute;
    right: 20px;
    width: 100px;
    z-index: 999;
}

.carousel-control-prev,
.carousel-control-next {
    width: 50%;
}

Please note I've only worked out the functionality. I'll leave the design to you.

DEMO

Bootstrap 4 beta carousel arrows outside slider area

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>

Bootstrap 4 Carousel Indicators positioning

Just override justify-content and margin of carousel-indicator then add padding as below.Also wrap indicators inside container and make it as position:relative by adding predefined class position-relative to it.

.my-slider .carousel-indicators {  top: 10px;  justify-content:flex-start;  margin:0;  padding-left:15px;  padding-right:15px;}
.carousel-indicators li {  width: 20px;  height: 20px;  border-radius: 100%;}
.carousel-indicators li:not(:last-child) {  margin-right: 20px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container">  <nav class="navbar navbar-light bg-light">    <a class="navbar-brand" href="#">Navbar</a>  </nav></div>
<div id="carousel" class="my-slider carousel slide" data-ride="carousel">  <div class="container position-relative">  <ol class="carousel-indicators">    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>    <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>  </ol> </div>  <div class="carousel-inner">    <div class="carousel-item active">      <img class="d-block w-100" src="http://via.placeholder.com/800x300" alt="First slide">    </div>    <div class="carousel-item">      <img class="d-block w-100" src="http://via.placeholder.com/800x300" alt="Second slide">    </div>    <div class="carousel-item">      <img class="d-block w-100" src="http://via.placeholder.com/800x300" alt="Third slide">    </div>    <div class="carousel-item">      <img class="d-block w-100" src="http://via.placeholder.com/800x300" alt="Fourth slide">    </div>  </div></div>

Change carousel left/right position - Bootstrap-3/HTML

edit the following CSS:

.carousel-control {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 8%;  /* change this value to required width */
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  background-color: rgba(0, 0, 0, 0);
  filter: alpha(opacity=50);
  opacity: .5;
}

Bootstrap 4 - Change Position of Carousel Controls