How to make Bootstrap look more "Compact"

Question

I want to have the same "Compact" look - in terms of font-size, padding and general use of space as I get when I use the browser zoom-out (Ctrl--). Of course without the side-effects most importantly reduction in container width.

I have tried fiddling with the @baseFontSize and @baseLineHeight variables in Bootstrap's http://getbootstrap.com/2.3.2/customize.html download screen but I am missing something as the result :

1. Doesn't look right - in terms of balance, padding is not right.

2. Breaks on the projector screen (the horror!) - select boxes, layout, everything goes crazy.

Please bail me out!

Answer 1

What about using media queries inside your html tag and using rem units based off it? Might be too late to start that but I find it a hand way to control spacing,

html{
    background: $black;
      scroll-behavior: smooth;
    padding:0;
    margin:0;
        @media screen and (min-width: 2560px){
                font-size:16px;
        }
        @media screen and (min-width: 1920px) and (max-width: 2559px){
                font-size:15px;
        }
        @media screen and (min-width: 1681px) and (max-width: 1919px){
                font-size:15px;
        }
        @media screen and (min-width: 1441px) and (max-width: 1680px){
                font-size:13px;
        }
        @media screen and (min-width: 1366px) and (max-width: 1440px){
            font-size:13px;
        }
        @media screen and (min-width: 1024px) and (max-width: 1365px){
            font-size:12px;
        }
        @media screen and (min-width:992px) and (max-width: 1023px) {
            font-size:12px;
        }
        @media screen and (min-width:768px) and (max-width: 991px) {
            font-size:12px;
        }
        @media screen and (min-width:441px) and (max-width:767px) {
                font-size:12px;
        }
        @media screen and (min-width:351px) and (max-width:440px) {
                font-size:12px;
        }
        @media screen and (max-width:350px) {
                font-size:12px;
        }