Bootstrap 3 grid system does not work correctly within a 3rd party styled div (Kendo)

Question

See issue demonstration: full issue demonstration and sandbox

I would like to use Bootstrap 3 grid system within a <div> element. This <div> element is a Kendo datagrid toolbar which is a full page width <div> element. I do not think the solution is Kendo specific or requires Kendo skills, so please keep reading.

Unfortunately the Kendo CSS applies some style on this <div> element which somehow fools bootstrap 3 grid system width calculation. As a result if I try to use col 12 units within this <div> element it always breaks down to 2 rows. For example col-6 and a col-6 breaks. A col-6 and a col-4 fits to one row.

I can not figure out what causes the problem, and how to prevent it.

Answer 1

See here for an explanation of the issue and a possible workaround:

http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap

Kendo UI uses the default content-box box model (box-sizing CSS property), while Bootstrap uses the non-default bordex-box model and applies it to all elements on the page, including ones that are unrelated to Bootstrap. This breaks the layout of the Kendo UI widgets, which are placed inside a Bootstrap grid layout, forcing us to override the Bootstrap CSS and reapply the content-box box model to Kendo UI widgets. As a result, a Bootstrap grid layout placed inside a Kendo UI widget will not work as expected. In general, multiple level nesting of the two products is bound to break the one that is on the inside, unless an additional CSS rule is used for each new level of nesting.