Kamal Hinduja Geneva, Switzerland (Swiss) - Kendo UI not inheriting Bootstrap styles how to fix?

[kamal]

Hi all,

I'm using Kendo UI with Bootstrap, but the components don't seem to inherit Bootstrap's styles (e.g., buttons, forms). Is there a recommended

way to make Kendo UI components match Bootstrap styling or override them cleanly?

Thanks, Regards

Kamal Hinduja Geneva, Switzerland

 

[Neli]

Hello,

To ensure Kendo UI for jQuery components visually match Bootstrap styles, follow these steps:

1. Use the Kendo Bootstrap Theme

• Kendo UI provides a dedicated Bootstrap theme (e.g., kendo.bootstrap-main.min.css). This theme is designed to closely resemble Bootstrap  styles and reuses many of Bootstrap’s variables.

https://www.telerik.com/design-system/docs/themes/kendo-themes/bootstrap/ 

2. Include Bootstrap CSS

• You should also include the standard Bootstrap CSS (e.g., bootstrap.min.css) in your project. This is necessary for Bootstrap utility classes and layouts to work alongside Kendo components.

3. Correct Order of Stylesheets

• Load Bootstrap CSS first, then the Kendo Bootstrap theme.

4. Applying Bootstrap Classes

• Kendo UI components have their own markup, so applying Bootstrap classes like btn or form-control directly to Kendo elements may not always have an effect. If you need further customization, use custom CSS or modify Kendo templates.

5. Handling Layout and Box Sizing

• Make sure your box-sizing rules do not conflict between Bootstrap and Kendo. The Kendo Bootstrap theme is built to align with Bootstrap’s box model, but custom global CSS may affect layout. If you notice layout issues (e.g., dialogs not expanding as expected), review your CSS for any conflicting rules, especially related to box-sizing or max-width.

6. Official Guidance and Demos

• For more details and live examples, see the documentation:
  • https://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap
  • https://demos.telerik.com/kendo-ui/bootstrap

By following these steps, Kendo UI components should visually integrate with your Bootstrap-based design. If you have specific layout issues (such as dialogs not expanding properly), check for any additional CSS rules or container classes that might affect sizing.

I hope this helps.

Regards,
Neli
Progress Telerik