3

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>
Tony M
  • 241
  • 1
  • 4
  • 14
  • ' the links are only over the width and height of the arrows themselves' what do you mean by that ? – Gagantous Sep 16 '17 at 18:46
  • You could edit the css for the classes for carousel-control in order to change their size. Add a height attribute to the .carousel-control class. – MUlferts Sep 16 '17 at 18:50
  • O if you are talking about the actual glyphicon icon size you could add a class to the actual icon to change its size like in this question: https://stackoverflow.com/questions/18478365/bigger-glyphicons – MUlferts Sep 16 '17 at 18:52
  • Check out Jake Wilson's answer https://stackoverflow.com/questions/28678542/how-to-change-bootstraps-global-default-font-size – Roshni Kutty Sep 16 '17 at 18:56
  • @Gagantous No, if you take a look at the carousel in the link I posted and hover over the top right of the image, for example, you'll see that the link spans all the way to the top of the carousel...it's not just over the arrows themselves. – Tony M Sep 16 '17 at 18:58
  • @Michael_Ulferts I tried adding a height attribute to the .carousel-control class but that moves the position of the glyphicons so they are no longer centered vertically. – Tony M Sep 16 '17 at 19:00
  • You could try adding margin-top:auto and margin-bottom:auto maybe. I will try quick. – MUlferts Sep 16 '17 at 19:02
  • @RoshniKutty that is a cool site, thanks for sharing it. Unfortunately for the carousel it looks like they only let you customize the width there. – Tony M Sep 16 '17 at 19:04
  • Yah, actually the carousel controls use absolute positioning and top and bottom values, so I think it may be a bad idea to mess with those css attributes. You probably could do what you want by playing with the styles, but I would say that might invite some issues. – MUlferts Sep 16 '17 at 19:08
  • I tried messing with the sizes just changing styles in the browser developer tools and I think that @RoshniKutty is right here. It might be tough to change the height settings without janky results. You might want to just change the width if you don't like how big the slider controls are. I am sure you could do what you want, but it may be more work than its worth in getting it right. – MUlferts Sep 16 '17 at 19:16
  • Do you want to make the control link into like round-shaped hover ? – Gagantous Sep 16 '17 at 19:20

4 Answers4

5

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;
}
mikkel250
  • 61
  • 1
  • 2
3

add a class with 'carousel-control' and then add the following CSS. or you can directly add this CSS to your code

#carousel-example-generic a.carousel-control {
height: 26%;
top: 33%;
width: 86px;
background: black;
//add your own CSS as you need
}
Keshav Bhadouria
  • 199
  • 1
  • 11
1

add in both .carousel-control.left and .carousel-control.right,

//change the margin to make the width and height more longer or shorter
   margin: 100px 0;
//change the radius to make the point of the squared-hover looks rounded
   border-radius: 60px;
Gagantous
  • 432
  • 6
  • 29
  • 69
0

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

Mahdi Magdi
  • 1
  • 1