Four Column Layout
The Four Column Layout divides content into four equal quarters.
The Four Column layout is good for galleries or any page that needs to display lists of links or buttons, especially graphical links.
Four Columns can be useful for Home or landing-type pages where several options need to be displayed as a sort of sub-navigation area.
NOTE: Four columns behave differently than other Explore All Column Layouts since they scale to 50% (column halves) at screen sizes of 48em, and then 100% at 25em.
Here the column-quarter class is used along with the inner class.
The inner class creates 1.2em of padding to help separate the columns
Here the column-quarter class is used along with the inner class.
The inner class creates 1.2em of padding to help separate the columns
Here the column-quarter class is used along with the inner class.
The inner class creates 1.2em of padding to help separate the columns
Here the column-quarter class is used along with the inner class.
The inner class creates 1.2em of padding to help separate the columns
Here is where the columns are cleared.
Here the column-quarter class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create boxes with borders and more padding for visual appeal.
Here the column-quarter class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create boxes with borders and more padding for visual appeal.
Here the column-quarter class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create boxes with borders and more padding for visual appeal.
Here the column-quarter class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create boxes with borders and more padding for visual appeal.
Here is where the columns are cleared.
Here the column-quarter class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create boxes with borders and more padding for visual appeal.
A class of grey is used for a light grey background
Here the column-quarter class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create boxes with borders and more padding for visual appeal.
A class of grey is used for a light grey background
Here the column-quarter class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create boxes with borders and more padding for visual appeal.
A class of shadow is used to create a box shadow.
Here the column-quarter class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create boxes with borders and more padding for visual appeal.
A class of info is used to create distinction.
Here is where the columns are cleared.
