How to make carousel caption in Bootstrap responsive?

Question

I have been trying to make my carousel in Bootstrap 3.2 responsive. But I just can't seem to get my caption to resize with the image in my carousel. I think it has to do with the "item" class and how it doesn't resize with the browser. I think it might have to do with @media, but if it does, I don't know what to put there.

Here is what's going on.

Here is my basic HTML carousel slide:

<div class="item">
    <img src="http://goo.gl/PK4Kkh" alt="Third Slide">
    <div class="carousel-caption">
        <h1>Test</h1>
        <p>Test</p>
        <p><a class="btn btn-lg btn-primary" href="#button3" role="button">Button 3</a></p>
    </div> <!-- End of Carousel Caption -->
</div> <!-- End of Item -->

And my CSS:

.carousel
{
    height: 720px;
    margin-bottom: 0px;
}

.carousel-caption
{
    z-index: 10;
}

.carousel .item
{
    height: 720px;
    background-color: #777;
}

.carousel-inner > .item > img
{
    position: absolute;
        top: 51px;
        left: 0;
    min-width: 100%;
}

I made a fiddle that you can fix so it is a working example of the screenshot provided. See http://jsfiddle.net/KXYE5/ — Aibrean, Jul 22 '14 at 14:25

score 4 · Answer 1 · edited May 23 '17 at 12:17

I use something like this for responsive captions:

<script>
  $(document).ready(function() {
    $('.carousel .carousel-caption').css('zoom', $('.carousel').width()/1250);
  });

  $(window).resize(function() {
    $('.carousel .carousel-caption').css('zoom', $('.carousel').width()/1250);
  });
</script>

Where 1250 is the maximum pixel width of the slider in full mode.

Use percentages if you are positioning the caption by coordinates. If you wanna support all browsers see complete styles for cross browser CSS zoom and http://caniuse.com/#search=zoom.

Aibrean · Accepted Answer · 2017-04-17T17:44:27.670

2

The problem isn't that the carousel is not responsive. The problem is you have a fixed height on the carousel and carousel item. You'll need to provide more code than what you have now. What you have provided code-wise is not technically a carousel. If you want the background image to take up the entire screen, you should make it 100% height.

If what you are trying to achieve is a full-width/height carousel, check out http://www.bootply.com/89646

In tablet/mobile if it's just a matter of the space not being filled up correctly, you can use a media query to override the heights of the item and carousel and image at those breakpoints.

edited Apr 17 '17 at 17:44

answered Jul 22 '14 at 14:24

Aibrean

6,297
1
22
38

Not what I was exactly looking for, but it helps a lot. – Jul 22 '14 at 14:54
Well, text doesn't scale and your question isn't terribly specific. – Aibrean Jul 22 '14 at 14:59
links are broken. – erginduran Apr 16 '17 at 19:49

score 0 · Answer 3 · answered Oct 01 '14 at 09:23

These people. What you need my friend is a set of media queries which will then give you full control over the carousel elements on every screen, desktop, tablet and mobile. Text does in fact scale by default. Pretty ambitious to dive straight into bootstrap after just learning HTML - fair play.

These links may help. I would also suggest when your getting better try using LESS as this is much quicker for development.

http://www.revillweb.com/tutorials/bootstrap-tutorial/

http://www.sitepoint.com/responsive-web-design-tips-bootstrap-css/

How to make carousel caption in Bootstrap responsive?

3 Answers3