CODEWITHSUNDEEP
imagetwitter-bootstrapsizecarousel
user2016949
user2016949

Reputation: 233

twitter bootstrap carousel size

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.

Upvotes: 23

Views: 96575

Answers (2)

Arnold Daniels
Arnold Daniels

Reputation: 16553

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.

Upvotes: 36

Billy Moat
Billy Moat

Reputation: 21050

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">

Upvotes: 8

Related Questions