Declined
Last Updated: 16 Mar 2019 13:39 by ADMIN
Massimiliano
Created on: 18 Jan 2013 16:32
Category: UI for ASP.NET AJAX
Type: Feature Request
169
Bootstrap themes integration
Bootstrap popularity is growing each day, not just as a flexible grid system, but for it's skinning capabilieties as well. There are dozens of sites with both free and priced Bootstrap skins..
It would be nice to have a skin for rad controls wich maps straight to default Bootstrap classes.
So that just using the bootstrap skins (+ base Telerik controls skin) will also theme the rad controls and changing the Bootstrap themes of course changes the controls theming.

I guess that option to have a "straight" mapping of the rad controls to the bootstrap default classes so to be able to take advantage of bootstrap themes would be a great addition.

=====================
Updated by Telerik admin on 10.4.2017:
The status of this highly demanded feature has been updated to Declined, but you can find details what has been done during the years for satisfying this request:

Since the markup of the controls does not offer direct mapping for the Bootstrap v3 and v4 themes and classes, we introduced a new Bootstrap skin for the suite based on Bootstrap 3 component colors, metrics and appearance. This skin can be easily customized in the Theme Builder (http://themebuilder.telerik.com/aspnet-ajax) in terms of colors which allows you to create Bootstrap like appearance for Telerik Ajax components which matches the colors of your Bootstrap apps and components.

If you have any other requests for Bootstrap, don't hesitate to share them with us.
=====================
50 comments
ADMIN
Rumen
Posted on: 21 Apr 2015 12:19
Hi Scott,

The Bootstrap skin of the Telerik AJAX controls is a standard skin and it can be enabled by setting the Skin property to Bootstrap. 

If you need to register the Bootstrap skin for all Telerik controls in your website or web application, add the following lines in the web.config file: 

web.config

<appSettings>
   <!-- Sets the skin for all Telerik controls to Bootstrap -->
   <add key="Telerik.Skin" value="Bootstrap"/>
</appSettings>

For more information see this article: http://www.telerik.com/help/aspnet-ajax/introduction-skin-registration.html
Scott
Posted on: 20 Apr 2015 18:34
Thank you Rumen!   Our site has a bundle.config that looks like this:
bundles version="1.0">
  <styleBundle path="~/Content/css">
    <include path="~/Content/bootstrap.css" />
    <include path="~/Content/Site.css" />
  </styleBundle>
</bundles>

Do we need to add the css files to this or just change the theme to be Bootstrap in the app.settings file and move the files to the correct folder
Scott
Posted on: 20 Apr 2015 18:13
deleted by scott_weeden
ADMIN
Rumen
Posted on: 04 Mar 2015 10:16
Hi Syed,

The Bootstrap skin is available in the Q1 2015 installations of UI for ASP.NET AJAX. You can easily obtain the Bootstrap skin from the provided hotfix installation or the source code, which you can download from your Telerik.com account.

You can see this short video for more information: http://screencast.com/t/tbC5tMzm8P

Kind regards,
Rumen
Syed
Posted on: 03 Mar 2015 15:40
Hi Rumen,

As it's not yet available on Visual Style Builder, could you also email me the Bootstrap skin please?

Thanks
Syed
ADMIN
Rumen
Posted on: 20 Feb 2015 15:49
Hi Doug,

I just sent you the files. 

As to the release date: we are targeting it for the middle of next week.

Best,
Rumen
Doug
Posted on: 19 Feb 2015 21:01
Hi Rumen,
If you could email me it that would be great. I can play with it to see what I can modify.
Is their a projection yet for the release date?

Thanks,
Doug
ADMIN
Rumen
Posted on: 19 Feb 2015 16:27
Hi Doug,

The Bootstrap skin is not yet officially released. If you want to receive the most recent version of the skin, let me know and I can send it to your email address.

Once released officially, the Visual Style Builder will be updated with the new skin.

Best regards,
Rumen
Doug
Posted on: 18 Feb 2015 15:38
So far this bootstrap theme does help. I need to change the colors to the same colors I changed in mt bootstrap theme. I was going to try the Telerik Visual Style Builder but the bootstrap theme is not there. Is there any way to get a zip file of the bootstrap theme that I could import into the Visual Style Builder.
ADMIN
Rumen
Posted on: 09 Feb 2015 14:41
Thank you for the bug reports! We will ensure that they will not exist in the official version. Let us know if you find any other problems.

Rumen
Najid Hanif
Posted on: 05 Feb 2015 20:02
Also the the delete button for the appointments with the scheduler is hidden, same color? The drag to rezise line is pretty small as well on the appointment.
sitefinitysteve
Posted on: 05 Feb 2015 19:41
@Rumen
  http://demos.telerik.com/aspnet-ajax-beta/scheduler/examples/day-week-multi-day-views/defaultcs.aspx
Click an item, the rsModal popup is unstyled (Bootstrap skin clearly)...also the gradient on the items needs to go :)
ADMIN
Rumen
Posted on: 05 Feb 2015 15:45
@Brian, you can download the Beta from http://www.telerik.com/account/your-products/trial-product-versions/download-trial-file.aspx?fileid=18219&pid=0&dispkey=True and also play with the live demos at http://demos.telerik.com/aspnet-ajax-beta/. The detailed release notes are available at http://www.telerik.com/support/whats-new/aspnet-ajax/release-history/ui-for-asp.net-ajax-q1-2015-beta-%28version-2015.1.204%29? and the highlights in the release blog post: Q1 2015 Beta of UI for ASP.NET AJAX Is Out. Give It a Spin! - http://blogs.telerik.com/blogs/15-02-04/q1-2015-beta-of-ui-for-asp.net-ajax-is-out.-give-it-a-spin! 
John
Posted on: 05 Feb 2015 14:47
It's great to support one framework (Bootstrap) which is by far the most popular. What about Zurb Foundation (second most used) and others? 
Brian
Posted on: 05 Feb 2015 14:38
@Rumen, is there a place I can go to download this beta?
sitefinitysteve
Posted on: 05 Feb 2015 14:30
@Rumen
  Sorry one other thing, it'd be a nice feature to allow us to disable the embedded background image skin and instead use fontawesome...not that the radcontrols need to include fontawesome most of us have it on our pages anyway, the icon elements would just need to be decorated with the right class names.
