How do you Decrease Carousel size

Bootstrap Studio Help
1

Hello, I added the carousel to my project and it is working fine. However, it is way to big. I have decreased the images a few times and it still takes up the entire screen. Can you please tell me and provide the steps in decreasing the carousel. Thanks

2

@ccs3

The carousel component naturally fills the available space of it's container element. So you have to put it in something that you've applied a width restriction to, like a DIV element for instance. There are ways to handle this based on your design. You can put it in a DIV element like I suggested earlier where you add CSS to your design that restricts the width of that DIV that then limits the width of the carousel. For example setting a DIV to 300px wide.

<div class="300-px-wide">
    ...Carousel Code...
</div>

And then setting the CSS code

.300-px-wide {
    width: 300px;
}

OR you can use a row and column(s) with changing the column sizes to your liking.

<div class="row">
    <div class="col-md-4">
        ...Carousel Code...
    </div>
</div>

Saj saj.bss.design

1 Like
3

Saj, I am sorry i meant to ask how to decreased the height. The width is fine but it is too tall.When you open it in a webpage it takes up the entire screen, then you have to scroll down to look at the content.

4

The carousel height is set by the height of the image.

5

@ccc3, Printninja is right. You could set CSS on the image element so that at certain screen sizes (using media queries) the image has a max-height setting. This will effect the width as well because it's going to effect the ratio/dimensions of the image. If your image is in 4/3 (pretty square) it's going to stay that way it's not going to magically change to 16/9 (wide screen). You could force those dimension but then your image will look all weird, stretched and skewed. If you have a 800x600 pixel image, then you change the images height to 200px, the image won't be 800x200 it would naturally resize to be 267x200.

Saj saj.bss.design

1 Like
6

Thank you all!! I'll try that.

7

@saj and @Printninja, What is the "standard" or a good size for images? I'm new at this and want it to look good and right. Right now it's taking up the entire screen.