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>  

Lachlan

Can you place here a fiddle OR any link? – Ithnan

Answer 1

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; } 

}

Lachlan

Although this is an acceptable answer, the correct answer is to change these values ​​with Sass (check @Keith Mifsud answer) – Albina

Answer 2

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;

Deemster

I'm glad @SteveBauman. In case you didn't know..you can also add more sizes to the array. I started doing so lately due to high res 27inch Macs. I add xxl: 1960px etc. You will need to also add value to the $grid-breakpoints array. – Deemster

How do yoy define the grid-breakpoints-array? It looks like the value ratios are arbitrary? – Gleanings

Can you clarify: can I just add a scss file to my html (like a css or js file) or do I need to precompile something? I am really not a fan of precompilation – Antepast

OK so this does require precompilation element. So this isn't an option if bootstrap is loaded from a CDN – Antepast

Answer 3

In Bootstrap 4 use:

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

Padishah

Make sure to use CSS specificity if needed. Otherwise default styles will get applied. – Phonon

Answer 4

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;
  }
}

Special

Answer 5

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

Katushka

Answer 6

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

Bluestocking

I only want the table container to be max width 1400px on browser maximised. At the moment this code ^ doesn't allow the container to resize when browser sized smaller than max. – Lachlan

you can set the max-width:1400px and width:100% .. So when your browser is minimized , your width will adjust as per. If your browser is max than 1400px width, the container will no longer extend – Bluestocking

Answer 7

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;
}

Plovdiv

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!

Brad

Answer 9

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; }
}

Vries

Answer 10

For Bootstrap 4 using Sass guys

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

Enjoy!

Aerolite