Geek Answers Handbook

How to make Bootstrap more compact

I want to have the same “Compact” look - in terms of font-size , padding and overall space usage, as I get when I use browser zoom out (Ctrl--). Of course, without side effects, reducing the width of the container is most important.

I tried @baseFontSize over the @baseFontSize and @baseLineHeight in the Bootstrap boot window http://getbootstrap.com/2.3.2/customize.html , but as a result I missed something:

  • Doesn't look right - in terms of balance, the filling is wrong.

  • Breaks on the projector screen (horror!) - select fields, layout, everything will go crazy.

Please help me!

+9
html5 css3 twitter-bootstrap
source share
2 answers

I am wondering if this is a problem with a responsive style sheet. It is difficult to give a definitive answer without knowing whether you are working with or without a personal style list. But if you, the layout will not remain proportional to the larger screen because it is responsive. So, if you have this style sheet, try deleting it.

0
source share

I have two suggestions.

First, do you use Bootstrap 2.3.2 from your link above? Perhaps you can more easily solve your problems using the new scaffolds that have boostrap 3.0 (and higher). This is a kind of pain for updating your site, but there are automatic converters, and the new system MUCH works better and can help.

Secondly, another CSS trick you should pay attention to is the font and line weight. Font weight can make your text thinner / thicker (grades 100, 200, 300, 400, etc.). You may be able to make the font thinner, the linear level lower, but the overall font is larger, which will be "compact." If you didn’t know it was worth a try.

  font-weight: 200; line-height: 30px;
0
source share

More articles:


All Articles