Bootstrap + material theme

3 posts, 0 answers
  1. Mike
    Mike avatar
    13 posts
    Member since:
    Apr 2016

    Posted 02 Dec 2018 Link to this post

    I'm using bootstrap with a material theme for bootstrap in my project.  I want my kendo controls to look material as well.  Currently for bootstrap v4 I must use the kendo bootstrap v4 file to keep my regular bootstrap formatting working, this means my kendo controls look nothing like I want them to look. Bootstrap should not be a "theme".  Are there any new "fixes" that can be applied to make this scenario work?  Is there a way to modify the current material theme in a way that doesn't break bootstrap?  The theme builder doesn't give anywhere near enough customization to achieve a material look.


    It would be good if in the future you could separate theming from the layout system so your bootstrap file is additive to any theme the user wants to use. Right now we are frantically evaluating all options and that includes eliminating Kendo UI completely unfortunately.  I am hoping there is a solution because kendo is already in, but more work has been invested in the overall app design.


    Thank you in advance

  2. Ivan Danchev
    Ivan Danchev avatar
    1680 posts

    Posted 05 Dec 2018 Link to this post

    Hello Mike,

    We offer a number of built-in themes with Bootstrap v3 and Bootstrap v4 themes specifically designed to replicate the look and feel of Bootstrap. The other LESS themes apply different dimensions to the widgets so they need to use a different base file (kendo.common.css) and not kendo.common-bootstrap.min.css.
    There are differences in the layout used by Kendo UI and that of Bootstrap, which requires additional CSS to be applied, see the following documentation sections for more details: As for the Material theme, do you use the LESS or SASS Material theme (the latter follows the Material Design Guidelines)? Could you link a dojo example, which demonstrates the scenario in which the Material theme breaks Bootstrap? This will give us a better idea of the issue you are facing and we will try to come up with a workaround.

    Ivan Danchev
    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.
  3. Mike
    Mike avatar
    13 posts
    Member since:
    Apr 2016

    Posted 05 Dec 2018 in reply to Ivan Danchev Link to this post

    Thanks for the reply. 

    At the moment I was using the all.css which is in the kendo-theme-material/dist folder as i was having some issues with the sass import in my project. I believe my co-worker tried all the fixes he came across in the existing documentation, but I will try and get a scaled down example sooner than later.  Thanks again.

Back to Top