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>

Can you place here a fiddle OR any link? – Vishal Panara Jul 20 '16 at 11:42 — Vishal Panara, Jul 20 '16 at 11:42

score 33 · Answer 1 · answered Nov 19 '18 at 02:59

33

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;

answered Nov 19 '18 at 02:59

Keith Mifsud

1,550
1
14
24

4

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. – Keith Mifsud Jan 25 '19 at 22:50
How do yoy define the grid-breakpoints-array? It looks like the value ratios are arbitrary? – Capuchin Jan 26 '21 at 07:29

score 12 · Accepted Answer · answered Jul 20 '16 at 12:46

12

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

}

answered Jul 20 '16 at 12:46

Brian J

5,416
19
94
189

2

Although this is an acceptable answer, the correct answer is to change these values with Sass (check @Keith Mifsud answer) – kanlukasz Apr 24 '20 at 12:27

score 8 · Answer 3 · answered Dec 08 '18 at 14:13

8

In Bootstrap 4 use:

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

answered Dec 08 '18 at 14:13

Keith Turkowski

547
4
9

Make sure to use CSS specificity if needed. Otherwise default styles will get applied. – Yuvraj Patil Mar 20 '21 at 04:06

score 6 · Answer 4 · answered Dec 10 '19 at 18:00

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

score 1 · Answer 5 · answered Jul 20 '16 at 11:38

1

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

answered Jul 20 '16 at 11:38

JT91

35
7

score 1 · Answer 6 · answered Jul 20 '16 at 11:44

1

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

answered Jul 20 '16 at 11:44

Manikandan

1,188
10
18

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. – Brian J Jul 20 '16 at 12:41
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 – Manikandan Jul 21 '16 at 07:11

score 0 · Answer 7 · edited Jul 20 '16 at 12:23

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!

score 0 · Answer 8 · answered Aug 03 '19 at 14:29

0

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

answered Aug 03 '19 at 14:29

gene

156
2
11

score 0 · Answer 9 · answered Jul 20 '20 at 12:47

0

For Bootstrap 4 using Sass guys

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

Enjoy!

answered Jul 20 '20 at 12:47

Novasol

707
8
15

How to increase width of Bootstrap container on Max width?

9 Answers9