This is a migrated thread and some comments may be shown as answers.

Bootstrap grid system is not working

5 Answers 256 Views
Window
This is a migrated thread and some comments may be shown as answers.
Michel
Top achievements
Rank 1
Michel asked on 14 Feb 2017, 07:45 PM

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.

5 Answers, 1 is accepted

Sort by
0
Orlin
Telerik team
answered on 16 Feb 2017, 06:30 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Matthew
Top achievements
Rank 1
Veteran
answered on 10 Sep 2019, 09:43 PM
Did something change in kendo recently?
The dojo does not show the columns as I expected.
0
Dimitar
Telerik team
answered on 12 Sep 2019, 12:45 PM

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:

Regards,
Dimitar
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.
0
John
Top achievements
Rank 1
Veteran
answered on 29 Mar 2021, 03:17 PM
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...
0
Neli
Telerik team
answered on 31 Mar 2021, 11:05 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Window
Asked by
Michel
Top achievements
Rank 1
Answers by
Orlin
Telerik team
Matthew
Top achievements
Rank 1
Veteran
Dimitar
Telerik team
John
Top achievements
Rank 1
Veteran
Neli
Telerik team
Share this question
or