Override Bootstrap Container Width

override bootstrap container width

ORIGINAL + BEST PRACTICE: always move the .well outside of .container to stay idiomatic with Bootstrap.

UPDATE + IF ABOVE IS NOT AN OPTION: Given that you cannot easily modify .container styles and/or move the .well outside of .container, your best bet is JavaScript. Here I have made a script that makes .well expand as the width of the window changes.

Here is a jsFiddle

The idea is that you want a negative value for margin-left and margin-right so that .well expands across the screen.

Set Bootstrap container class to 940px max

according to the bootstrap.css you could build your own container class. These are the classes you have to 'rebuild':

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

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

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.container {
  min-width: 992px !important;
}

You should never override original bootsrap-classes.

---

To ensure that everything works well you could do something like this:

@media (min-width: 992px) {
  .container.max-width-940 {
    max-width: 940px !important;
  }
}

@media (min-width: 1200px) {
  .container.max-width-940 {
    max-width: 940px !important;
  }
}

.container.max-width-940 {
  min-width: 940px !important;
}

and use it like: <div class="container max-width-940"></div>

How to increase the max-width of the container with bootstrap4?

The browser is showing the SASS maps. If you want to simply use CSS, override each container breakpoint...

@media (min-width: 576px) {
  .container {
    max-width: ??px;
  }
}

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

@media (min-width: 992px) {
  .container {
    max-width: ??px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: ??px;
  }
}

CSS Demo: https://www.codeply.com/go/zTBLpNsTDi

SASS Demo: https://www.codeply.com/go/5D8PrphU4b

---

Also see: Set Bootstrap container class to 940px max

Or, using SASS: Bootstrap 4 min width fluid container (change responsive behavior)

Bootstrap: how do I change the width of the container?

Go to the Customize section on Bootstrap site and choose the size you prefer. You'll have to set @gridColumnWidth and @gridGutterWidth variables.

For example: @gridColumnWidth = 65px and @gridGutterWidth = 20px results on a 1000px layout.

Then download it.

Can I make a div override a container in Bootstrap 4?

I've found a way to fix it that works. Actually it wasn't that hard at all. I just deleted the padding on the container and added px-3 to the two paragraphs. This way the quote could be full-width and I keep my layout the way I want it.
Thank you all for thinking with me.

How can I change the width of container to 1400px?

If you use bootstrap SASS port you can easily do that by changing _bootstrap-variables.scss.

In _bootstrap-variables.scss search for $container-large-desktop and change its value to (1370px + $grid-gutter-width).

Default $grid-gutter-width is 30 px. You can change it also.

If you change $grid-gutter-width then change the $container-large-desktop accordingly to get your container size 1400px.

To know how to work with bootstrap SASS check it out : https://github.com/twbs/bootstrap-sass

bootstrap container max-width

The bootstrap containers (container-sm, container-md, container-lg, container-xs) change their width based on the type of device and class used.

so in your case - since you're using container-sm, I simply created an override

.container-sm {
    max-width: 540px;
}

Modified your codepen - https://codepen.io/AbhijatSaxena/pen/GRpMWZr

(I would also recommend setting the max-width for other types of containers as well for consistency)

Reference from bootstrap site

---

Related Topics