sitefinitysteve
Posted on: 05 Feb 2015 14:27
@Rumen
  I'm very happy to see this, defiantly will be moving all my metro skinned stuff over to it.  However I see it's still saddled with the legacy hardcoded font family.  I mean if you NEED to do that, okay fine, but can you please make it easier for us to override?

So example is that all the RadControls have a wrapper class like ".RadListBox_Bootstrap" which defines the font-family.  This also means I would need to create a huge rule covering every single RadControl just to override that family.  What would be much more slick is if the all the controls were instead just decorated with "SkinBootstrap" or "SkinSilk" and THAT defined the family.  Then in one simple swoop I could just change the font for everything.

Overall, it looks great and is definatly a step in the right direction!
ADMIN
Rumen
Posted on: 05 Feb 2015 08:31
Hi guys, 

I have good news we just released the Q1 2015 Beta where you can test the new Bootstrap skin. This new modern skin features design and metrics similar to the default ones of the Bootstrap components. This allows you to put and use the Telerik UI for ASP.NET AJAX components alongside the Bootstrap widgets, on the same page, and have uniform appearance for all UI elements.

Both classic and lite rendering, when in Bootstrap skin, will not have font-size or font family specified for the 2015 Q1 official release. The change is done to allow easier skin modification with the single point of customization being the BODY element or the nearest styled parent container.

The next planned major step, in regards to better Bootstrap support, is to provide the ability to import a Bootstrap theme in a tool that will read and apply its essential information like color primitives to our Bootstrap skin. This will provide the flexibility that you are looking for, i.e. it will allow you to colorize the Telerik Bootstrap skin of the UI for ASP.NET AJAX controls in the same colors as your existing Bootstrap themes.

You can select the Bootstrap skin as shown in the screenshot http://screencast.com/t/2Cwe17jl8eG8 in the Beta demos at http://demos.telerik.com/aspnet-ajax-beta/ and give it a spin.

Best regards,
Rumen
Curtis
Posted on: 23 Jan 2015 02:18
Please please please make the Material/Bootstrap skins you've made for KendoUI/MVC for ASP.NET AJAX.

The skins available for KendoUI/MVC are so much more clean and modern than what we have for ASP.NET AJAX, where most of the skins look like they were made in the 80's.
Markús
Posted on: 05 Dec 2014 17:14
+1 
I commented back in September, our needs are still valid. We would like to be able to use Bootstrap styles with minimal effort. A "skin" or a "render mode" implementation where we could include any bootstrap css file from the master web form probably would be simplest.
Doug
Posted on: 05 Dec 2014 16:25
Looking forward to the changes, love bootstrap and Telerik controls. Hoping for a painless existence together.
Mark H
Posted on: 05 Dec 2014 13:45
Bump from here - really want to have painless use of bootstrap for client-side styling and responsive design while reataining the rich, high quality components server-side which are Telerik's strength...

Mark
kencox
Posted on: 04 Dec 2014 16:48
It's very positive that Telerik is putting on a push for Bootstrap integration. Your controls are top-notch, but obviously it's hard to keep up with anything in the Web world and they have fallen behind in some ways. The incompatibilities have been extremely frustrating for those of us trying to do layouts.

I've attached two files that show the problems. Both reference Bootstrap but default2.aspx substitutes Telerik ASP.NET AJAX controls. Ideally, they would render alike, with the bonus of the Telerik functionality in the second.

If you have any advice on current techniques that would improve the rendering, that would be welcome too!

Ken

James
Posted on: 04 Dec 2014 15:56
We would like to pursue both Telerik and Bootstrap - we like the stock layout and grid system in Bootstrap, but we absolutely love the capabilities of the Telerik controls and would be stuck without them. By adding both server side wrappers for Bootstrap and Telerik I think you’ve taken a very wise and good step forward for support. If Telerik provided more of a 'UI' framework as a whole rather than singular controls we would definitely look at switching to that for better support.

The main Ajax controls that we would be planning on using in this setup would be the RadGrid, RadToolbar, and RadComboBox, in that order of importance. Any other controls would be a bonus but those 3 would give the best start on adopting it.

Thanks
sitefinitysteve
Posted on: 04 Dec 2014 13:14
@Rumen
  Just like jeremy we use bootstrap admin themes, but in the context of Sitefinity.  But there's just no radcontrol skin which maps at all, which pushes us over to kendo.  Those controls appear more native 90% due to the font family.  A RadGrid looks odd or sloppy hardcoded to arial...like kendo though is just a bootstrap theme, they don't use markup.  You could one-up them by injecting bootstrap classes where appropriate...like bg-info or text-muted...styles you don't need to worry about brcause we have them already defined.  But yeah like john says you might need to do foundation or zurb later...

I hate having to use an app to download a custom skin, because it means we're needing to keep using it and rememering settings every update...3-6 times a year in sitefinitys case.
Jeremy Schaab
Posted on: 04 Dec 2014 12:41
Rumen, thanks for your reply.  Here is my critical issue and one that is basically pushing me towards ComponentOne.  We use your controls in our custom CMS.  We purchase 'bootstrap' templates from sites like https://wrapbootstrap.com/.  While not all of these templates are Bootstrap compliant, the ones that are NEED to be 'pluggable' into the CMS.  This enables us to provide a huge library of custom templates to our customer while focusing on the CMS.  We cannot support this scenario in the current 'state' of your controls.  I hope that helps, well my 2 cents at least.

Jeremy Schaab
CSharp, ApartmentCloud, LLC
John
Posted on: 04 Dec 2014 12:36
Although I appreciate the bootstrap integration there are two major frameworks. What about us developers that utilize Zurb's Foundation? It is close to the same functionality as bootstrap but different as well. Can we get support for that as well?
ADMIN
Rumen
Posted on: 04 Dec 2014 12:28
Hello guys,

I want to share with you what we’ve done to support Bootstrap so far and what our future plans are:

What’s Done:
   -  We solved the reported interoperability problems between our AJAX controls and Bootstrap.
   -  We published a Bootstrap Themes Integration code library that shows how to apply a Bootstrap theme to RadGrid - http://www.telerik.com/support/code-library/bootstrap-themes-integration
   -  We created adaptive, responsive and elastic controls that work fluently in the responsive Bootstrap enabled pages. The elastic behavior will help you reach the different metrics of the Bootstrap controls.

What to Expect in the Future:
   - Bootstrap skin - The new modern skin will feature design and metrics similar to the default one of the Bootstrap components. This ensures that the Telerik UI for ASP.NET AJAX components will fit better alongside the Bootstrap widgets, on the same page.
   - We will provide an application where you will be able to configure the new Bootstrap skin to match any Bootstrap skin you want to use in your apps. You should be able to create skins for the Bootstrap metrics and proportions.
   - ASP.NET AJAX server wrappers for the available in Bootstrap v.3 components – they will allow configuration of the Bootstrap components from the server. The wrappers will also feature basic databinding capabilities.

Your Feedback is Very Important for us:
I’ll be glad to hear all your great ideas and scenarios when using our controls with Bootstrap. What are the scenarios? Which other AJAX controls would you like to style with a bootstrap theme. Do you face any problems? All of this will help us plan our next steps and improve the interoperability between Bootstrap and the controls.

