OBE:BS4 LAYOUTS

A set of default Bootstrap 4 layouts, formatted exclusively with default Bootstrap 4 classes (and no OBE:BS4 classes or extensions).

Container Grid

L A Y O U T S

These are your Bootstrap 4 standard container grid layouts.

1x4 2x2 4x1

xs/sm md lg/xl

Column 1

Column 2

Column 3

Column 4

1x3 2x1 3x1

xs/sm md lg/xl

Column 1

Column 2

Column 3

1x3 3x1

xs/sm/md lg/xl

Column 1

Column 2

Column 3

1x2 2x1

xs/sm/md lg/xl

Column 1

Column 2

1x1 1x2

xs/sm md/lg/xl

Column 1

Column 2

1x1 1x2

xs/sm md/lg/xl

Column 1

Column 2

2x2 (Column Break)

xs/sm/md/lg/xl

One

Two

Three

Four

Container Fluid Grid

L A Y O U T S

These are your Bootstrap 4 fluid container grid layouts.

1x2 2x1

xs/sm md/lg/xl

Column 1

Column 2

1x4 2x2 4x1

xs/sm md lg/xl

Column 1

Column 2

Column 3

Column 4

1x2 2x1 (Gutterless)

xs/sm md/lg/xl

Column 1

Column 2

1x2 2x1 (Gutterless Flush)

xs/sm md/lg/xl

Column 1

Column 2

Responsive Container

L A Y O U T S

These are Bootstrap 4 responsive container layout examples.

Responsive Small Container

100% Wide to Small Breakpoint

100% : "sm" Breakpoint

Responsive Medium Container

100% Wide to Medium Breakpoint

100% : "md" Breakpoint

Responsive Large Container

100% Wide to Large Breakpoint

100% : "lg" Breakpoint

Responsive XL Container

100% Wide to XL Breakpoint

100% : "xl" Breakpoint

Row Column

L A Y O U T S

These are examples of different Bootstrap 4 row column layouts.

1x4 2x2 4x1

xs sm/md lg/xl

One

Two

Three

Four

1x5 5x1

xs/sm/md lg/xl

One

Two

Three

Four

Five

1x6 2x3 3x2 6x1

xs sm md/lg xl

One

Two

Three

Four

Five

Six

Hero

S E C T I O N S

These are some Bootstrap 4 hero section layouts.

Basic Hero

A Big Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio sapien, scelerisque et leo non, ornare vehicula enim. Duis ac luctus dolor. Etiam a mollis erat, vitae varius erat.

Left Image Hero

A Big Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio sapien, scelerisque et leo non, ornare vehicula enim. Duis ac luctus dolor. Etiam a mollis erat, vitae varius erat.

Right Image Hero

A Big Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio sapien, scelerisque et leo non, ornare vehicula enim. Duis ac luctus dolor. Etiam a mollis erat, vitae varius erat.

Card Group

L A Y O U T S

These are your Bootstrap 4 card group layouts.

Card Group

CARD TITLE

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

CARD TITLE

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

CARD TITLE

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card Group + Footer

CARD TITLE

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

CARD TITLE

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

CARD TITLE

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card Deck

CARD TITLE

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

CARD TITLE

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

CARD TITLE

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card Deck + Footer

CARD TITLE

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

CARD TITLE

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

CARD TITLE

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card Columns

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title

Card title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago