align 2 divs in bootstrap modal - css

Question

I don't know if my Title is clear enough.
I try to explain myself with dome code
I have HTML Modal dialog like this
<div id="ModalGraficoCompLav_0" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type=?button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
<h4 class='modal-title'>Stato Componenti e Lavorazioni</h4>
</div>
<div id='ModalBody' class='modal-body'>
<div class='row'>
<div class='col-lg-6'> Componenti
<div id='GraficoComp0'class='ModalGraficoSmall'></div>
</div>
<div class='col-lg-6'>Lavorazioni
<div id='GraficoLav0'class='ModalGraficoSmall'></div>
</div>
</div>
</div>
<div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Chiudi</button>
</div>
</div>
</div>
</div>
the 2 divs col-lg-6 will be filled with jquery flot plugin.
In my css I have these rules:
.ModalGraficoSmall { width: 200px; height:100px;}
Setting width and height is mandatory for jquery flot, If I doesn't set width or height the chart won't appear anymore.
Now, for completeness I put also jquery flot scripts
var opts = {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 2 / 3,
formatter: function (label, series) {
return '<div style="font-size:11px ;text-align:center; padding:2px; color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
},
threshold: 0.1
}
}
},
legend :
{
show: false
}
};
$.plot($("#GraficoComp0"), dataComp, opts);
$.plot($("#GraficoLav0"), dataLav, opts);
this is my result:
what I would like to obtain is this:

Answer 1

Try this setup, in the modal I have 2 panels, just fill in the panel bodies with your chart!
Code:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">Chart One</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">Chart Two</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
Read about the bootstrap grid system here