0

I have created my own stylesheet and wish to override some bootstrap functionality. I am referencing css in my .aspx page as below

<SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/_catalogs/masterpage/MyStyles/Stylesheet1.css %&gt;"
  runat="server"
  after="pagelayouts15.css"/>

Now i want to override and remove this code from bootstrap-custom.css

*, *:before, *:after {
-webkit-box-sizing: content-box; 
-moz-box-sizing: content-box;
box-sizing: content-box;
}

So i wrote below in my stylesheet

*, *:before, *:after {
-webkit-box-sizing: content-box !important; 
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}

But still not working. My page is still not behaving correctly. When i press F12 i see following

enter image description here

So it looks like that boostrap-custom.css again overwrites my css. How can i fix this?

  • Well, to mess up with bootstrap CSS is not that much easy. If you will change that box-sizing property, your responsive structure will not work properly(Read more here: css-tricks.com/box-sizing). So in my case what I have done is simply overridden class where I need to apply custom css properties. – Pradip R. Dec 22 '15 at 8:59
0

try to add body tag in front:

body *, body *:before, body *:after{
...
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.