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?
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Bob, this is what I was referring to.

Current
bob1.PNG
Example.  Smaller fonts and updated spacing. Still needs work, just for example.
bob2.PNG
0
 
Chris StanyonCommented:
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.
0
 
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:

http://www.gopherstateevents.com/results/fitness_events/results.asp?event_type=5&event_id=666&race_id=1173
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?
0
 
Chris StanyonCommented:
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!
1
 
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.  https://getbootstrap.com/docs/4.0/content/tables/  or hide columns https://getbootstrap.com/docs/4.0/utilities/display/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.