CODEWITHSUNDEEP
twitter-bootstrap
Richlewis
Richlewis

Reputation: 15374

Twitter Bootstrap Spans

I am trying to use NivoSlider for my image scroller and would like to place it in a div in the center of the page near the top, just under the navbar( Like a lot of sites out there).

What i would like to achieve is to make it fluid (already is with max-width 100% I know), however as it fills the parent container it looks massive on the page and overpowers everything.

is there a span i can use that will stay centered on the page or if i specify the width and height of the Nivo wrapper how would i keep this fluid. I just cant seem to work it out, if anyone can point me in the right direction it would be much appreciated

EDIT Ok so i have created a span2, span8, span2 and placed the nivoslider in span8, now this has centered the slider but im guessing there is a better way

Upvotes: 0

Views: 1410

Answers (1)

Theo
Theo

Reputation: 2799

You can do this instead of what you're currently doing (it accomplishes the same thing)...

<div class="span8 offset2"></div>.

You can do this to set an exact width rather than using the preset span css classes...

<div class="span12">

    <div style="width: MY_EXACT_WIDTH_IN_PIXELS; margin: 0 auto;">
        MY NIVO THINGY WITH 100% WIDTH
    </div>

</div>

I think what you are wanting is for the nivo thing to always stay centered. The way the grid system is setup, you will have the span12 area (middle 940px of the page) always centered.

So wherever you put the nivo thing, you want to end all the bootstrap tags...

Here's an example...

<html>
<head>
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
        <div class="container">
            <div class="row">
                <div class="span12" style="background-color: #CCC;">
                    <h4>Bootstrap span12</h4>
                </div>
            </div>
        </div>

        <div style="margin: 0 auto; width: 400px; background-color: #EFEFEF;">
            <h4>My nivo goes here</h4>
        </div>

        <div class="container">
            <div class="row">
                <div class="span12" style="background-color: #CCC;">
                    <h4>Bootstrap span12 again</h4>
                </div>
            </div>
        </div>
</body>
</html>

Upvotes: 1

Related Questions