Bootstrap container-fluid on xs devices only

Question

I want to use the full width on xs and sm devices (container-fluid) but just the container class for all other devices What's the best way to put this in place? I've tried jasnys bootstrap which has a container-smooth class but it doesn't centre the content when the screen gets over a certain size...

Answer 1

Overwrite the container class in your CSS and your done:

/* XS styling */
@media (max-width: @screen-xs-max) {
  .container {
    width: inherit;
  }
}

/* SM styling */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  .container {
    width: inherit;
  }
}

Just replace the Less variables with your corresponding px-values.

Answer 2

Or you can do sth like this, and it works too:

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
    .container {
        min-width: 100%;
    }
}

Answer 3

For bootstrap 4.4 & onwards

You can specify different container classes based on the device resolution. please have a look at the below example.

<div class="container-sm">
   /* Do your stuff here */
</div>

For more customization

Reference: https://getbootstrap.com/docs/4.4/layout/overview/#containers