Bootstrap modal width - css

Question

I am trying to make a modal popup change it's width so that it matches col-lg-8, col-xs-10
But I just found that modal is fixed width.
So, then I found a css styling that can change the width:
<div class="modal fade" id="mdlBudgets" role="dialog">
<div class="modal-dialog">
<div class="modal-content modal-graph col-lg-8 col-xs-10 well well-sm">
<div class="row">
<div class="col-xs-12">
<span class="glyphicon glyphicon-align-left debit_colour"></span> <strong>Budgets</strong>
</div>
</div>
#if (Model.BarDescriptions.Length == 0)
{
<small><span class="glyphicon glyphicon-info-sign debit_colour"></span> You have no Budgets setup yet.</small>
}
else
{
<div id="budgets"></div>
}
<div class="row">
<div class="col-xs-12 text-right"><span class="glyphicon glyphicon-list"></span> View Budgets</div>
</div>
</div>
</div>
</div>
CSS:
body .modal-graph {
/* new custom width */
width: 700px;
/* must be half of the width, minus scrollbar on the left (30px) */
margin-left: 350px;
}
However, firstly, it's off centre, but my biggest issue is - it's a fixed size. Is there a way to make my modal-graph act like col-lg-8, col-xs-10 ?

Answer 1

As you said .modal-dialog has fixed width so you have to overwrite it. Then to use col-xx-xx class, you have to center them. Something like:
<div class="modal fade" id="mdlBudgets" role="dialog">
<div class="modal-dialog as-container">
<div class="modal-content modal-graph col-lg-8 col-xs-10 well well-sm">
<div class="row">
<div class="col-xs-12">
<span class="glyphicon glyphicon-align-left debit_colour"></span> <strong>Budgets</strong>
</div>
</div>
#if (Model.BarDescriptions.Length == 0)
{
<small><span class="glyphicon glyphicon-info-sign debit_colour"></span> You have no Budgets setup yet.</small>
}
else
{
<div id="budgets"></div>
}
<div class="row">
<div class="col-xs-12 text-right"><span class="glyphicon glyphicon-list"></span> View Budgets</div>
</div>
</div>
</div>
</div>
and css:
#media (min-width: 768px) {
.modal-dialog.as-container {
width: 750px;
}
}
#media (min-width: 992px) {
.modal-dialog.as-container {
width: 970px;
}
}
#media (min-width: 1200px) {
.modal-dialog.as-container {
width: 1170px;
}
}
.modal-dialog.as-container .modal-content {
float: none;
margin: auto;
}