We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Apply bootstrap classes on button(btn btn-primary)

Thread ID:

Created:

Updated:

Platform:

Replies:

125624 Aug 29,2016 02:28 PM UTC Aug 30,2016 03:18 PM UTC ASP.NET MVC 1
loading
Tags: Button
Manoj Sethi
Asked On August 29, 2016 02:28 PM UTC

Hello Team,

I am using Syncfusion Button in a form but want to apply class(btn btn-primary) so that  it looks blue in color and match my site theme.

I am using class in the following way

@Html.EJ().Button("btnSaveDish").Type(ButtonType.Submit).Text("Save Dish").Size(ButtonSize.Medium).CssClass("btn btn-primary")

The class get applied but it is overidden by e-button-normal class colors.

Can anybody help me in getting through this.

Thanks,
Manoj

Francis Paul Antony Raj [Syncfusion]
Replied On August 30, 2016 03:18 PM UTC

Hi Manoj, 
 
Thanks for contacting Syncfusion support. 
 
You can change the appearance of button control using CssClass property. Background color, font color and desired styles can be changed by overriding the existing styles applied to the control element.  
 
If you have added bootstrap classes as CssClass, then it will be added at the root element of the widget and it doesn’t override the existing class values. So, please apply the style as to override the existing default values as mentioned in the below code example. 
 
[cshtml] 
@Html.EJ().Button("button1").Text("Primary").EnableRTL(false).ShowRoundedCorner(true).Size(ButtonSize.Medium).CssClass("primary") 
 
[style] 
    .primary.e-btn { 
        color: #fff; 
        background-color: #337ab7; 
    } 
 
    .primary.e-btn.e-select:hover { 
        color: #fff; 
        background-color: #286090; 
    } 
For your convenience, we have attached the sample in the below location, 
 
To know more about how to customize the Essential JS controls with user-defined styles, please refer to the below link:  
 
Also you can make use of ThemeStudio option available in our http://js.syncfusion.com/ demo site. With the help of this, you can customize our EJ controls with the desired theme.  
For more information, please refer the following link.  
 
For more information about Button control customization, please refer to,  
 
Please let us know, if you need any further assistance. 
 
Regards,   
Francis Paul A 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;