Bootstrap grid in K-Template (listview)

[Rakesh]

Hi,

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 http://dojo.telerik.com/IyIYe).

 Appreciate if you can provide solution. 

[Magdalena]

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.

Regards,
Magdalena
Telerik