Making Changes to Bootstrap 01-Jan-2018

Tempting as it is to edit bootstrap.css - DO NOT DO IT – changes will be lost as and when bootstrap gets updated.

In your site you can specify another .css file and use that to specify what you only need to change.

For this to work, your site css must be loaded after bootstrap.

In my MVC project VS2017 I have the following:

Site.css – added by default, this is for the changes only for my site
Bootstrap.css – the one downloaded (versions will change, hence the need NOT TO EDIT)
_Layout.cshtml – created by default, is the sites layout spec. The top part looks like this:

Note the order of the .css entries – bootstrap.min.css is used here (and loads bootstrap.css). Some changes I made in Site.css:

.table-condensed { font-size: 12px; height: 100px; }

These didn’t seem to work, so after an hour of messing with the .css files and tearing more hair out, decided to try a different browser:

After much searching, and ensuring my bootstrap was up-to-date, turns out that Chrome saves a local copy of css files, so, once the cookies and cache were cleared, displayed as expected (4 hours later!!!)