Advanced Formatting with Containers

Available to &

This guide is based on Bootstrap 5 or BS5. Upgrade to BS5 in your styling settings under the css tab. As an advanced formatting guide, it also assumes you know how to use bb code, and in particular how to use [row] [/row] and [col] [/col].

About Containers and Sections

When you got grandmaster or another higher tier, you got access to something called containers and sections. These basically let you make your own bb code blocks. This is as powerful as you make it you can even create entirely new elements like my in-article timelines, but that requires a bit of experience with CSS. This guide focuses on how you can use the CSS already written for your page to make even nicer responsive layouts for your articles.

Containers vs Sections

What's the difference between containers and sections, really? Well, a container makes a box around the content you put it on. A section also makes a box, but this box is in-line. [section:mark]This fancy box is a section[/section], while

[container:alert alert-secondary]This fancy box is a container[/container]

The difference to pay attention here, is that the section flowed with the rest of the text, while the container broke off into it's own paragraph.

Containers, sections, and classes

Both containers and sections use CSS classes to work. CSS classes are blocks of styling that we can apply as we like. World Anvil uses a prewritten CSS called Bootstrap to put together their site, and we can use those classes too. You might've already used it in the past to create custom column widths.
The classes are applied to the containers and sections by adding the name of it after : in the bb code. You can use as many classes as you want, just make sure you put a space between each class. Classes often start with a period when you see them in the html, but when making containers and sections we leave the period out.

Responsive design

When we want to make a website that works nice on mobile and big screens we need to use something called responsive design. Responsive design uses code that changes based on how wide the screen trying to access the article is. The code is usually built around a series of breakpoints, certain predetermined widths where they switch over to a different set of rules.
You might have noticed that columns expand to be full width on mobile. That's handy because most of the time that would be way too slim to read. Making articles that are nice on small and big screens really isn't as tricky as you might think. Mostly it's remembering that on mobile the text will usually be presented in the same order it is in the editor.
Bootstrap uses the breakpoints shown in the following table. This is worked into most of the CSS classes, and that means we can use them too. Most of the time the infix, the short two letter code, is added second-to-last. The infix will make the styling only apply to screens of that width and wider. You might have seen or used col-md-8 before. Now you know what the md means and what it does.

If you're on a desktop, you can mess around with this page really easily by changing the width of your browser. As you make the window smaller, you'll notice more and more of the columns below become full width. If you make it really small, this section of the article will disappear entirely.

#

sm

md

lg

xl

xxl

Breakpoint	Class Infix	Dimensions
Extra small	n/a	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Row

If you've made a lot of columns, you might at some point have wished that you could center an image perfect with your content, or line up the end rather than the beginning. You may have even used some [br]'s to push it down. It's a clever solution, but it makes your article harder to read on mobile, and it doesn't scale well on bigger and smaller screens than the one you use personally.
By replacing [row] [/row] with [container:row] [/container] we can have finer control over the behaviour of our rows and columns. You can add the classes below to the container to make it work exactly the way you want it to.

Vertically Aligning Columns

End the horror of using blocks of [br] to format: instead you can use these classes on your rows to align them.
align-items-start

column

longer
column

columm

align-items-center

column

longer
column

columm

align-items-end

column

longer
column

columm

align-items-stretch

column

longer
column

columm

Aligning Columns

We can use these classes to alter the spacing between columns, this is an alternative to using offsets.
justify-content-start

col-2

col-2

col-2

justify-content-end

col-2

col-2

col-2

justify-content-center

col-2

col-2

col-2

justify-content-between

col-2

col-2

col-2

justify-content-around

col-2

col-2

col-2

justify-content-evenly

col-2

col-2

col-2

Columns

We can replace col with containers too. [col][/col] is functionally the same as [container:col-md-6][/container], and [col3][/col3] is the same as [container:col-md-4][/container]. So if you wanted to create a container that takes up the space left after using [col3][/col3], you could use [container:col-md-8][/container]
Bootstrap columns can have a width from 1 (8.3%) to 12 (100%). If you want your columns to take up the full width of the row, the total of the columns needs to add up to 12.

You can actually put several lines of columns inside of one row. If you put four [col] [/col] inside of a row, they'll simply nestle in underneath eachother. We can use this to create responsive designs, like collapsing what looks like two lines of three into three lines of of two on smaller screens.

Below I made a row with twelve numbered segments to give you a sense of how wide or narrow your columns can be. This width depends on how wide you've set your page to be, and how wide the screen of the person looking at your article is.

1

2

3

4

5

6

7

8

9

10

11

12

Offsets

Sometimes you might want to put some empty space between two columns. You could create an empty column, or you can add offset-md-# where the number is the width you'd like it to fill. This uses the same widths defined for columns. offset-md-1 would be the same as putting a [container:col-md-1] [/container] in front of the container.

Reordering Columns

We might want to rearrange our content when we adapt it for wider pages. Perhaps you like to have rows that alternate what side the image is on. This can quickly become a bit of a mess on mobile if you hardcode it into your articles bb code. By using containers and bootstrap we have an adaptable solution we can use instead. It's as easy as adding order-md-# to each container column.

Text

Text

[row]
[container:col-md-6]text[/container]
[container:col-md-6]image[/container]
[/row][row]
[container:col-md-6 order-md-2]text[/container]
[container:col-md-6 order-md-1]image[/container]
[/row]

Examples

Vertically Aligned Columns

align-items-center

Text

[container:row align-item-center]
[col]Text[/col]
[col]Image[/col]
[/container]

align-items-end

Text

[container:row align-item-end]
[col]Text[/col]
[col]Image[/col]
[/container]

Wide and Narrow Columns

Wide Column

Narrow Column

[row]
[container:col-md-8]Wide Column[/container]
[col3]Narrow Column[/col3]
[/row]

Collapsing Columns

on wide screens

1

2

3

4

5

6

on tablets

1

2

3

4

5

6

on mobile

1

2

3

4

5

6

[row]
[container:col-sm-6 col-md-4]1[/container]
[container:col-sm-6 col-md-4]2[/container]
[container:col-sm-6 col-md-4]3[/container]
[container:col-sm-6 col-md-4]4[/container]
[container:col-sm-6 col-md-4]5[/container]
[container:col-sm-6 col-md-4]6[/container]
[/row]