Loading liquid container only on xs devices

Question

I want to use full width on xs and sm devices (container-liquid), but only the container class for all other devices What is the best way to do this in place? I tried jasnys bootstrap, which has a container-smooth class, but it does not center the content when the screen gets a specific size ...

Answer 1

Overwrite the container class in your CSS and do the following:

/* 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 the corresponding px values.

Answer 2

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

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

and this is for a regular container:

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