1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: centring images in carousel and specifying height

Chris Sweeney pro asked 5 years ago

Hi On page http://www.rotary-ribi.org/clubs/pageV4carousel.php?PgID=169335&ClubID=1103 you can see that there is a mix of portrait and landscape images, of different sizes. As a result, the text below the images moves up and down, according to which image is being displayed. How can I a) Centre the images b) specify the height of the container? (I've tried a media query, to no effect) Many thanks Chris

Marta Wierzbicka staff answered 5 years ago

Hi Chris, Ok then, write here If you will have any other problems. Best, Marta

Chris Sweeney pro answered 5 years ago

Just realised that specifying the max-height on the page doesn't work responsively, so have created a stylesheet with appropriate media queries, which appears to work OK, though haven't tested it extensively yet. Chris

Chris Sweeney pro answered 5 years ago

Thanks you both for your help. I have the carousel working fine, having specified the justify-content-center class and given each image a max-height of 500px. http://www.rotary-ribi.org/clubs/pageV4carousel.php?PgID=169335&ClubID=1103 The image captions display properly too! Cheers Chris PS - the support on mdbootstrap is fantastic!

Marta Wierzbicka staff answered 5 years ago

Hi, you can do as xardonik wrote above or you can add bootstrap class .justify-content-center to each .carousel-item. And also about second thing xardonik is right. Best, Marta

xardonik free answered 5 years ago

a) .carousel-item > .view.hm-black-light { display: flex; justify-content: center; width: 100%; } b) if you set static height(I think you get max height of all images), on images there width is higher than height you probably won't see your description and your indicators because img will be on top of container and your desc on bottom of container, background of body is white and your description too.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
Chris Sweeney
Pro User 317Support score
25Questions 51Answers 0Snippets