---
title: "Columns"
canonical: "https://kb.uconn.edu/space/IKB/10770451233/Columns"
format: markdown
---
This article covers how to setup columns within the [Classic Editor](#classic-editor) or the [Block Editor](#block-editor).

## > Macro (anchor)

Classic Editor

Bootstrap is the framework used on Aurora that comes with a built-in responsive grid system. This allows users can create multiple columns of information on a single row that collapses in when the screen is too small to successfully display all of the information side-by-side.

> ⚠️ You must use the **Text **editor to add columns using the DIV tags.

Read about how to implement columns using HTML on [Bootstrap’s CSS guide page](http://getbootstrap.com/css/#grid). 

> Macro (iframe)

(See all [Aurora WordPress Training](https://aurora.uconn.edu/training/).)

See the picture below for an example of [stacking horizontal columns](https://getbootstrap.com/docs/3.4/css/).

![stacking horizontal columns](media://a60bb5d0-c614-4de1-a607-c0cd95d9991e)

### Bootstrap Columns

```
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
```

## > Macro (anchor)

  Block Editor

Use the **Columns block** to insert text, media, and other content into up to six side-by-side columns. When used one after another, the columns create a grid effect.

Check out WordPress’s [Columns Block video and instructions](https://wordpress.com/support/wordpress-editor/blocks/columns-block/).