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

Bourque

Have you noticed a need for this? container loses the "boxed" layout on xs devices naturally. – Deckhouse

It doesn't quite use the full screen width on xs devices I've tested it, the container-fluid behaviour isn't seen on xs – Bourque

The easiest way would be to create a custom @media query and customize the .container class. – Deckhouse

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.

Adriatic

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

Hydrous

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

Dispraise

Just using the container-md class would work (md because they want 100% on both xs and sm). Using both classes will make one take priority over the other. – Keon

@SiddharthBhansali but in that case, you have to write custom CSS for padding. As container-fluid comes with its own feature so it's better to use which is the official recommendation. – Dispraise

You didn't understand my comment. I am saying you cannot use container-sm and container-fluid together. One will take precedence. OP wants 100% on xs and sm, but default container on other screens. Even by the picture you uploaded from the docs container-md does exactly that. – Keon

Answer 4

.container sets a max-width at each responsive breakpoint and width: 100% on viewports thats less 576px wide. To let container take all space on small viewport you must specify <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> in the head section. Otherwise there will be magins on left and right.

Cataract

Answer 5

you can add a copy of the same container and configure it visible only in the sizes you want with the classes hidden-xx and visible-xx like this:

<div class="container-fluid hidden-md hidden-lg">
   your content here
</div>

and this for the normal container:

<div class="container hidden-xs hidden-sm">
       your content here
    </div>

Concoct

you'd then need to duplicate your content though to accommodate both formats (ie xs, sm vs md, lg) – Killam

Unnecessary duplication of content. – Sym