How do you change the size of bootstrap carousel control links?

user_8228666 0
Viewed 11201

The default bootstrap carousel controls (left and right arrows) have links that span 100% of the height of the image in the carousel. I apologize as this may be a silly question, but how do you change this so that the links are only over the width and height of the arrows themselves?

You can see an example of what I mean under "Carousel" on the Boostrap docs(https://getbootstrap.com/docs/3.3/javascript/#carousel), and the code for the carousel is below.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
twitter-bootstrap css html
4 Answers

I ended up here after doing a Google search, figured out on my own, so I'm adding my solution for Bootstrap 4.x so others can find this easy solution. Since the icons are SVGs, adjusting BOTH the height and width will change the size of the icons. I had assumed they would change size if I increased the width, but that's not the case. I used vw so they scale along with the screen, but you can use whatever units you want.

.carousel-control-next-icon,
.carousel-control-prev-icon {
  width: 5vw;
  height: 5vw;
}
user_77343720

add max-height & margin-top css values

<a style=" max-height:21%; margin-top:21%; " .....

to visually see the changes ( make aria-hidden="false" in first <span> & add background-color:blue; in <a> )

// note i tried this in bootstrap 4 not sure about 3

user_95142960
Related