Bootstrap grid system is not working

2 posts, 0 answers
  1. Michel
    Michel avatar
    44 posts
    Member since:
    Sep 2011

    Posted 14 Feb Link to this post

    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.

  2. Orlin
    Admin
    Orlin avatar
    58 posts

    Posted 16 Feb Link to this post

    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.
Back to Top