Skip to main content
L
larrycfc
Inspiring
October 26, 2017
Answered

Centering bootstrap carousel

  • October 26, 2017
  • 1 reply
  • 42010 views

When this site was last edited 3-4 months ago, I think I remember the images being centered on desktop, with gray bars on either side. I just learned that is no longer the case. Perhaps bootstrap was updated? Or I just have a faulty memory. In any case, I seem to be missing something and would like to center the images horizontally.

2017 Festival Photos | Durham Blues & Brews Festival

Somewhat related, the images are on the small side at 640px wide. A later edit project is to build multiple sizes using srcset. An article referenced on this forum is from 2014. Is it still a recommended method in 2017 (nearly 2018)?

This topic has been closed for replies.
Correct answer BenPleysier

Add either of the following two style rules to the bottom of your CSS

If you want the image to expand full width - no centering required

.carousel img {

     width: 100%;

     height: auto;

}

If you just want to center the image

.carousel img {

     margin: auto;

}

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
October 26, 2017

What's this for?

<link href="http://getbootstrap.com/examples/carousel/carousel.css" rel="stylesheet">

It's 404 Not Found.  And besides, GetBootstrap is not a CDN.

Bigger images would help a lot.   Try adding this to your custom CSS.

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

And don't forget to fix your code errors.

Showing results for http://www.durhambluesandbrewsfestival.com/photos/2017.htm - Nu Html Checker

Nancy O'Shea— Product User & Community Expert
L
larrycfcAuthor
Inspiring
October 26, 2017

I don't know what that getbootstrap link was about. I didn't build the original framework. But I removed it without apparent consequence. I also did the other suggested edits but images are still not centered.

BenPleysier
Community Expert
BenPleysierCommunity ExpertCorrect answer
Community Expert
October 26, 2017

Add either of the following two style rules to the bottom of your CSS

If you want the image to expand full width - no centering required

.carousel img {

     width: 100%;

     height: auto;

}

If you just want to center the image

.carousel img {

     margin: auto;

}

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices