Make grip to fill panel using bootstrap - twitter-bootstrap-3

Question

I have been trying to make my grid to fill the panel it is contained it but I am having issues. I want to two divs representing the grid in the panel body to fill the parent which is the panel body. Here is the markup below:
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Welcome</div>
<div class="panel-body" id="app">
<div class="row">
<div class=" col-lg-4 col-lg-4">
<ul class="list-group">
<li class="list-group-item" v-for="li in list">
</li>
</ul>
</div>
<div class="col-md-8 col-lg-8 ">
<ul class="list-group">
<li class="list-group-item" v-for="li in list"> {{ li.body }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Bootstrap columns automatically include left and right padding. You can remove this by adding a class to the columns as done so by Julien Melissas.
http://julienmelissas.com/no-gutter-column-trick-for-bootstrap/
.row.no-gutters {
margin-right: 0;
margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
Adding these classes to your css file will allow you to add a no-gutters class to your rows.
Here's a Pen to show how it works.
http://codepen.io/mutualdesigns/pen/jAXRKm
If you want to remove the spaces to the left and right of the row inside of the panel, you'll need to override that element's padding in a similar fashion.