I am a box

I am text inside a container

I am a box inside a container

(Tip: Be wary of styling on the actual container element because its got those crucial paddings on left and right. Probably best to place items inside me and you wont have any layout issues.)

I am text inside the container. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima deserunt ut modi repellendus corrupti similique eaque odio sint dicta ullam animi!

I am text in a container fluid

I am a box inside a container fluid

(Hint: make your viewport wider than 1200px to see me grow)

I am text inside the container. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima deserunt ut modi repellendus corrupti similique eaque odio sint dicta ullam animi!

I am a container-left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima deserunt ut modi repellendus corrupti similique eaque odio sint dicta ullam animi!

I am a container-right

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima deserunt ut modi repellendus corrupti similique eaque odio sint dicta ullam animi!

I am text in a container-content

I am a box inside a container content

(Tip: Great use for when you get a large article back from a CMS and cannot separate it easily and there are some sections that need to break out of the typical content-width size)

I am text inside the container content. I typically come from a cms or a large bucket of content which cannot easily be split up. You might need to style container-content a bit further to your liking.

I am text in a container content

I am text inside the container. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima deserunt ut modi repellendus corrupti similique eaque odio sint dicta ullam animi!

demo-image

I am text inside the container. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima deserunt ut modi repellendus corrupti similique eaque odio sint dicta ullam animi!

I am a container inside the content-container.

I break out and match a regular container. The one thing I am missing is padding on left and right because container-content has that for me.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima deserunt ut modi repellendus corrupti similique eaque odio sint dicta ullam animi!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima deserunt ut modi repellendus corrupti similique eaque odio sint dicta ullam animi!

I am a container-fluid inside the content-container.

I break out and match a regular container-fluid exactly.

lldkjd nks

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima deserunt ut modi repellendus corrupti similique eaque odio sint dicta ullam animi!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima deserunt ut modi repellendus corrupti similique eaque odio sint dicta ullam animi!

I am a full-width element inside the content-container.

I break out and fill the viewport giving you back full control.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima deserunt ut modi repellendus corrupti similique eaque odio sint dicta ullam animi!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima deserunt ut modi repellendus corrupti similique eaque odio sint dicta ullam animi!

I

Am

A

Card

Grid