Columns

Shop columns in the columns & accessories section of Lowes.com. Find quality columns online or in store.

The column was an architectural invention which allowed for the support of ceilings without the use of solid walls, thereby increasing the space which could be spanned by a ceiling, allowing the entrance of light and offering an alternative aesthetic to building exteriors, particularly in the peristyles of temples and on colonnades along stoas. Columns could also be incorporated (engaged) within walls or be free-standing and carry sculpture to commemorate particular events or people.

Early Columns

The first use of columns was as a single central support for the roof of relatively small buildings but from the Bronze Age (3000-1000 BCE) more sophisticated columns with other functions beyond direct structural support appeared in the Egyptian, Assyrian and Minoan civilizations. Whilst the former civilizations employed stone for their columns, the Minoans used whole tree-trunks, usually turned upside down in order to prevent re-growth, stood on a base set in the stylobate (floor base) and topped by a simple round capital. Krosmaster arena app. These were then painted as in the most famous Minoan palace of Knossos. The Minoans employed columns to create large open-plan spaces, light-wells and as a focal point for religious rituals. These traditions were continued by the later Mycenaean civilization, particularly in the megaron or hall at the heart of their palaces. The importance of columns and their reference to palaces and therefore authority is evidenced in their use in heraldic motifs such as the famous lion-gate of Mycenae where two lions stand each side of a column. Being made of wood these early columns have not survived, but their stone bases have and through these we may see their use and arrangement in these palace buildings.

The First Stone Columns

In ArchaicGreece stone began to replace wood as the primary building material for large buildings. However, the transition was by no means clear-cut. Temples from the 8th to mid-7th centuries BCE at Isthmia, Ephesus and Corinth are believed to have employed wooden columns with stone bases alongside other structural elements in stone. Gradually though, and with the exception of roof beams, stone, with its superior strength and durability became the favoured material used in construction.

Whilst some stone columns were carved in one piece, as buildings became bigger, columns began to be constructed from separate drums. These were individually carved and fitted together using a wooden dowel or metal peg in the centre of the drum. Columns made from individual drums are remarkably resistant to seismic activity. The elasticity provided by the possibility of fractional movements between drums means that the collapse of such columns is almost always due to other destructive forces such as high winds or weakening of the building through the removal of stone elements for re-use elsewhere, rather than earthquakes. Despite this advantage though, the Romans preferred single monolithic shafts for their columns. The Romans also standardised column production from the 1st century BCE, preferring the ratio of 6:5. That is the height of the column shaft was five-sixths of the total height of the column with its base and capital. Celebrated examples of this type of column may be seen in the Pantheon of Rome.

The Architectural Orders

The evolution of columns in the ancient world has been classified within architectural orders. The three principal orders are Doric, Ionic, and Corinthian. First though, we may place Egyptian columns which stood on a base and carried sculpted decoration of leaves on the column shaft and Persian columns which often had animal figures such as bulls as their capitals. In the Greek world the first order was Doric whose columns were wider at the bottom and had a simple capital but no base. Ionic columns stand on a base and have a capital in the form of a double scroll (volute). Corinthian columns are usually slimmer and taller, stand on a base and have a richly decorated capital, usually with sculpted flower and leaf decoration. These three all have vertical fluted carving. The Romans introduced the Tuscan column which had no flutes and a simple base and capital. Roman Doric columns were similar but with flutes. Composite columns appeared which mixed elements of the previous styles and finally, there were Solomonic columns with a twisted shaft.

Columns also incorporated geometric refinements in order to overcome some of the problems of optical illusion in large buildings. This is that actually straight lines seem to be curved when viewed from a distance. Therefore, columns often inclined slightly inwards as they rose, corner columns were slightly fatter and each column bulged slightly in the middle (entasis) all in order for the building to appear perfectly straight. The most famous example of these techniques is undoubtedly the Parthenon on the Athenian acropolis.

Free-Standing Columns

Columns became so much a part of the aesthetic look of a building that the columns themselves began to become independent artistic elements. The bull-man columns of Persepolis and the Caryatids of the Erechtheion in Athens in the 5th century BCE are celebrated as works of art in their own right, independent of the structures they were originally designed to support.

Perhaps the most famous free-standing columns are the Ionic Naxian Sphinx column at Delphi (560 BCE) which was 10m high and Trajan’s Column in Rome (113 CE) which stood over 30 metres high. Nearly 200 m of continuous frieze spiral around the column depicting over 2,500 figures illustrating the emperor’s campaign victories in Dacia. The column was also originally topped by a statue of the emperor himself.

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

How it works

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

New to or unfamiliar with flexbox?Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent .container.

Breaking it down, here’s how it works:

• Containers provide a means to center and horizontally pad your site’s contents. Use .container for a responsive pixel width or .container-fluid for width: 100% across all viewport and device sizes.
• Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
• In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
• Thanks to flexbox, grid columns without a specified width will automatically layout as equal width columns. For example, four instances of .col-sm will each automatically be 25% wide from the small breakpoint and up. See the auto-layout columns section for more examples.
• Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4.
• Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.
• Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with .no-gutters on the .row.
• To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
• Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint).
• You can use predefined grid classes (like .col-4) or Sass mixins for more semantic markup.

Be aware of the limitations and bugs around flexbox, like the inability to use some HTML elements as flex containers.

Grid options

While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Auto-layout columns

Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like .col-sm-6.

Equal-width

For example, here are two grid layouts that apply to every device and viewport, from xs to xl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

Equal-width columns can be broken into multiple lines, but there was a Safari flexbox bug that prevented this from working without an explicit flex-basis or border. There are workarounds for older browser versions, but they shouldn’t be necessary if you’re up-to-date.

Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

Variable width content

Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.

Equal-width multi-row

Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.

Responsive classes

Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

All breakpoints

For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.

Stacked to horizontal

Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked before becoming horizontal with at the small breakpoint (sm).

Mix and match

Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment

Horizontal alignment

No gutters

The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns.

Here’s the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via attribute selector. While this generates a more specific selector, column padding can still be further customized with spacing utilities.

Need an edge-to-edge design? Drop the parent .container or .container-fluid.

In practice, here’s how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).

Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Column breaks

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .rows, but not every implementation method can account for this.

You may also apply this break at specific breakpoints with our responsive display utilities.

Reordering

Order classes

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.

Offsetting columns

You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

Offset classes

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in the grid example.

Margin utilities

With the move to flexbox in v4, you can use margin utilities like .mr-auto to force sibling columns away from one another.

Nesting

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Sass mixins

When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Variables

Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

Mixins

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual column while $grid-gutter-width allows breakpoint-specific widths that are divided evenly across padding-left and padding-right for the column gutters.

Grid tiers

Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the $grid-breakpoints and $container-max-widths to something like this:

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in px (not rem, em, or %).