Reclaim valuable margin space from Bootstrap's "container" element

By John Avis · May 2, 2018

Up to Bootstrap's "lg" breakpoint, valuable space is wasted on margin's when using a "container" element.

Responsive collapsing search filters in Bootstrap

For reasons I don't know, Bootstrap's container class has a fixed-width for the xs, sm, md and lg breakpoints.

Presumably it is so that the developer can plan for the exact width available at each breakpoint. This doesn't sound very "responsive" to me!

On these smaller screens, this margin space is valuable real estate that should be used instead.

container-fluid is 100% width and is exactly what we need on screen widths less than lg, but on a large display like 1980x1080 pixels it's too wide for most applications.

I usually over-ride Bootstrap's default in my own CSS by adding the following instruction (after Bootstrap's CSS):

@media (max-width:1199px) {
		.container{max-width:100%}
	}

This simply instructs that on any screen width up to the lg breakpoint, the container should be 100% width.

© Copyright 2017-2019 John Avis. All rights reserved

This website is not affiliated with or endorsed by Bootstrap or its creators.