title: How to increase width of Bootstrap container on Max width?
body: <p>I've placed a <a href="https://datatables.net/" rel="noreferrer">DataTable</a> within a Bootstrap div of type container. When I run the website on the browser's max width the container for the table adds a scrollbar and cuts off the last column in the table.</p>
  
  <p>I did try using a <code>container-fluid</code> div type as suggested <a href="https://stackoverflow.com/questions/15884102/bootstrap-how-do-i-change-the-width-of-the-container">here</a> but this decreases the width of the tables's container even further.</p>
  
  <p>On inspecting the element it seems that surrounding <code>container body-content</code> inherited form the layout page is adding a margin on the left and right side of the table container:</p>
  
  <p><a href="https://i.stack.imgur.com/Gu5Dj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Gu5Dj.png" alt="enter image description here"></a></p>
  
  <p>One possible solution I'm thinking if to decrease the margin of the inherited <code>container body-content</code> on max width, but I'm not sure how to do that via CSS.</p>
  
  <p>From the screenshot below you can see that the Delete col is being cut off although there is plenty of whitespace wither side of the table to expand:</p>
  
  <p><a href="https://i.stack.imgur.com/vbriS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vbriS.png" alt="enter image description here"></a></p>
  
  <p><strong>Question:</strong></p>
  
  <p>How can you increase width of a Bootstrap container on Max width? </p>
  
  <p>Gist of table container markup:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
  
      &lt;div class="form-group"&gt;
          &lt;div class="table-responsive"&gt;
              &lt;div class="table-responsive" id="datatable-wrapper"&gt;
  
                  &lt;table id="escalation" class="table table-striped table-bordered" cellspacing="0"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th style="font-size: 12px; border-right: 1px solid #7591ac; "&gt;ID&lt;/th&gt;
                              &lt;th style="font-size: 12px; border-right: 1px solid #7591ac; "&gt;Application&lt;/th&gt;
                              &lt;th style="font-size: 12px; border-right: 1px solid #7591ac; "&gt;UID&lt;/th&gt;
                              &lt;th style="font-size: 12px; border-right: 1px solid #7591ac; "&gt;Type&lt;/th&gt;
                              &lt;th style="font-size: 12px; border-right: 1px solid #7591ac; "&gt;Status&lt;/th&gt;
                              &lt;th style="font-size: 12px; border-right: 1px solid #7591ac; "&gt;Statement&lt;/th&gt;
                              &lt;th style="font-size: 12px; border-right: 1px solid #7591ac; "&gt;Created&lt;/th&gt;
                              &lt;th style="font-size: 12px; border-right: 1px solid #7591ac; "&gt;Updated&lt;/th&gt;
                              &lt;th style="font-size: 12px; border-right: 1px solid #7591ac; "&gt;Last Update&lt;/th&gt;
                              &lt;th style="font-size: 12px; border-right: 1px solid #7591ac; "&gt;Next Update&lt;/th&gt;
                              &lt;th style="font-size: 12px; border-right: 1px solid #7591ac; "&gt;Root Cause&lt;/th&gt;
                              &lt;th style="font-size: 12px; border-right: 1px solid #7591ac; "&gt;Details&lt;/th&gt;
                              &lt;th style="font-size: 12px; border-right: 1px solid #7591ac; "&gt;Delete&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          @foreach (HP.ESCALATION.Web.Models.Escalation item in Model)
                          {
  
                              &lt;tr&gt;
                                  &lt;td&gt;@item.ID&lt;/td&gt;
                                  &lt;td&gt;@item.Application&lt;/td&gt;
                                  &lt;td class="td-limit"&gt;@item.EM&lt;/td&gt;
                                  &lt;td class="td-limit"&gt;@item.Event&lt;/td&gt;
                                  &lt;td class="td-limit"&gt;@item.status&lt;/td&gt;
                                  &lt;td class="td-limit"&gt;@item.Statement&lt;/td&gt;
                                  &lt;td class="td-limit"&gt;@item.Created&lt;/td&gt;
                                  &lt;td class="td-limit"&gt;@item.Updated&lt;/td&gt;
                                  &lt;td data-order="@item.UnixTimeStamp" class="td-limit"&gt;@item.UpdatedTime&lt;/td&gt;
                                  &lt;td class="td-limit"&gt;@item.NextUpdate&lt;/td&gt;
                                  &lt;td class="td-limit"&gt;@item.RootCause&lt;/td&gt;
                                  @* Add CRUD buttons to each table row --&gt; *@
                                  &lt;td&gt;&lt;button type="submit" style="background-color: #0CA281;" class="btn btn-success details"&gt;Details&lt;/button&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;button type="submit" class="btn btn-danger delete"&gt;Delete&lt;/button&gt;&lt;/td&gt;
                              &lt;/tr&gt;
  
                          }
  
  
                      &lt;/tbody&gt;
                  &lt;/table&gt;
  
  
  
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Gist of Layout container:</p>
  
  <pre><code>&lt;div class="container body-content" style="margin-top: 90px; margin-bottom: 70px;"&gt;
  
                  @* Main Content Render *@
                  &lt;div id="content"&gt;
                      &lt;div class="content-wrapper main-content clear-fix"&gt;
  
                      &lt;/div&gt;
                      @RenderSection("featured", required: false)
                      &lt;section class="content-wrapper main-content clear-fix"&gt;
                          @RenderBody()
                      &lt;/section&gt;
                  &lt;/div&gt;
  
  
              &lt;/div&gt;  
  </code></pre>