Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

The way I prefer to do this is we have our own SCSS files which get compiled along side bootstrap, and they are all more specific than the Bootstrap SCSS so they get precedence.

For example, we might want our default alerts to all be purple or something. We can add a class "my-namespace" to the body, or to a closer parent of the alert and then add the following to our "my-namespace" SCSS. If I wanted to change the "alert-info" background to orange I could also include a rule for that.

Hopefully in production you'd be using color variables instead of hex codes, but:

    .my-namespace {
        .alert {
            background-color: #aa00aa;

            .alert-info {
                background-color: #dd8800;
            }
        }
    }
Now you're overriding Bootstrap without touching Bootstrap's SCSS. I far prefer this method than the method I see a lot of folks using where they just go mucking around in the Bootstrap SCSS directly.


Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: