Is Bootstrap compatible with ASP.NET Telerik controls?

Question

I have developed a site using ASP.NET Telerik controls and components. Its not working (positioning, screen resolution) fine on mobiles devices (scaling across resolutions).

I decided to integrate bootstrap in my site but bootstrap-responsive styles are not adjusting what I need.

Has anyone tried bootstrap with asp.net Telerik components? are both compatible?

Any suggestion/proper guide ?

Mascagni

Answer 1

There are incompatibilities between some frameworks like Bootstrap and Telerik. The main problem is different frameworks make use of CSS style names and if two different frameworks use the same name, there will be conflicts. I noticed this with the latest version of Bootstrap (3.0) and the latest version of Telerik, in some Telerik controls the checkbox formatting was over-ridden by Bootstrap. Unfortunately it's very tricky to fix, you need to customize it to a point that it would be easier not to use the framework at all.

Accessible

It is not so much about names, the issue is rather in global element selectors bootstrap uses, they can mess up any layout or control/widget. – Capuchin

@Capuchin You can prefix bootstrap to help with that. – Triliteral

Answer 2

If you need bootstrap to make your page responsive, you can use RadPageLayout: http://www.telerik.com/products/aspnet-ajax/responsive-page-layout.aspx. Thus, you can drop Bootstrap. Here is its documentation: http://www.telerik.bg/help/aspnet-ajax/page-layout-overview.html. In case you are using some styling it provides, perhaps RadFormDecorator can help you style the forms you have: http://demos.telerik.com/aspnet-ajax/formdecorator/examples/overview/defaultcs.aspx.

Capuchin

Answer 3

Link Says

It depends on what you're trying to accomplish. In general, bootstrap

2.0 is a lot easier to work with along with Telerik because they style less of the default elements, like . In 2.0, they require you to add some class to a element, which means that they don't try to style a Telerik grid, for example. This makes it look better.

What you won't get is a "Bootstrap themed" version of the Telerik controls. Continuing with the Telerik grid example, if you use that in conjunction with Bootstrap it will look like a Telerik grid, not a Bootstrap table, with it's nice pager buttons, etc. That will take a lot of work to change, and I don't recommend it. Telerik emits html with its own CSS class names and mapping that back to Bootstrap would be a chore. I've found, actually, that with Bootstrap I use a lot less of Telerik than I did before, and just use more straight html + Bootstrap.

If you do decide to integrate Telerik in your site, I recommend the Telerik "Simple" theme, which seems to match Bootstrap's default colors best.

Foregoing

There is a Bootstrap skin from Telerik now, so it can help with such integration. – Capuchin

Answer 4

RadImageEditor icons are hidden when I use bootstrap.

So I must say that it is not 100% compatible.

Semipalatinsk

Can you please share how to reproduce the hidden icons problem? I tried to reproduce it with the latest Q2 2014 version of Telerik.Web.UI but to no avail. Here is the test: screencast.com/t/GekspoZMDFo – Kazimir

Answer 5

If you let me do a suggestion, you can check for MDBootstrap (it´s a front-end framework built on top of Bootstrap). There you will find an article with free ASP.NET templates.

Fiddlestick

Answer 6

Yes, I recently build ASP.NET 2013 Web Application using Bootstrap and Telerik ASP.NET Ajax version Q2 2015 and .NET Framework 4.5.1 . During my implementation of this project, I had one issue: • One issue is that when I use the RadAjaxManager, I got this error:

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

• To fix this, I wrapped the code section with the control.

Dagmar