StartledCat

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:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Media Library</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.8.3.js"></script>
    <script src="~/Scripts/jquery-3.2.1.min.js"></script>
</head>

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:

Chrome – no change i.e. failed to use my css settings
IE – displayed as expected – used my css setting
Edge – displayed as expected – used my css setting

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!!!)