¶ Multi-Column Layouts
Use row and col classes to create menu panels or table-style layouts.
Wrap the entire panel or table in a
<div class="col-group"></div>.
To render Markdown inside columns, leave a blank line before and after the Markdown.
¶ 2 Columns
- A list in the first column
- Second item on first column list
- Sun in second column list.
- Moon in second column list.
<div class="col-group">
<div class="row">
<div class="col">
1. A list in the first column
1. Second item on first column list
</div>
<div class="col">
- <i class="fas fa-sun"></i> Sun in second column list.
- <i class="fas fa-moon"></i> Moon in second column list.
</div>
</div>
</div>
¶ 3 Columns
- A list in the first column
- Second item on first column list
- Sun in second column list.
- Moon in second column list.
Bold text in third column.
<div class="col-group">
<div class="row">
<div class="col">
1. A list in the first column
1. Second item on first column list
</div>
<div class="col">
- <i class="fas fa-sun"></i> Sun in second column list.
- <i class="fas fa-moon"></i> Moon in second column list.
</div>
<div class="col">
**Bold text in third column.**
</div>
</div>
</div>
¶ 4 Columns
- A list in the first column
- Second item on first column list
- Sun in second column list.
- Moon in second column list.
Bold text in third column.
Image in fourth column.
<div class="col-group">
<div class="row">
<div class="col">
1. A list in the first column
1. Second item on first column list
</div>
<div class="col">
- <i class="fas fa-sun"></i> Sun in second column list.
- <i class="fas fa-moon"></i> Moon in second column list.
</div>
<div class="col">
**Bold text in third column.**
</div>
<div class="col">
Image in fourth column.
</div>
</div>
</div>