Bootstrap grid in K-Template (listview)

2 posts, 1 answers
  1. Rakesh
    Rakesh avatar
    3 posts
    Member since:
    Jul 2013

    Posted 18 Nov 2015 Link to this post


    I am using Kendo List view with k-template. I want to use Bootstrap grid system inside template. I could not get it working. The content in template doesn't align properly.

    I want content to stay within the listview template and behave the grid col-md-* layout. Even I tried changing css.


    I attached the document. Please use the code in Kendo UI Dojo(i.e

     Appreciate if you can provide solution. 

  2. Answer
    Magdalena avatar
    414 posts

    Posted 19 Nov 2015 Link to this post

    Hello Rakesh,

    Bootstrap set the box-sizing CSS property to border-box. Kendo widgets set this value to content-box. If you would like to fix the grid system, you should overwrite this property for the elements inside the Bootstrap grid by the following:
    .mainForm * {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;

    We have also updated the Dojo sample.

    Please, keep in mind that this could negatively affect to layout of Kendo widgets placed into the Bootstrap grid.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top