Can't fit a panel inside a Twitter Bootstrap 3 column grid

Question

I have the following CSS and HTML code :

.container-fluid{
    height:100%;
}

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

/**/

.container-fluid {
    height:100%;
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
    display: table-cell;
    float: none;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-md-7 col-lg-7 no-float" style="padding: 0 !important; border: solid blue">


            <iframe src="http://exame.abril.com.br/tecnologia/facebook/noticias/facebook-nao-tem-planos-de-voltar-a-china-diz-executivo"  style="border: none;"></iframe>

        </div>
        <div class="col-sm-12 col-md-5 col-lg-5  no-float" style=" padding:0; border: solid red">
<div class="row">
    <div class="panel panel-default" style="height: 100%!important; width: 100%!important; border: solid black ">
        <div class="panel-heading">QUESTIONS</div>
        <div class="panel-body">
            <div>
                <a>
                    <form  style="display: inline-block;  ">
                        <div class="input-group col-md-12">
                            <input type="text" class="  search-query form-control" placeholder="Recherche une question sur ce contenu" />
                            <span class="input-group-btn">
                                    <button class="btn btn-default" type="button" >
                                        <span class=" glyphicon glyphicon-search"></span>
                                    </button>
                                </span>
                        </div>
                    </form>
                </a>
            </div>
            <div>
                <button type="button" class="btn btn-question">Ask new question</button>
            </div>

            
        </div>
    </div>
</div>
</div>
</div>
</div>

I want the panel (with questions title) fitting the whole div with class="col-sm-12 col-md-5 col-lg-5 no-float" (100% full height, 100% full width), just like the iframe in the first div, but I've got something like this:

I firstly had issues with columns full height, that I solved reading this post Now I have an issue to fit the panel into a column grid, but I can't even after reading this post

Please how can you help me ?

It looks like you're CSS is overriding how the Bootstrap grid "normally" works — Carol Skelly, Dec 16 '16 at 16:12
I don't recomment using table and Bootstrap together. Bootstrap simplified all the table's difficulties with its grid system. Use divs, cols and rows. — Faruk Yazici, Dec 16 '16 at 16:16
Thx @FarukYazıcı, but I don't think the table is the problem. I just removed it and my issue remains. — kabrice, Dec 16 '16 at 17:07
Don't over-write the bootstrap framework.. Use it instead: You want tables, use them : http://getbootstrap.com/css/#tables — Pogrindis, Dec 16 '16 at 17:07

score 1 · Accepted Answer · answered Dec 16 '16 at 17:48

You have an extra row added and tables don't work like that. That combined with having new vertical alignment set was forcing the questions panel down. Try this and let me know if it works!

 <div class="col-sm-12 col-md-5 col-lg-5  no-float" style="vertical-align:top; padding:0; border: solid red">
            <div class="panel panel-default" style="height: 100%!important; width: 100%!important; border: solid black ">
                <div class="panel-heading">QUESTIONS</div>
                <div class="panel-body">
                    <div>
                        <a>
                            <form style="display: inline-block;  ">
                                <div class="input-group col-md-12">
                                    <input type="text" class="  search-query form-control" placeholder="Recherche une question sur ce contenu">
                                    <span class="input-group-btn">
                                            <button class="btn btn-default" type="button">
                                                <span class=" glyphicon glyphicon-search"></span>
                                            </button>
                                        </span>
                                </div>
                            </form>
                        </a>
                    </div>
                    <div>
                        <button type="button" class="btn btn-question">Ask new question</button>
                    </div>          
                </div>
            </div>
        </div>

.container-fluid{
    height:100%;
}

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

/**/

.container-fluid {
    height:100%;
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
    display: table-cell;
    float: none;
    vertical-align:top;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-md-7 col-lg-7 no-float" style="padding: 0 !important; border: solid blue">


            <iframe src="http://exame.abril.com.br/tecnologia/facebook/noticias/facebook-nao-tem-planos-de-voltar-a-china-diz-executivo"  style="border: none;"></iframe>

        </div>
        <div class="col-sm-12 col-md-5 col-lg-5  no-float" style=" padding:0; border: solid red">
    <div class="panel panel-default" style="height: 100%!important; width: 100%!important; border: solid black ">
        <div class="panel-heading">QUESTIONS</div>
        <div class="panel-body">
            <div>
                <a>
                    <form  style="display: inline-block;  ">
                        <div class="input-group col-md-12">
                            <input type="text" class="  search-query form-control" placeholder="Recherche une question sur ce contenu" />
                            <span class="input-group-btn">
                                    <button class="btn btn-default" type="button" >
                                        <span class=" glyphicon glyphicon-search"></span>
                                    </button>
                                </span>
                        </div>
                    </form>
                </a>
            </div>
            <div>
                <button type="button" class="btn btn-question">Ask new question</button>
            </div>

            
        </div>
    </div>

</div>
</div>
</div>

Thank you ! It works great ! So, you recommend me to use div instead of table ? — kabrice, Dec 16 '16 at 18:04
I think it's unnecessary, bootstrap is set up with it's own rows and columns, you're giving yourself extra work by making your own tables. I'd choose one or the other. Bootstrap is a very nice framework if you like it but haven't read much I recommend going through this http://getbootstrap.com/css/. If you go with your own CSS and use tables the website may be faster (bootstrap is a pretty large library), however it'll be a little more work from on your end to make it responsive. — Benneb10, Dec 16 '16 at 18:15

Can't fit a panel inside a Twitter Bootstrap 3 column grid

1 Answers1