Quick container guide for bootstrap

So, you're a new grandmaster that wants to know what the heck containers are for.

So, if I want to write a lot of text, it can start looking a bit.. clumped together:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean egestas fermentum pulvinar. Quisque vitae tempus magna. Duis a dignissim sem, eget facilisis massa. Quisque aliquet ligula augue, nec mattis est rutrum sodales. Nulla in pellentesque eros. Quisque et tincidunt urna, a efficitur urna. Praesent luctus lobortis ipsum, lobortis ullamcorper mi euismod ac. Pellentesque placerat augue at lectus ultricies, eget suscipit sapien faucibus. Quisque sagittis ornare ante quis mollis. Nullam iaculis auctor erat, ut volutpat nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec pellentesque elementum dui, et condimentum massa luctus et. Praesent tempor tincidunt arcu eget placerat. Duis semper vitae urna non sodales. Proin ut nunc at quam pharetra finibus. In a egestas nisi, ut fringilla felis. Nullam ut urna vitae mauris consectetur ullamcorper. Pellentesque consectetur eu lorem vitae fermentum. Duis imperdiet diam neque, sit amet scelerisque diam bibendum nec. Suspendisse nunc ipsum, venenatis non imperdiet sit amet, condimentum non enim. Nullam rutrum turpis vitae tempus imperdiet. Pellentesque sit amet ante vestibulum, ullamcorper ligula eget, auctor tortor. Phasellus sed posuere est. Duis ullamcorper dui vitae lectus ullamcorper congue. Nullam risus felis, luctus at tortor et, fringilla interdum massa.

What if I wanted to split this massive load of text into two columns?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean egestas fermentum pulvinar. Quisque vitae tempus magna. Duis a dignissim sem, eget facilisis massa. Quisque aliquet ligula augue, nec mattis est rutrum sodales. Nulla in pellentesque eros. Quisque et tincidunt urna, a efficitur urna. Praesent luctus lobortis ipsum, lobortis ullamcorper mi euismod ac. Pellentesque placerat augue at lectus ultricies, eget suscipit sapien faucibus. Quisque sagittis ornare ante quis mollis. Nullam iaculis auctor erat, ut volutpat nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec pellentesque elementum dui, et condimentum massa luctus et. Praesent tempor tincidunt arcu eget placerat. Duis semper vitae urna non sodales.

Proin ut nunc at quam pharetra finibus. In a egestas nisi, ut fringilla felis. Nullam ut urna vitae mauris consectetur ullamcorper. Pellentesque consectetur eu lorem vitae fermentum. Duis imperdiet diam neque, sit amet scelerisque diam bibendum nec. Suspendisse nunc ipsum, venenatis non imperdiet sit amet, condimentum non enim. Nullam rutrum turpis vitae tempus imperdiet. Pellentesque sit amet ante vestibulum, ullamcorper ligula eget, auctor tortor. Phasellus sed posuere est. Duis ullamcorper dui vitae lectus ullamcorper congue. Nullam risus felis, luctus at tortor et, fringilla interdum massa.

This is easy, as you can see. I did this with columns. WorldAnvil has a default BBCode you can use to make two columns like this.
[row] [col] [/col] [col] [/col] [/row]

If I put words in between the COL and /COL entries (known as opening and closing tags), they will appear in two columns!

What if I want columns that aren't evenly spread apart? If I wanted to make one bigger than the other?

As a grandmaster, you have access to containers. Containers let you make custom column sizes using something called Bootstrap.
Essentially, a row can have twelve segments. Pretend each one is a lego piece. With the basic COL bbcode, you can only stick half the lego pieces together to make two columns. As a grandmaster, you can split up that 12 however you want. Confused? Here's a visual:

12 Bricks

Lego Brick

Lego Brick

Lego Brick

Lego Brick

Lego Brick

Lego Brick

Lego Brick

Lego Brick

Lego Brick

Lego Brick

Lego Brick

Lego Brick

12 Bricks, But They're Stuck Together In Groups of Four

(aka, each section is 4 - 4 - 4)

Lego Brick

Lego Brick

Lego Brick

12 Bricks, But In Groups of Three

Lego Brick

Lego Brick

Lego Brick

Lego Brick

To make these work, you just use containers. Here's an example:

[row]
[container:col-3] Lego Brick [/container]
[container:col-3] Lego Brick [/container]
[container:col-3] Lego Brick [/container]
[container:col-3] Lego Brick [/container]
[/row]

See how there are 4 groups of 3 and each column says 3 on it? All you need to do is make sure the number always adds up to 12 and shove your lego bricks together to do cool formatting things!