Bootstrap grid system is not working

[Michel]

The Boostrap grid system gives wrong result in a Window.
The grid seems to have only 9 columns.

My View :

@(Html.Kendo().Window()
    .Name("window")
    .Title("My window")
    .Width(400)
    .Content(@<text>
    <div class="row">
      <div class="col-md-3">
        First col
      </div>
      <div class="col-md-3">
        Second col
      </div>
      <div class="col-md-3">
        Third col
      </div>
      <div class="col-md-3">
        Fourth col
      </div>
    </div>
    </text>)
)

The result is shown in the png file.

Any suggestions will be very appreciated.

[Orlin]

Extension settings

Hello Michel,

As noted in this article on using Kendo UI with Bootstrap, Kendo UI widgets use content-box box model whereas Bootstrap uses border-box. In order to utilize the Bootstrap grid system with Kendo UI widgets you need to reset the box sizing to content-box. Have a look at this dojo example for a demonstration: http://dojo.telerik.com/eWOGO

I prepared it using your code with the addition of a .container-fluid wrapper element. Please note the added CSS rules.

I hope this helps.

 

Regards,
Orlin
Telerik by Progress

[Matthew]

Did something change in kendo recently?
The dojo does not show the columns as I expected.

[Dimitar]

Hello Matthew,

 

The viewport of the right-side of the Dojo sandbox is too small for the col-md size. I assume that this is the reason as to why you are not able to see the columns in the Window.

Just open the fullscreen version of the Dojo and you will be able to see the columns rendered correctly, as the viewport is bigger:

• http://runner.telerik.io/fullscreen/IFiGulAq/3

Regards,
Dimitar
Progress Telerik

[John]

What am I missing here?  The bootstrap grid layout is responding to the overall size of the browser window.  I would have expected it to respond to the size of the Kendo Window.  It is very possible that the browser window would be large but the kendo window when resized would need to respond accordingly...

[Neli]

Hi John,

The way Bootstrap, and media query as a general, works is through the browser window size, not the surrounding element size. As marked in the Boostrap documentation the 'col-md' class is applied on Medium devices Desktops (≥992px)

Regards,
Neli
Progress Telerik