CODEWITHSUNDEEP
csstwitter-bootstraplaravel
Michael
Michael

Reputation: 485

Laravel overriding bootstrap template

So I got my custom app.css in my project and I'm using bootstrap template. Now when I create new button style for example in app.css it's accessible everywhere (on every page since I got master template and other pages are extending it) but when I override bootstrap theme in app.css it's not working. When I use same code to override bootstrap on top of the page using <style> tags it's working. app.css is included properly and after bootstrap.css so any idea what I'm doing wrong ?

Upvotes: 3

Views: 3090

Answers (3)

ibanjo
ibanjo

Reputation: 343

It most probably is a style precedence issue. I found this article very useful to at least understand what goes on with style precedence and what specificity is.

In your very case it may be helpful to simply use a class selector such as

.mybutton button{
    color: blue;
    font-size: inherit;
    ...
}

and give your buttons the attribute class="mybutton". In the class definition you may freely override whatever you want and also let other properties be inherited from Bootstrap.

There is also the !important rule. However, it is usually referred to as a bad practice, since it breaks the normal cascading rules and makes debugging an incredibly painful task.

Upvotes: 0

mbozwood
mbozwood

Reputation: 1402

Try a cache refresh, for me in Chrome, I use Ctrl+Shift+R.

If this doesn't produce any results, use the inbuilt inspectors on Chrome or Firefox to view the attached properties to the element you are editing. If the app.css is overriding the bootstrap.css, you will see something like the below image, showing the app.css is above the skin-purple.min.css meaning the app.css was the latest to be loaded. css overriding properties

Upvotes: 2

utdev
utdev

Reputation: 4102

I would say that there is a hierarchy, try to include the bootstrap.css after the app.css, you could also give those css attribute an !important like so:

#bla {
    display:none !important
}

But that is not a good practice I think, it may be ok if you do not override alot of the bootstrap.css

You could also try this:

http://bootstrap-live-customizer.com/

to customize your bootstrap.

Upvotes: 0

Related Questions