Enables switching between fluid and fixed layout containers based on screen width media queries, in bootstrap 3.

_container-switch.scss

/*! 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;
		}
	}
}

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 and container-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 below md, 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 on xs screens.

Simply @import into your style after bootstrap is.