Columns
- Musa Jatkowski
- Ashley Mattingly
- Former user (Deleted)
This article covers how to setup columns within the Classic Editor or the Block Editor.
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.
(See all Aurora WordPress Training.)
See the picture below for an example of stacking horizontal columns.
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>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.