Bootstrap grid col doesnt work

Hello,

I’m trying to present a general view that contains three columns (2 GridViews of different models and a main container to edit single selected object.

For some reason the 3 are rendered one under the other but I want them to be side by side horizontaly.

This is my code:




<div class="container-fluid">

    <div class="row">


            <!-- courses -->

            <div class="col-md-3 col-lg-3">

                    <p>

                        <?= Html::a('+', ['create'], ['class' => 'btn btn-success']) ?>

                    </p>

                <?php Pjax::begin(); ?>    <?= GridView::widget([

                        'dataProvider' => $courseDataProvider,

                        'filterModel' => $courseSearchModel,

                        'columns' => [

                            ['class' => 'yii\grid\SerialColumn'],

                            'img',

                            'name',

                            'description',

                        ],

                    ]); ?>

                <?php Pjax::end(); ?>

            </div>

            

            <!-- students -->

            <div class="col-md-3 col-lg-3">

                    <p>

                        <?= Html::a('+', ['create'], ['class' => 'btn btn-success']) ?>

                    </p>

                <?php Pjax::begin(); ?>    <?= GridView::widget([

                        'dataProvider' => $studentDataProvider,

                        'filterModel' => $studentSearchModel,

                        'columns' => [

                            ['class' => 'yii\grid\SerialColumn'],

                            'img_name',

                            'name',

                            'phone',

                            

                        ],

                    ]); ?>

                <?php Pjax::end(); ?>

            </div>

            <!-- students -->

            <div class="col-md-6 col-lg-6">

                    main contianer

            </div>

        </div>

</div>



What am I doing wrong here?

I have something similar with 2 gridviews side by side. You would think that adding up the columns to 12 would work, but I had to use <div class="col-sm-5"> on both for a comfortable fit with a little space in between. You could try a wider layout by making a copy of your main layout and removing the line that says <div class="wrap"> and its end tag, then add padding to the left & right with style tags.

You neet the class .container .

bootstrap grid:container -> row -> col:




<div class="container">

    <div class="row">

        <div class="col-*-*"></div>

        ...

        <div class="col-*-*"></div>

    </div>

</div><!-- /.container -->



I have it in my code




<div class="container-fluid">



by mistake didn’t copy it here

still doesnt work

Thanks for the reply

I don’t understand what you mean

can you please add a code example?

Ok thanks!

I got it

now i just need to find a way to minimize the grids cause it doesnt fit in…

Glad to hear you have it working. What I did to get two gridviews side by side:




<div class="row">

 <div class="col-sm-5">

  <?= //gridview widget code 1 ?>

 </div>

 <div class="col-sm-2">

  <hr>

 </div>

 <div class="col-sm-5">

  <?= //gridview widget code 2 ?>

 </div>

</div>



It did not work right using 2 columns of 6 in the same way you had trouble with 3 columns of 4. Making mine 2 columns of 5 plus a spacer of 2 worked better.