How do I style this bootstrap carousel?

Question

I have this bootstrap carousel(v4) and I want to change its style, mainly its margins. I am actually hiding the main part of the carousel and I am keeping the thumbnails only because I want eventually to end-up with something like a thumbnail slider only.

I dont know however how to get rid of all the space around it (a few pixels padding would be fine...). Also, how do I make the thumbnails bigger please?

Many thanks

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Carousel</title>

    <!--jquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- bootstrap -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  <style>
body {
    background-color: #CACACA
}

.container {
    margin-top: 100px;
    margin-bottom: 100px
}

.carousel-inner img {
    width: 100%;
    height: 100%
}

#custCarousel .carousel-indicators {
    position: static;
    margin-top: 20px
}

#custCarousel .carousel-indicators>li {
    width: 100px
}

#custCarousel .carousel-indicators li img {
    display: block;
    opacity: 0.5
}

#custCarousel .carousel-indicators li.active img {
    opacity: 1
}

#custCarousel .carousel-indicators li:hover img {
    opacity: 0.75
}

.carousel-item img {
    width: 80%
}
  </style>
</head>
<body style="margin:0; padding:0;">


<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="custCarousel" class="carousel slide" align="center">
                <!-- slides -->
                <div class="carousel-inner" style="display: none;">
                    <div class="carousel-item active"> <img src="https://i.imgur.com/weXVL8M.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/Rpxx6wU.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/83fandJ.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" alt="Hills"> </div>
                </div>

              <!-- Thumbnails -->
                <ol class="carousel-indicators list-inline">
                    <li class="list-inline-item active"> <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#custCarousel"> <img src="https://i.imgur.com/weXVL8M.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-1" data-slide-to="1" data-target="#custCarousel"> <img src="https://i.imgur.com/Rpxx6wU.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="2" data-target="#custCarousel"> <img src="https://i.imgur.com/83fandJ.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-3" data-slide-to="3" data-target="#custCarousel"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" class="img-fluid"> </a> </li>
                </ol>
            </div>
        </div>
    </div>
</div>
<script>

$(document).ready(function () {
  $('#custCarousel').on('slide.bs.carousel', function (e) {
    console.log('Showing picture ' + e.to)
  });
});
</script>
</body>
</html>

When you say, "I dont know however how to get rid of all the space around it", what is it? the whole carousel itself? — ellitt, Apr 02 '20 at 19:47
If I understand html correctly, those thumbnails should start from the top left corner of the page. However they are too far from the top left corner because of some margin that has been defined somewhere. It is this space I am talking about. I hope this makes sense, If not then I must have misunderstood the concepts. — Aenaon, Apr 02 '20 at 19:58
Also, to add that here are those two margins in css (margin-top and margin-bottom which is 100px each) but If I remove these the thumbnails go closer to the top of the page but there is still some space on the left. — Aenaon, Apr 02 '20 at 20:06

score 1 · Accepted Answer · answered Apr 02 '20 at 20:19

1

Really, you're trying to use this carousel in a way that it wasn't intended to be used so it's going to be an uphill battle to get it to work like you want. Hiding the main image means the thumbnails are still going to be centered because that's how the carousel is intended to work.

The thumbnails themselves can be bigger if you change this to something larger than 100px:

#custCarousel .carousel-indicators>li {
    width: 100px
}

To scoot the thumbnails to the left and out of the middle you need to do something like this:

.carousel-indicators {
  justify-content: flex-start;
  margin-right: 0;
  margin-left: 0;
}

answered Apr 02 '20 at 20:19

ellitt

787
5
17

Thanks for your advice. I do agree with you, I am abusing the carousel. Do you have anything in mind that would be better please. I want to do a control put 4 thumbnails in it, one next to another, (collapsible into one would be really cool) click on one and then something happens elsewhere on the page – Aenaon Apr 02 '20 at 20:26
Answer accepted, but to anyone reading this, its most valuable point is in the very first sentence ".... you're trying to use this carousel in a way that it wasn't intended to be used..." – Aenaon Apr 03 '20 at 15:21

How do I style this bootstrap carousel?

1 Answers1