Last active
November 25, 2015 03:02
-
-
Save ucavus/13fb483dabab0ce9dec9 to your computer and use it in GitHub Desktop.
Enables switching between fluid and fixed layout containers based on screen width media queries, in bootstrap 3.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! Container Switch, Copyright 2015 ucavus, Licence: MIT (https://opensource.org/licenses/MIT) */ | |
@each $cs-size, $cs-screen | |
in ( | |
sm: ( | |
min: $screen-sm-min, | |
width: $container-sm | |
), | |
md: ( | |
min: $screen-md-min, | |
width: $container-md | |
), | |
lg: ( | |
min: $screen-lg-min, | |
width: $container-lg | |
) | |
) { | |
@media (min-width: map-get($cs-screen, min)) { | |
.container-#{$cs-size}, | |
.container-fluid-#{$cs-size} { | |
@include container-fixed; | |
} | |
.container-#{$cs-size} { | |
width: map-get($cs-screen, width); | |
} | |
.container-fluid-#{$cs-size} { | |
width: auto; | |
} | |
.row-#{$cs-size} { | |
@include make-row; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Provides the following classes:
container-sm
container-fluid-sm
row-sm
container-md
container-fluid-md
row-md
container-lg
container-fluid-lg
row-lg
You can add the standard
container
andcontainer-fluid
classes if the element should always behave like a container then use these classes as modifiers. E.g.,container-fluid container-md
will be fluid for screens belowmd
, and fixed otherwise.Using only these classes will mean the element does not behave like a container at all until it's the minimum width. E.g.
container-fluid-sm
would mean it's unstyled onxs
screens.Simply
@import
into your style after bootstrap is.