Containers

Currently Bootstrap 3.3.7 support .container and container-fluid classes. We have extended the support to suit the page needs.

Smooth

As per jasny suggestions, we have added .container-smooth a container to use the same max-width for all view-port sizes. This means that the container size won't jump at media query breakpoints.


    .container-smooth {
        max-width: 1170px;
    }
    @media (min-width: 1px) {
        .container-smooth {
            width: auto;
        }
    }
                        

Table

.container-table provides a better option to to vertical-align: middle for col-*

Note: You need to add .vertical-middle text-center and define height to make in align it in middle.
EXAMPLE

Some content

Some content

Some content

Some content

Some content

Some content

Some content

Some content

Some content

Note: .container-table can only manage 12 columns in a .row. further rows are required to adjust additional columns

Full Page

Another use of container is to generate full height and width container with text in center. The table functions just like fullpage.js with minimal amount of CSS.

Please Click here to view the Demo

Flex

Flex container helps to make columns to even heights. Below is an examples for the implementation on panels, wells and thumbnails

Note: You need to use flex-col and flex-grow to make footer / action buttons to align at the bottom. These classes are best to adjust the body-row of a 3 rowed element.
EXAMPLE
Title flex-col
Content here -- div with .flex-grow
Title
Content here -- div with no footer
Duis pharetra varius quam sit amet vulputate.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.

Login

Currenlty, Login containers exists in 2 types: standard center-align login box and 2 column login box. See the below examples to understand the layout

Standard login box

2 Columns login box

Two column login container is commonly used to support feature like Social Login options. Login system have been essential in web development. Hence, Login-container of 300px and 800px are commonly used by several websites.

Reading Sizes

When it comes to reading sites, large container sizes make it uneasy to read text on reading sites like wiki, blog, journal. furthermore, using offset in grid system, makes the reading width in consistent at breakpoints. Therefore, Classes for different size containers have been added to make container widths customizable. You can also use container-smooth along with these sizes.

Size Class width
Normal Container .container 1170px
Medium Container .container-md 970px
Small Container .container-sm 750px
Extra Small Container .container-xs 480px