You can share your feedback here or directly send me an email to rumen [dot] jekov [at] Telerik [dot] com. 

@Steve: We are currently researching the CSS font settings hadrcode story and we will try to remove it in the lightweight rendering of the controls.

Best regards,
Rumen
Product Manager, Telerik UI for ASP.NET AJAX
sitefinitysteve
Posted on: 03 Dec 2014 14:38
It's on the roadmap now http://www.telerik.com/support/whats-new/aspnet-ajax/roadmap

Concerns:
- Bootstarp "inspired"
- They'll hardcode in a font family like the other skins
Tadas
Posted on: 03 Dec 2014 14:21
how many likes do telerik need to get to implement this?
Tadas
Posted on: 03 Dec 2014 14:20
+1 for this also
James
Posted on: 03 Dec 2014 10:58
+1 for this - Having a render mode to switch to 'bootstrap' render mode would probably be the easiest, and then not register the AXD's with the script manager for the CSS for the grid system, when RenderMode=Bootstrap assume the user has already referenced bootstrap.
Markús
Posted on: 13 Sep 2014 15:02
It would be nice to be able to simply include a bootstrap css file in the master file, then use the CssClass properties of controls and then perhaps use RenderMode to some specific value.

I am trying to work this out on RadButtons, by manually copying from a Bootstrap skin, but I have to set "!important" flag on styles in the css file, to try to overwrite the Telerik skin.

Currently with the Telerik Silk skin, perhaps it would be a good idea to set the Telerik skin on the individual controls when styling them.
Ph
Posted on: 11 Sep 2014 09:23
Bootstrap the RadGrid!!! Everything else are just ... supplementary.
Elliott
Posted on: 23 Jul 2014 11:54
All of our new .Net web projects will employ Bootstrap, now that it is part of Visual Studio templates especially.  Please, I love using your controls, integrate with Bootstrap.
sitefinitysteve
Posted on: 29 Jun 2014 16:23
I've gone Kendo (who do have a bootstrap theme) in the short term until the ajax guys can get us bootstrap...who knows maybe the dumping of IE7 was the first step to moving in that direction...but MAN is this taking forever.  

I'm sure we'd all rather have a simple skin instead of responsive "frameworks"...suppose the problem maybe lies in that they have to skin every widget with every new skin.  I appreciate teleriks wanting to solve responsive, but yer just not gonna compete with bootstrap or foundation...accept and adopt
Len Simmons
Posted on: 29 Jun 2014 16:02
I've been using Telerik for years with great success. But... (there's always one!)... We've just switched to using Bootstrap (replacing our custom CSS) and I was surprised that Telerik haven't been switched on enough with the rise Bootstrap to make it compatible already. Getting quite frustrated by the lack of support and that is leading me to question if I can really still use the Telerik controls that I've been using for years.

Telerik.....? Any idea when we are likely to see Bootstrap compatibility please?
Muhammad Faizan
Posted on: 12 Jun 2014 00:43
Telerik really needs to upgrade their theming options and respect the designers by giving them liberty to edit or bind it to other frameworks. Just by giving theme editor will not work. Firstly, the size of generated axds are quite big and secondly, they get loaded at the last moments of page load which overrides all custom code. Really frustrating
sitefinitysteve
Posted on: 12 May 2014 15:08
My biggest issue with the native themes is that they are very intrusive...fonts are hardcoded, not much is inherited from your theme.  Makes it a TON of work to override existing styling..."Custom Skins" are annoying to make because upgrades inevitably cause graphical glitches\maintenance nightmare...

It would be nice if the native styles (not just a bootstrap theme) would be refactored so we can drop them into a project and only have to worry really about colors and icons...like they appear native to the site when dropped in (like Kendo)
Jeremy Schaab
Posted on: 24 Apr 2014 11:24
Good point Grahm and I guess my biggest issue or the result that I would like to see is something in the product that makes it easy to deal with the controls working in a 'responsive' layout (even if Telerik comes up with their own) so that I don't have to spend hours digging into, lets say the grid header css or the even worse the 'image upload' controls css to make the control work in a simple responsive layout.  

Making commercial products that work with free stuff is always dangerous, but I think the concept of responsive is here to stay, so either roll their own into the product or make it easy to work with Bootstrap, Zurb, etc.

My thoughts of course!
Graham
Posted on: 24 Apr 2014 05:17
We also have a requirement to align Telerik with bootstrap and are contemplating discarding Telerik if it cannot do this.

