Flex Container

The flex container is great to make UI consistent. Difference in text content can make panels and thumbnails inconsistent in terms height.

To fix this issue .container-flex or .row-flex.row-flex-wrap.

View flex container docs ยป

Simple

Nisi nulla nulla Lorem culpa id aliqua mollit incididunt ad culpa aliquip eiusmod do ea. Minim ea fugiat aliqua tempor eu. Quis officia laboris aliquip enim occaecat. Aute reprehenderit aute Lorem aliqua sit nulla est enim culpa et Lorem adipisicing.
Reprehenderit pariatur Lorem dolore sit ullamco amet fugiat ipsum consequat id sint et.
Eu eiusmod eu Lorem reprehenderit consectetur officia eu mollit et. Est cillum et laboris sit ea labore sunt excepteur non dolore. Est pariatur exercitation consequat cillum ea adipisicing et. Deserunt magna cupidatat mollit adipisicing sit magna ipsum labore tempor et.
Panel content

With Header

Panel title

Nisi nulla nulla Lorem culpa id aliqua mollit incididunt ad culpa aliquip eiusmod do ea. Minim ea fugiat aliqua tempor eu. Quis officia laboris aliquip enim occaecat. Aute reprehenderit aute Lorem aliqua sit nulla est enim culpa et Lorem adipisicing.

Panel title

Reprehenderit pariatur Lorem dolore sit ullamco amet fugiat ipsum consequat id sint et.

Panel title

Eu eiusmod eu Lorem reprehenderit consectetur officia eu mollit et. Est cillum et laboris sit ea labore sunt excepteur non dolore. Est pariatur exercitation consequat cillum ea adipisicing et. Deserunt magna cupidatat mollit adipisicing sit magna ipsum labore tempor et.

Panel title

Panel content

With Footer

Content here -- div with .flex-grow Excepteur veniam cupidatat deserunt voluptate et. Qui velit velit ea ut qui irure voluptate. Mollit amet nulla magna cupidatat reprehenderit amet sint quis culpa.
Content here -- div with .flex-grow. Culpa ipsum amet nulla ipsum excepteur tempor cupidatat laborum.
Content here -- div with .flex-grow
Content here -- div with .flex-grow. Aliqua anim voluptate quis incididunt non incididunt et consequat pariatur sint.

With Header and Footer

Title flex-col
Content here -- div with .flex-grow Excepteur veniam cupidatat deserunt voluptate et. Qui velit velit ea ut qui irure voluptate. Mollit amet nulla magna cupidatat reprehenderit amet sint quis culpa.
Title flex-col
Content here -- div with .flex-grow. Culpa ipsum amet nulla ipsum excepteur tempor cupidatat laborum.
Title flex-col
Content here -- div with .flex-grow
Title flex-col
Content here -- div with .flex-grow. Aliqua anim voluptate quis incididunt non incididunt et consequat pariatur sint.
100%x200

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

100%x200

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. .

100%x200

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

100%x200

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

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.