Some code is a bit more complex than others and may interact in different ways. Code like this, I will explain in more depth below. They usually can't be just copied and pasted from the guide, since there has to be more thought put into them. Sometimes, it's minimal thought, like "how many boxes can fit here" and other times, you have to remember to change ids and copy multiple codes.

---

Flexbox — Rows and Columns

Here in Vivarium, we use bootstrap grid/flexbox to make fancy little boxes and have them side by side. A lot of the site was designed with these columns!

In order to make these work, you always have to wrap them in row tags. That means, before and after your columns, with nothing else! Then, each of the inside boxes are a col tag. These can be either just col or have a number attached. These numbers go up to 12 because the way the grid works is that it's split into chunks in a grid 12 wide. The numbers always have to add up to 12 in one row.

Examples of flexbox

One full width column — col=12.

text

Code:

[row]
[col=12][box]text[/box][/col]
[/row]

Two columns equal width — all col=6 — Because 6 + 6 = 12

text

text

Code:

[row]
[col=6][box]text[/box][/col]
[col=6][box]text[/box][/col]
[/row]

Three columns different width — col=4, col=3 , and col=5— Because 4 + 3 + 5 = 12

text

text

text

Code:

[row]
[col=4][box]text[/box][/col]
[col=3][box]text[/box][/col]
[col=5][box]text[/box][/col]
[/row]

Five columns different widths — all just col  — col fits widths with others to form 12. This allows for numbers of columns that don't add up to 12!

text

text

text

text

text

Code:

[row]
[col][box]text[/box][/col]
[col][box]text[/box][/col]
[col][box]text[/box][/col]
[col][box]text[/box][/col]
[col][box]text[/box][/col]
[/row]

---

Flexbox — Vertically Centered

You can also have a column that's vertically centered amidst other boxes! For this, instead of col, you'd use midcol. You'll use the same row code as normal cols.

Example of vertically aligned flexbox

multiline text
multiline text
multiline text
multiline text

text

This box is multiline but uses col instead of midcol!
That means it will start at the top. You can mix and match!

Code:

[row]
[midcol=4][box]multiline text
multiline text
multiline text
multiline text[/box][/midcol]
[midcol=4][box]text[/box][/midcol]
[col=4][box]This box is multiline but uses [font=Courier New]col[/font] instead of [font=Courier New]midcol[/font]!
That means it will start at the top. You can mix and match![/box][/col]
[/row]