Cannot apply bootstrap styling to an ASP:Button

Mar 28, 2014 at 11:21 PM
I am currently trying to apply bootstrap css styles to an asp:Button and am currently unable to get the bootstrap styles to take precedence over what's being inherited from sharepoint. Any ideas on how to get around this?

Within the same page I've been able to apply styles to a asp grid via a asp:HyperLinkField, tables, cells, etc, but not a button for whatever reason.
<asp:TableCell HorizontalAlign="Center">
                        <asp:Button ID="AddBtn" runat="server" Text="Add Project"  CssClass="btn btn-primary" OnClick="AddBtn_Click">
                     </asp:Button>
Mar 31, 2014 at 4:34 AM
After doing some digging with firebug, it appears the ASP:Button is still picking up some styling from Sharepoint's corev15.css which is the culprit. Any ideas on how to prevent this from occuring for my application without potential repurcussions elsewhere via editing Sharepoint's CSS?
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);
}
Mar 31, 2014 at 8:05 PM
Edited Mar 31, 2014 at 8:06 PM
Hi Patrick,

Maybe you can try to use the !important tag.

For example if the button has not the right background-color, use:
background-color: rgb(253, 253, 253) !important;
If you want to be sure the button style is not changed on other locations, search for an parent element and use the CSS like this:
#ParentElement input[type="button"] {
   min-width: 6em;
}
Good luck!
Mar 31, 2014 at 8:49 PM
It looks like my main issue is that Sharepoint's button styles are specified at the input[type="button"] level and Bootstrap sets these styles at the btn-primary class level.

At the moment, I am not seeing a way for my site to render the Bootstrap styles I'm after without explicitly dictating this at the input[type="button"] level which will then limit my flexibility for leveraging other styles. Thoughts?
Coordinator
Apr 26, 2014 at 6:53 PM
Yes, you have found a major issue when migrating any framework to SharePoint. SharePoint has so many specific styles that it can be very difficult to move over specific framework components such as button design to SharePoint. My technique is to target specific elements in a SharePoint site as I find them. I would not recommend that you change all buttons to Bootstrap with just one style, rather target each button or groups of buttons as you need to.

Yes, this is much more work, but I have found that setting large global style changes can really mess up a SharePoint site.

At least this is my experience.

Eric
Feb 6, 2015 at 5:29 AM
I solved this Issue with a workaroud

I used asp:Linkbutton instead that just a button and works fine