react-bootstrap carousel width behavior

Question

I would like to know what is the "correct solution" as how to display a carousel correctly in a page or how you would do it.

http://i.imgur.com/m8VYVRv.png

The code from react-bootstrap components website

             <Well>
                <Carousel>
                    <Carousel.Item>
                        <img width={900} height={500} alt="900x500" src="src/assets/construction-maison.jpg"/>
                        <Carousel.Caption>
                            <h3>First slide label</h3>
                            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                        </Carousel.Caption>
                    </Carousel.Item>
                    <Carousel.Item>
                        <img width={900} height={500} alt="900x500" src="src/assets/chantier.jpg"/>
                        <Carousel.Caption>
                            <h3>Second slide label</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </Carousel.Caption>
                    </Carousel.Item>
                    <Carousel.Item>
                        <img width={900} height={500} alt="900x500" src="src/assets/Maison_en_construction_Demoli.jpg"/>
                        <Carousel.Caption>
                            <h3>Third slide label</h3>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                        </Carousel.Caption>
                    </Carousel.Item>
                </Carousel>
            </Well>

http://i.imgur.com/BgqNfTE.png

img {
    margin: auto;
}

This is the solution I came with, but it feels kind of "off".

Should the carousel be shrinked with an auto margin to match the size of the pictures, then center it on the page ?

Solution

You could try to set .carousel to a fixed dimension equal to your images and then work on alignment as desired:

.carousel {
  width:900px;
  height:500px;
  margin: auto;
}

EDIT based on comment, to preserve responsiveness use a media query (Also bear in mind that unless you specify dimensions between carousel and your images they won't just match):

@media (max-width: 900px) {
    .carousel {
      width:auto;
      height:auto;
    }
}

Comments

[Victor Jozwicki]

EDIT : Yeah but that make the responsiveness of the component off, by that I mean that when you are below 900px width the carousel won't shrink on its own. Nevemind, I guess a small: max-width: 900px; Would correct it.

[Syden]

I edited above, hope helps. Yea a max-width could also work.