A fluid responsive grid layout in Bootstrap 3

Unlike Boostrap 2, Bootstrap 3 doesn't have a .container-fluid mixin to make a fluid container. The .container is a fixed width responsive grid layout. In a large screen, there are excessive white spaces in both sides of one's Web page content.

A fluid grid layout uses all screen width and works better in large screen. It turns out that it is easy to create a fluid grid layout using Bootstrap 3 mixins. The following line makes a fluid responsive grid layout:

.container-fixed;

The .container-fixed mixin sets the content to the center of the screen and add paddings. It doesn't specifies a fixed page width.

Another approach is to use Eric Flowers' CSS style (http://www.helloerik.com/bootstrap-3-grid-introduction)

.my-fluid-container {

  padding-left: 15px;

  padding-right: 15px;

  margin-left: auto;

  margin-right: auto;

}