2

I'm using Bootstrap 4 with the container at default width on my desktop screen.

I want the main content section of my app to be max 940px container on big screen.

Do I simply override the bootstrap container class, or create new class container-2? or something else?

Edit

enter image description here

TimothyAURA
  • 1,329
  • 5
  • 21
  • 44

4 Answers4

7

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>

jsadev.net
  • 2,800
  • 1
  • 16
  • 28
  • 1
    Ill try this for now I think. – TimothyAURA Dec 13 '18 at 11:56
  • forgot to say, that you have to keep using the container-class to ensure, that everything is working like it does before. Take a look at my updated answer. – jsadev.net Dec 13 '18 at 12:05
  • Added the 3 classes to the style.css, and changed "container" to "container max-width-940" and hasn't made container smaller. Added screen cap of chrome inspector to OP,. – TimothyAURA Dec 14 '18 at 11:28
  • My fault.. just remove the spaces between `.container` and `.max-width-940` like `.container.max-width-940`. Edited my answer. And here is a [working example](https://www.bootply.com/3zl47dD4rn) – jsadev.net Dec 14 '18 at 11:44
1

Since the Bootstrap container is responsive and uses media queries to set the max-width.

The container alone is only used to define width, auto margins and padding. Other grid class (ie row, col) are not dependent on it, so it would be easiest to define your own custom container.

To define your own container-940...

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

Demo: https://www.codeply.com/go/QOAjmGLp7K

Or, if you want to use the existing .container the overrides would be...

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

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

Demo: https://www.codeply.com/go/QOAjmGLp7K

If you want to change the max-width to be smaller on smaller widths than you'd adjust the media queries as desired:

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

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

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

@media (min-width: 1200px) {
  .container {
    max-width: 940px;
  }
}
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
0

change css in bootstrap file

click on above link and replace that pointed 2 value with 940px in bootstrap.min.css file.

Sanjay Mangaroliya
  • 4,286
  • 2
  • 29
  • 33
0

Maybe something very obvious but it depends which reference is first in your code: bootstrap CSS or your personal CSS file. All things equal the last reference wins.

adi
  • 31
  • 4