Issue #243 new

Best practice for Bootstrap CSS

Aaron Radich
created an issue

I just installed the Yii Bootstrap extension and noticed that wherever I use a bootstrap widget, the pages CSS gets altered because of the inclusing of the boostrap.css. For example, the H1 tag get's drastically altered from the standard Yii Blueprint CSS that I'm using throughout my site. What should I do? Should I alter the boostrap.css to make it conform to what I was using in the standard Blueprint CSS?

Comments (1)

  1. Anonymous

    Bootstrap and Blueprint CSS are all together separate front-end frameworks for making your page looking beautiful. I don't see any way you could have them both in the same time. You have to decide, which one you want to use?

    All the beauty of Bootstrap is powered by its CSS (with a little help of JS), so if you start changing bootstrap.css to heavily, you'll loose everything.

    You can create your own extra.css and register it at the very end of your layout file (so it will be loaded after Bootstrap's assets are published):

     * Register additional scripts and styles, that are used in every view or layout.
    $extraStyle = Yii::app()->baseUrl.'/css/extra.css';
    $cs = Yii::app()->getClientScript();

    But this solution is meant for tweaks only. Not for trying to make Bootstrap looking like a Blueprint.

    You can consider doing, what I've done -- separate main layout into two, one for fronend and one for backend. And have Bootstrap only powering your backend (control panel, admin area), while remaining with Blueprint in the frontend.

    I did so in one of my project, but I left frontend with something else, not the Blueprint as it looks so ugly! :]

  2. Log in to comment