How to increase width of Bootstrap container on Max width?

Question

I've placed a DataTable 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.

I did try using a container-fluid div type as suggested here but this decreases the width of the tables's container even further.

On inspecting the element it seems that surrounding container body-content inherited form the layout page is adding a margin on the left and right side of the table container:

One possible solution I'm thinking if to decrease the margin of the inherited container body-content on max width, but I'm not sure how to do that via CSS.

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:

Question:

How can you increase width of a Bootstrap container on Max width?

Gist of table container markup:

<div class="container">


    <div class="form-group">
        <div class="table-responsive">
            <div class="table-responsive" id="datatable-wrapper">

                <table id="escalation" class="table table-striped table-bordered" cellspacing="0">
                    <thead>
                        <tr>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">ID</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Application</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">UID</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Type</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Status</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Statement</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Created</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Updated</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Last Update</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Next Update</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Root Cause</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Details</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Delete</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (HP.ESCALATION.Web.Models.Escalation item in Model)
                        {

                            <tr>
                                <td>@item.ID</td>
                                <td>@item.Application</td>
                                <td class="td-limit">@item.EM</td>
                                <td class="td-limit">@item.Event</td>
                                <td class="td-limit">@item.status</td>
                                <td class="td-limit">@item.Statement</td>
                                <td class="td-limit">@item.Created</td>
                                <td class="td-limit">@item.Updated</td>
                                <td data-order="@item.UnixTimeStamp" class="td-limit">@item.UpdatedTime</td>
                                <td class="td-limit">@item.NextUpdate</td>
                                <td class="td-limit">@item.RootCause</td>
                                @* Add CRUD buttons to each table row --> *@
                                <td><button type="submit" style="background-color: #0CA281;" class="btn btn-success details">Details</button></td>
                                <td><button type="submit" class="btn btn-danger delete">Delete</button></td>
                            </tr>

                        }


                    </tbody>
                </table>




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

Gist of Layout container:

<div class="container body-content" style="margin-top: 90px; margin-bottom: 70px;">

                @* Main Content Render *@
                <div id="content">
                    <div class="content-wrapper main-content clear-fix">

                    </div>
                    @RenderSection("featured", required: false)
                    <section class="content-wrapper main-content clear-fix">
                        @RenderBody()
                    </section>
                </div>


            </div>  

Answer 1

I would like to share an idea on how to make the bootstrap container class similar in behavior to "max-width: none;". (in case you don't need viewport overflow)

If you set the bootstrap "$container-max-widths"-variables greater or equal than the "$grid-breakpoints"-variables they work like "max-width:none;"

$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1230px,
    xxl: 1400px
);

$container-max-widths: (
    sm: 576px,
    md: 768px,
    lg: 1258px,
    xl: 1259px,
    xxl: 1260px
);

Results in:

@media (min-width: 768px)
.container, .container-md, .container-sm {
    max-width: 768px;
}

Answer 2

For Bootstrap 4 using Sass guys

@include media-breakpoint-up(xl) {
    .container {
        max-width: 1440px;
    }
}

Enjoy!

Answer 3

I needed mine to work with an extra large screen as well, so I added below.

/* large devices */
@media (min-width: 1200px) {
  .container {
     max-width: 1200px;
   }
}
/* extra large devices */
@media screen and (min-width: 1800px) {
  .container {
    max-width: 1800px;
  }
}

Answer 4

According to this: "https://developer.mozilla.org/en-US/docs/Web/CSS/max-width" - "none" is available and in Bootstrap I think works better:

@media only screen and (min-width : 1200px) {
    .container { max-width: none; }
}

Answer 5

In Bootstrap 4 use:

@media only screen and (min-width : 1200px) {
    .container { max-width: 1500px; }
}

Answer 6

None of the answers above are good solutions. You can easily change bootstrap's variables by creating a new _project_variables.scss and import it before bootstrap in your main scss file. For example:

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1280px
) !default;

Answer 7

The solution that worked in this case and still allowed the container to resize on smaller resolutions, was to target the CSS using @media:

@media only screen and (min-width : 1200px) {

    .container { width: 1500px; } 

}

Answer 8

One possible solution I'm thinking if to decrease the margin of the inherited container body-content on max width, but I'm not sure how to do that via CSS.

Try adding the following to your CSS

.container.body-content{
  margin-left:0;
  margin-right:0;
  padding-left:0;
  padding-right:0;
}  

Without having a working demo to test this on it's difficult to tell if this will be good enough, or if it would need refinement.

Good luck!

Answer 9

You can override the bootstrap css, by adding the css for container as

.container { width: 1400px; } 

make sure this css file is added after the bootstrap css

Answer 10

To increase the width of the container target the container with css:

.container{
   max-width: 1400px; //Or whatever value you need
}

You can use media queries to specify what breakpoints this style will apply too