Apply Bootstrap 3 styling - possible?

9 posts, 0 answers
  1. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 14 Mar 2014 Link to this post

    I wonder how easy to apply Bootstrap 3 styling with glyphicons or fontawesome icons in radButton?
    The straightforward approach does not work

    <telerik:RadButton ID="RadButton2" runat="server" CssClass="btn btn-primary" Text="BS button" ></telerik:RadButton>
  2. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 17 Mar 2014 Link to this post

    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.

    <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:

    <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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 17 Mar 2014 in reply to Bozhidar Link to this post

    That's brilliant, thanks a lot. Maybe, it's worth adding into your online demo.

    I see that we can use glyphicon classes as the primary icons is generated as <span>.
    Is there a way to use fontawesome icons generated as <i>? So far the only we found out is to use <ContentTemplate>.
  5. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 17 Mar 2014 in reply to miksh Link to this post

    In fact, the code below works fine

    <telerik:RadButton ID="RadButton3" runat="server" CssClass="btn btn-primary" Text="BS button"
     
            ButtonType="SkinnedButton" Icon-PrimaryIconCssClass="fa fa-star">
     
        </telerik:RadButton>
  6. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 18 Mar 2014 Link to this post

    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.

     
  7. Steve LaForge
    Steve LaForge avatar
    61 posts
    Member since:
    Feb 2005

    Posted 21 Mar in reply to Bozhidar Link to this post

    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!

     

  8. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 24 Mar Link to this post

    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:

    <head runat="server">
        <title></title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
     
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
     
        <!-- Latest compiled and minified JavaScript -->
        <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.
  9. marco
    marco avatar
    33 posts
    Member since:
    Sep 2007

    Posted 12 Oct in reply to Bozhidar Link to this post

    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

     

  10. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 14 Oct Link to this post

    Hi,

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

    <!DOCTYPE html>
     
    <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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017