CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Dr.Kameleon
Dr.Kameleon

Reputation: 22820

Changing Bootstrap elements' width

So, here's my situation :

Now, I'm trying to fit a 728 x 90 AdSense Leaderboard ad in the span9 block and - guess what - I noticed it's slightly bigger than the available block.

So, I'm thinking about re-sizing the whole griding system (= increasing the grid column width by some pixels).

How should I go about it? What if I go and Customize? Which variable should I edit, so that the alternative CSS remains a drag'n'drop replacement for the existing bootstrap.css?

And, last but not least : will it work without having to tweak 1001 different CSS options?

Upvotes: 1

Views: 340

Answers (1)

Bojangles
Bojangles

Reputation: 101553

The three variables below control the gutter (spacing between columns) in the Bootstrap grid. The defaults are shown below (taken out of variables.less. Make these values smaller to make the columns (span*) themselves wider.

@gridGutterWidth:          20px;
@gridGutterWidth1200:      30px;
@gridGutterWidth768:       20px;

The fluid grid calculates it's values from the above variables too:

@fluidGridGutterWidth:     percentage(@gridGutterWidth/@gridRowWidth);
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth768:  percentage(@gridGutterWidth768/@gridRowWidth768);

Upvotes: 1

Related Questions