Bootstrap Content too Large

I am using bootstrap on my site and I generally like it a lot but I would like to make some of the objects a little smaller.  Lists, form objects, nav, tables, etc.  

My question is two-fold:
1) Is there a way to do that "across the board" by adjusting a css file associated with my bootstrap?

2) How much can I do with css on an item-by-item basis without "ruining" the mobile friendliness that bootstrap brings.  For instance, if I use class="img-responsive" for an image and then apply style="width:200px;" will that style make the image not adjust it's size based on whether it is on a mobile device or a desktop?

Thank you!
Bob SchneiderCo-OwnerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
You say the elements are 'too large' but that's quite a non-specific description - are we talking about margins / padding / font-sizes / widths etc ??

There are a lot of pre-set defaults with bootstrap, such as margins / paddings / font-sizes that are applied to a large number of elements. Whether they are applied to the elements you want to change is not clear from what you've posted.

In it's compiled form, you would need to change your CSS file in the same ay you normally would - line by line / element by element. If you're using the pre-compiled version (SASS), then you can edit the variables.scss file and re-compile. This is usually the preferred way of editing Bootstrap.

Alternatively, you can just add your own CSS file after you've loaded Bootstrap and override any CSS rules yourself.

As for explicitly setting an image width - yes - you are likely to break the resposivness of it.
Bob SchneiderCo-OwnerAuthor Commented:
I am basically talking about padding & margins in general, as well as form elements.  I understand that you can sizer form elements to some degree so I can work on that.  Here is an example of a page that i would like to make a little more "condensed" from the standpoint of the form elements and the data table row/th/td margins and padding:
teh broader question is, as I mentioned earlier, how much can I change on the page or element level and still have the mobile responsiveness.  Or, as I indicated above, if I change an image size will that over-ride the img-responsive class?
Chris StanyonWebDevCommented:
OK Bob,

Firstly, see per my previous comment:

As for explicitly setting an image width - yes - you are likely to break the resposivness of it.

With regard to the form elements and the table. They're not being sized by Bootstrap. The table is styled with the DataTables CSS and your form elements are being overridden with styles from mbr-additional.css (specifically the min-height and padding).

In general terms, you can keep the responsiveness of you page and change the styling of pretty much every element. The thing to get your head around is the concept of relative / absolute measurements. Relative will use things like Em / Rem / Percentage, whereas absolute will use px or pts. Keep to relatvive measurements and you should be OK. Instead of setting an image to 200px, set it to xx% for example. It will then resize to xx% of the parent element automatically. If you want to change the padding or margin on an element, then set it to a relative measurement:

th {
    padding: 0.25rem 0.5rem;

rather than absolute:

th {
    padding: 5px 10px;

Doesn't mean you can't use px, just be aware that they won't resize!
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Bob, this is what I was referring to.

Example.  Smaller fonts and updated spacing. Still needs work, just for example.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
For the responsiveness of the table, you can't have all columns show up on a phone. On your small screen, you just want to use columns for perhaps first name, last initial, sex, age and either chip or or gun time.  You can use table responsive table-responsive{-sm|-md|-lg|-xl} to add horizontal scroll too.  or hide columns
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.