My observation of Bootstrap is that it is a collection of css styles for visual appearance and for responsive layout.

Telerik implements its own css class hierarchy which is completely different and incompatible to bootstrap and would probably require a huge amount of work to Telerik to make it use bootstrap.

Is there any mileage in adding further Telerik themes which 'look like' bootstrap and/or stylings in Telerik's own css which achieve the same layout effects as bootstrap ?

From a commercial perspective, I see a risk of making one's product heavily dependent on a 'freeby' product.
Ed Lance
Posted on: 03 Feb 2014 19:06
To answer Jeffrey's question above, for me it's not as much about the theme, although that is important, it's more about the responsive layout.  That is what the core of bootstrap is really all about.  What I would like to see is the menu and nav bar be responsive like in bootstrap. As the browser window narrows, at some point the menus become the square button on the top, and the items from both the menu and nav bar can be accessed through that button.  That would be a huge win for us.
Tadas
Posted on: 01 Feb 2014 20:17
I do not buy telerik controls at the moment just because I cannot style them quick and easy with bootstrap classes

Thanks
David Mullings
Posted on: 12 Nov 2013 15:12
With the release of VS2013 and its native support for bootstrap, we are looking at restyling our main intranet application to use bootstrap instead of the custom CSS styling its using right now.  We really want a responsive design mechanism that allows us to easily refresh the look & feel of the App on a more regular basis. The app makes heavy use of the ASP.NET controls, especially the Radgrid control. I don't know if we would remove the controls to gain bootstrap, modify the bootstrap CSS to better support Telerik or delay our redesign until Telerik better support bootstrap, but we are going to have to do something within the 3-6 months.

Thanks.
Jon
Posted on: 16 Oct 2013 06:24
Hi Jeffrey, 

You can see a lot of issues reported by me to the support service around bootstrap and Telerik controls (see thread id = 670328, 669275, 693013, 701051, 702720). 

The main problem I found is the same as told by Jeremy: developers need to hardcode a lot of CSS to align Telerik controls to bootstrap style.

For example, if we use the autocompletebox control, we need to create new CSS clases to show correctly all its subelements. Almost the same happens with the Datepicker: the button to display the calendar is not displayed by default. We need to create a class to show it. 

In addition, those controls (and all its elements) need to be correctly aligned to Bootstrap scaffolding. As far as complex controls implement buttons, inputs and other html controls with their own class and their own ids, they are not correcty rendered. 

Like Jeremy, I can also provide some examples if you want. 

Regards, 
Jeremy Schaab
Posted on: 15 Oct 2013 16:23
Jeffrey, I am not sure the best way to provide you the details.  But we are using RadControls with our Admin UI, but that UI also runs on Bootstrap and is further themed by a template.  Essentially, there are challenges with the Grids, Editors (html, image) and the more complex controls.  We had to use a non-styled approach, then add back or explicitly ignore ones that weren't covered in Bootstrap but needed for the controls.

Ultimately, some kind of 'over-ride' on CSS maps may be a good start, but the biggest challenge and concern you may have is with the different versions of these frameworks.  There are some things like using <i> icon notation that would require changes too.

What is the best way for me to provide the details or code examples on how we do it?
ADMIN
Jeff Fritz
Posted on: 15 Oct 2013 16:04
I like the initial feedback on this item.  There are design strategies that we will need to address.  We would like to hear more from the 28 that have voted for this item.  How do you see the controls adapting to Bootstrap?

You've taken a great first step in presenting this feedback to us.  Please encourage more of your friends to vote for this item so that we can see the benefit this change will provide you.  

At the time of this comment, we are planning our future roadmap, and your feedback is VERY valuable to us in that planning activity.
Richard
Posted on: 09 Oct 2013 19:19
Any solution that would allow RADControls to match the Bootstrap 3 CSS.
Nurmemet Suleiman
Posted on: 18 Sep 2013 12:41
we have same issue. I would like to see RadControls can support Bootstrap. It will be help us a lot.

Thanks,
Jeremy Schaab
Posted on: 13 Jun 2013 10:35
We concur, right now we use bootstrap with themes we buy on wrapbootstrap.com and we have to do a lot of meddling around to get the RadControls to look/work right.

My suggesstion is a global CSS setting that would not just come with a bootstrap theme, but allow us to set the CSS folder for the controls to use, this would enable us to use multiple '3rd Party' themes with RADControls.

Right now we are weiging using the controls less because of the lack of HTML5 (it is getting better!) and missing support for Bootstrap.

In the world of competing with the LAMP stack, things like this would be great.