CODEWITHSUNDEEP
cssasp.nettwitter-bootstrapsharepointsharepoint-2013
Haymak3r
Haymak3r

Reputation: 1411

Cannot apply bootstrap styling to an ASP:Button within Sharepoint

I am trying to apply Bootstrap's CSS styles to an ASP:Button and am currently experiencing some CSS conflicts from Sharepoint's corev15.css stylesheet for the button input type:

input[type="button"], input[type="reset"], input[type="submit"], button {
    min-width: 6em;
    padding: 7px 10px;
    border: 1px solid rgb(171, 171, 171);
    background-color: rgb(253, 253, 253);
    margin-left: 10px;
    font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    font-size: 11px;
    color: rgb(68, 68, 68);
}

From what I can tell Bootstrap applies these styles at a lower level (btn btn-primary btn-sm in my case) so the input[type="button"] styles being applied curtosy Sharepoint are taking precedence.

Any ideas on how to prevent this from occuring for my application without potential repurcussions elsewhere via editing Sharepoint's CSS?

I suspect what's needed is some custom CSS within a stylesheet that's rendered after my core bootstrap styles such as bootstrap3-custom.css, but I'm not sure what code would fix this specific issue.

Upvotes: 0

Views: 950

Answers (1)

Tiago Duarte
Tiago Duarte

Reputation: 3376

my recommendation is to inspect the button with ie dev toolbar or firebug and check the rendered html for css classes or inline styles. if css classes exist, use them, otherwise use the button type to a copy of those styles in a separate stylesheet. use !important if required. its important to know that there is stylesheet priority, and markup matching priority, so later load stylesheets with more specific assignments will prevail. !important should force anything without further concerns, but use with caution, dont make it a standard

Upvotes: 3

Related Questions