23

I'm creating a website for my dad using Twitter Bootstrap, it's done except for one thing: I can't figure out how to:
- reduce the carousel width
- center the carousel
- make scroll arrows still on image

here is the website so you can check the source

I've literally gone line by line through the css and adjusted every aspect of the carousel and then checked it in my browser.

Another point of confusion is that some of these adjustments have an effect if i test it in my browser with SHIFT+CTRL+R (so notepad++ opens it in google chrome directly from my desktop w/o using a server or host) and have seen some awkward changes, yet none of these changes carry over when I place them on the server.

I've seen some other posts suggesting adjustments to .carousel and @image and have tried those without success as well.

Rob Kielty
  • 7,958
  • 8
  • 39
  • 51
user2016949
  • 233
  • 1
  • 2
  • 4

2 Answers2

36

You can just set the width of the carousel using CSS. Centering a block element is done with margin: 0 auto. Only change the CSS of .carousel, the rest is automatically styled correctly.

<div id="myCarousel" class="carousel slide" style="width: 400px; margin: 0 auto">
    ...
</div>

Check out this jsfiddle to see it work.

Arnold Daniels
  • 16,516
  • 4
  • 53
  • 82
  • Sorry, i meant make it so that the scroll arrows remain centered on the left and right side of the image, rather than on the left and right edge of the web page. Thank you! Your solution worked perfectly! Now i just have to figure out what part of the carousel i messed up to make it scroll again. – user2016949 Feb 05 '13 at 07:42
8

Simply add a class of 'container' onto the DIV with an ID of 'myCarousel'.

So this...

<div id="myCarousel" class="carousel slide">

Becomes...

<div id="myCarousel" class="carousel slide container">
Billy Moat
  • 20,792
  • 7
  • 45
  • 37