Skip to main content

Large Frame

Frame

Inner Frame

Large Frame

Frame

Inner Frame

All you need to remember is row > column > content. ex: col-xs-12


Responsive


Or just use Auto Widths (col-xs)


Space Between, Around, Center, Top, Bottom (example : between-xs)

FLEX2-GRID

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit quisquam, , perferendis saepe!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit quisquam, cumque dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

Lorem ipsum sit amet consectetur adipisicing elit. Odit quisquam, cumque dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

Lorem ipsum dolor sit dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit quisquam, cumque dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

FLEX3-GRID

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit quisquam, , perferendis saepe!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit quisquam, cumque dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

Lorem ipsum sit amet consectetur adipisicing elit. Odit quisquam, cumque dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

Lorem ipsum dolor sit dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit quisquam, cumque dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

Lorem ipsum sit amet consectetur adipisicing elit. Odit quisquam, cumque dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

Lorem ipsum dolor sit dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit quisquam, cumque dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

FLEX4-GRID

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit quisquam, , perferendis saepe!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit quisquam, cumque dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

Lorem ipsum sit amet consectetur adipisicing elit. Odit quisquam, cumque dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

Lorem ipsum dolor sit dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit quisquam, cumque dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

Lorem ipsum sit amet consectetur adipisicing elit. Odit quisquam, cumque dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

Lorem ipsum dolor sit dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit quisquam, cumque dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

Lorem ipsum sit amet consectetur adipisicing elit. Odit quisquam, cumque dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

Lorem ipsum dolor sit dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit quisquam, cumque dolor alias neque quidem dignissimos praesentium assumenda voluptatibus autem eius esse culpa repudiandae libero quam itaque? Ea, perferendis saepe!

flex-2

flex-2

flex-3

flex-3

flex-3

flex-4

flex-4

flex-4

flex-4

flex-5

flex-5

flex-5

flex-5

flex-5

flex-6

flex-6

flex-6

flex-6

flex-6

flex-6

Space

Between

Flex-End

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid hic obcaecati molestias beatae, aperiam commodi saepe rem veritatis modi delectus nesciunt impedit nemo quod est nihil provident odio repudiandae aspernatur.

Center

Header 2

Header 3

Header 4

Header 5
Header 6

Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper pharetra risus vitae rhoncus. Pellentesque sollicitudin lacinia velit, a placerat dolor fringilla vitae. Vivamus a hendrerit nisl, eu commodo enim. Fusce ac aliquam odio. Integer sit amet elit fringilla, tempor felis vel, vestibulum felis. Cras accumsan, magna quis suscipit lacinia, arcu sem convallis leo, at vulputate urna erat nec mauris. Sed eu egestas dui. In non ullamcorper leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget augue ipsum.

  • List stuff Fusce ac aliquam odio. Integer
  • List stuff Fusce ac aliquam odio. Integer
  • List stuff Fusce ac aliquam odio. Integer
  1. Number List Stuff ac aliquam odio. Integer
  2. Number List Stuff ac aliquam odio. Integer
  3. Number List Stuff ac aliquam odio. Integer

Etiam in vehicula justo. Fancy Box in risus gravida, aliquam nibh a, gravida massa. Nullam nisi ante, tempus eget felis id, laoreet feugiat lorem. Praesent eget convallis quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur ut massa malesuada, blandit nibh nec, pellentesque velit. Nullam accumsan massa augue, et vestibulum tortor molestie eu. Praesent eget ex mi. Donec velit ipsum, congue vel quam non, fermentum feugiat sem. Nunc finibus orci quis ante bibendum consequat. Nullam sit amet massa non arcu suscipit gravida quis nec enim.Inline Link Bold Text Italic Text

Button Link