This is a migrated thread and some comments may be shown as answers.

Apply Bootstrap 3 styling - possible?

11 Answers 602 Views

Button

This is a migrated thread and some comments may be shown as answers.

11 Answers, 1 is accepted

answered on 17 Mar 2014, 08:29 AM

Hi,

Thanks for contacting Telerik Support. I have tried the approach and it seems to work, but you have to use button type skinned button and Icon-PrimaryIconCssClass property as shown bellow.

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

<style type="text/css">

.btn.btn-primary .rbText.rbPrimary {

padding-left: 15px;

}

.glyphicon {

font-size: 14px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadButton ID="RadButton2" runat="server" CssClass="btn btn-primary" Text="BS button"

ButtonType="SkinnedButton" Icon-PrimaryIconCssClass="glyphicon glyphicon-star">

</telerik:RadButton>

<telerik:RadButton ID="RadButton1" runat="server" CssClass="btn btn-primary" Text="BS button"

ButtonType="SkinnedButton" Icon-PrimaryIconCssClass="glyphicon glyphicon-cloud">

</telerik:RadButton>

<telerik:RadButton ID="RadButton3" runat="server" CssClass="btn btn-primary" Text="BS button"

ButtonType="SkinnedButton" Icon-PrimaryIconCssClass="glyphicon glyphicon-tree-conifer">

</telerik:RadButton>

</form>

</body>

</html>

The CSS added is to remove some additional padding. The font size applied to glyphicon will increase/decrease the icon.

Note that RadButton in this type - SkinnedButton, has an elastic behavior, and when button font size is increased it will increase all button parts:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

<style type="text/css">

.btn.btn-primary .rbText.rbPrimary {

padding-left: 15px;

}

.RadButton {

font-size: 35px !important;

}

span.rbPrimaryIcon,

span.rbSecondaryIcon {

width: 1.33em;

height: 1.33em;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadButton ID="RadButton2" runat="server" CssClass="btn btn-primary" Text="BS button"

ButtonType="SkinnedButton" Icon-PrimaryIconCssClass="glyphicon glyphicon-star">

</telerik:RadButton>

<telerik:RadButton ID="RadButton1" runat="server" CssClass="btn btn-primary" Text="BS button"

ButtonType="SkinnedButton" Icon-PrimaryIconCssClass="glyphicon glyphicon-cloud">

</telerik:RadButton>

<telerik:RadButton ID="RadButton3" runat="server" CssClass="btn btn-primary" Text="BS button"

ButtonType="SkinnedButton" Icon-PrimaryIconCssClass="glyphicon glyphicon-tree-conifer">

</telerik:RadButton>

</form>

</body>

</html>

Regards,
Bozhidar
Telerik

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

answered on 18 Mar 2014, 09:10 AM

Hi,

You could also use it with <i> and content template. The only thing is that you have to add rbRounded class to the main element as when a content template is used it is not added to the element.

<telerik:RadButton runat="server" ButtonType="SkinnedButton" CssClass="btn btn-primary rbRounded" Height="17">

<ContentTemplate>

<i class="glyphicon glyphicon-star">This is Text</i>

</ContentTemplate>

</telerik:RadButton>v

Actually it will work with any element, so you could style it as you like.

Regards,
Bozhidar
Telerik

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

answered on 21 Mar 2016, 07:08 PM

I just tried this with 2016Q1 and Bootstrap 3.3.6, and cannot get this to work for me. I get a glyphicon - but not the right one, and I do not get the blue background color or slightly darker blue mouse over color. For example...

<telerik:RadButton ID="btnSearch2" runat="server" OnClick="btnSearch_Click"

CssClass="btn btn-primary" Text="Search"

ButtonType="SkinnedButton"

Icon-PrimaryIconCssClass="glyphicon glyphicon-search">

</telerik:RadButton>

<button type="submit" class="btn btn-primary">

<span class="glyphicon glyphicon-search" />

</button>

produced two different buttons: different backgrounds, different mouse-over effects, different icons.

I was able to produce what I needed using RadButton rbSearch to get the right icon, and then to add some CSS:

<telerik:RadButton ID="btnSearch" runat="server" OnClick="btnSearch_Click"

Text="" BackColor="Transparent"

CssClass="btn btn-primary btnPrimary" HoveredCssClass="btnHover"

ToolTip="Search">

<Icon PrimaryIconCssClass="rbSearch" />

</telerik:RadButton>

.btnPrimary {

color: white !important;

background-color: #337ab7 !important;

border-color: #2e6da4 !important;

}

.btnHover {

color: white !important;

background-color: #286090 !important;

border-color: #204d74 !important;

}

I simply copied the btn-primary and btn-primary:Hover code from the Bootstrap CSS file into my own CSS file and then renamed them btnPrimary and btnHover, then added "!important" to each element. Then I referenced btnPrimary and btnHover in the RadButton CssClass and HoverCssClass, respectively.

I would love for the functionality that you documented to work so that I don't have to worry as much about what has changed with future releases of Bootstrap and to be able to use Bootstrap's glyphicons! Any suggestions will be greatly appreciated, or to take this as an enhancement request.

Thank you!

answered on 24 Mar 2016, 02:40 PM

Hello,

If I understand you correctly you are asking for two different things:

1. How can the Bootstrap glyphs work properly inside RadButton
2. How to implement a PrimaryButton which for Bootstrap is blue colored compared to the other non primary button, which is some kind of grey.

So, straight to your questions. For the first one, find the code below, I have used the Bootstrap CDN resources:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<style>

span.rbIcon.glyphicon:before {

font-family: "Glyphicons Halflings";

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager runat="server"></asp:ScriptManager>

<telerik:RadButton ID="btnSearch2" runat="server"

CssClass="btn btn-primary" Text="Search"

ButtonType="SkinnedButton"

Icon-PrimaryIconCssClass="glyphicon glyphicon-search">

</telerik:RadButton>

<button type="submit" class="btn btn-primary">

<span class="glyphicon glyphicon-search" />

</button>

</form>

</body>

</html>

The style colored in yellow makes the things to work correctly.

So, for your second question. This functionality is already added to the suite and is available since Q1 2016:
for RadButton: http://docs.telerik.com/devtools/aspnet-ajax/controls/button/appearance-and-styling/primary-and-secondary-action-buttons.
for RadPushButton: http://docs.telerik.com/devtools/aspnet-ajax/controls/pushbutton/appearance-and-styling/primary-action-button.

This is a short video, showing how this functionality is working at the moment.

The code for this functionality is the following:

<telerik:RadButton runat="server" RenderMode="Lightweight" Text="OK" Primary="true"></telerik:RadButton>

<telerik:RadButton runat="server" RenderMode="Lightweight" Text="Cancel" ></telerik:RadButton>

Regards,
Bozhidar
Telerik

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.

answered on 12 Oct 2016, 05:19 PM

Hi, I'm still having issue with rad button that doesn't reflect the original style of bootstrap

<telerik:RadButton AutoPostBack="true" CssClass="btn btn-info btn-lg" Text="Emetti Ricevuta" ID="BtnInsertInvoice" RenderMode="Lightweight" Primary="true" runat="server" OnClientClicked="SaveChangesInGrid" OnClick="BtnInsertInvoice_Click"></telerik:RadButton>

as you can clearly see I want a btn-info style, here you can see what I mean:

http://www.w3schools.com/bootstrap/bootstrap_ref_css_buttons.asp

Look at the colors, they are not the same of radbutton.

I've tried in so many ways to get this but without success. Also the glyphicon is never well aligned to the button text (try with glyphicons-arrow-right so you can see exactly what I mean)

Could you provide a solution to draw exactly the same style of bootstrap for the button? (and yes...I'm using also the bootstrap skin..)

Thanks

Best,

Marco

answered on 14 Oct 2016, 07:27 AM

Hi,

You can use the following on order to have the same Bootstrap info button:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<style>

.RadButton_Bootstrap.rbButton.btn-info {

background-color: #5bc0de;

border-color: #46b8da;

color: #ffffff;

}

.RadButton_Bootstrap.rbButton.btn-info:hover {

background-color: #31b0d5;

border-color: #269abc;

color: #ffffff;

box-shadow: none;

}

.RadButton_Bootstrap.rbButton.btn-info.active {

background-color: #31b0d5;

border-color: #269abc;

color: #ffffff;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager runat="server"></asp:ScriptManager>

<telerik:RadButton AutoPostBack="true" CssClass="btn btn-info btn-lg" Skin="Bootstrap" Text="Emetti Ricevuta" ID="BtnInsertInvoice" RenderMode="Lightweight" runat="server"></telerik:RadButton>

</form>

</body>

</html>

The RadButtons styles are with a higher CSS specificity, that's why it is necessary to make the info styles heavier in order to be applied.

Regards,
Bozhidar
Telerik by Progress

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.

answered on 17 Aug 2018, 02:30 PM

glyphicon-not-working.png

Hi,

I just want to refresh this topic. In the latest dlls there is problem with rendering glyphicons, because Telerik button style overrides bootstrap styles.

Here is telerik style example:

.rbPrimaryIcon::before, .rbSecondaryIcon::before {

content: "";

}

And here is request bootstrap style:

.glyphicon-star:before {

content: "\e006";

}

But this is Strike-through (not applied) as you can seen in the attachment. There is also PITS on this topic, problem is not in classic mode but also in auto mode. https://feedback.telerik.com/Project/108/Feedback/Details/210717-custom-font-icons-are-not-rendered-in-primaryicon-and-secondaryicon-of-radbutton

Please help community to solve this issue.

Best regards

Vasssek

answered on 20 Aug 2018, 11:17 AM

result.png

Hello Vasssek,

You need a selector that can overwrite our own. So, it must be heavier than ours (e.g., add a span selector before it, or a second class selector).

You can also find an example of how this works in the other thread you posted in, that I just answered: https://www.telerik.com/forums/menu-icon-library-reference#a50P8OjxUEaZSM9fRCVsKw.

Here is also an example with the classic mode and the latest version (note that the classic mode is designed for raster images and not for font icons, so I advise that you use the lightweight mode):

<style>

.rbPrimaryIcon.glyphicon-filter:before,

.rbSecondaryIcon.glyphicon-filter:before {

content: "\e138";

font-family: "WebComponentsIcons";/*this is our font name, use the one you have*/

}

</style>

<telerik:RadButton ID="RadButton2" runat="server" RenderMode="Classic"

Text="Filter" ButtonType="SkinnedButton"

Icon-PrimaryIconCssClass="glyphicon glyphicon-filter">

</telerik:RadButton>

<%--just a lightweight control to bring the Telerik fonts to the page because the Classic mode of the RadButton does not

since it is not designed for font icons, but for raster icons--%>

<telerik:RadWindow runat="server" ID="rw1" RenderMode="Lightweight" VisibleOnPageLoad="false"></telerik:RadWindow>

Regards,
Marin Bratanov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 23 Aug 2018, 02:09 PM

kendoui---glyphicon.png

Hello,

thank you for pointing out. Because we have bought Devcraft complete, I link icon-font.css to my web page from KendoUI and then this declaration in PrimaryIconCssClass works:

<telerik:RadButton ID="btn_NewOrderListViewItem" runat="server" OnClick="btn_NewOrderListViewItem_Click" CssClass="iconButtonFormat24 ShowOnlyIcon24" ButtonType="SkinnedButton">

<Icon PrimaryIconCssClass="k-icon k-i-plus iconfont24 ShowOnlyIcon24"></Icon>

</telerik:RadButton>

<telerik:RadButton ID="btn_editListViewItem" runat="server" OnClick="btn_editListViewItem_Click" CssClass="iconButtonFormat24 ShowOnlyIcon24" ButtonType="SkinnedButton">

<Icon PrimaryIconCssClass="k-icon k-i-edit iconfont24 ShowOnlyIcon24"></Icon>

</telerik:RadButton>

<telerik:RadButton ID="RadButton1" runat="server" CssClass="iconButtonFormat24 ShowOnlyIcon24" ButtonType="SkinnedButton">

<Icon PrimaryIconCssClass="k-icon k-i-delete iconfont24 ShowOnlyIcon24"></Icon>

</telerik:RadButton>

And result is in the attachment :-) Thank you.

Regards

Vasssek

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Apply Bootstrap 3 styling - possible?

11 Answers, 1 is accepted