Change to container-fluid on mobile devices

[donboe]

Hi all. I am using Bootstrap 4. Right now for a design i use class container to determine the width of the website. (> 961px) On mobile devices (< 960px) though I would like to switch from container to container fluid. What would be the best way to do so. Thank you in advance!

Edit: OK. I adjusted the default settings for the container in my custom stylesheet like this:

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

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

That is working fine, but I am wondering if there are more appropriate approaches to do this. Again thank you in advance.

[SamA74]

Unless I’m missing something it’s as simple as just having max-width: 960px; applied to the container. No need for queries or Bootstrap.
Assuming a block element such as div its default width value of auto will already be fluid and fit the full width of the screen when it’s less than the max-width value, and be no more than the max-width when the screen is bigger.

[donboe]

Hi there @SamA74 . This are the settings in Bootstrap.css

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

So there is a max-width set for different the devices. But like I said on mobile devices (< 992px) I would like to have the default settings (100% minus the padding left and right) . Since I don’t want to touch the original Bootstrap.css I did it this way in my custom stylesheet!

Or I missunderstand you

[SamA74]

Forgiving my ignorance of Bootstrap, but I would say if their class does not behave the way you intend for the element, then don’t use that class. Either find another class in the framework that does as you intend, or create your own class.

@donboe

I would like to have the default settings (100% minus the padding left and right)

That is exactly what width: auto; does, which is the default behaviour of any block element in vanilla HTML before any CSS at all.
But then there’s always there Bootstap to come and rescue you from such simplicity.

[donboe]

Hi there @SamA74. Isn’t that exactely what I’m doing. Instead of writing css for a custom container. I just overwritten the fixed values of container with two simple declarations:

.container {
    max-width: 100%;
}

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

which was not a lot of work (and simple as well) . I was just wondering if it was possible in another way. Such as for example the declarations for the columns in Bootstrap.

[SamA74]

@donboe

Instead of writing css for a custom container. I just overwritten the fixed values of container with two simple declarations:

I suppose it may be OK to override Bootstrap’s default behavior if you want the same for the whole project.
But a simple custom class would avoid conflicts with Bootstrap’s default rules and creating non-standard behavior for the standard classes in the framework.

.myContainer {
    max-width: 960px;
    margin:  0 auto ; /* assuming you want it centred */
}

No need for a query, the default width: auto; takes care of smaller screens.

Again I have not closely studied Bootstrap, but I would have thought it would have this kind of basic requirement covered, I’m sure someone should know.