Advanced Formatting with Containers
Available to &
About Containers and SectionsWhen 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 SectionsWhat'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
Containers, sections, and classesBoth 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.
|Extra extra large||xxl||≥1400px|
RowIf 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 ColumnsEnd the horror of using blocks of [br] to format: instead you can use these classes on your rows to align them. align-items-start
Aligning ColumnsWe can use these classes to alter the spacing between columns, this is an alternative to using offsets. justify-content-start
OffsetsSometimes 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 ColumnsWe 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.
[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]
Vertically Aligned Columns
[container:row align-item-center] [col]Text[/col] [col]Image[/col] [/container]
Wide and Narrow Columns
[row] [container:col-md-8]Wide Column[/container] [col3]Narrow Column[/col3] [/row]
[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]
An absolutely amazing article. Thank you so much Nnie. I’ve already added this to my list of formatting and BBCode tricks. And that reordering columns trick. I have a feeling that’s going to come in handy too. Thank you so much for this.
I'm so glad! I hope it does come in handy! Hearing this made my day ♥
*Into the resources folder this article goes* Thank you Nnie for putting together such a great resource! I think i've managed to somehow blunder my way through some of these discoveries but your article has taught me quite a few new things and I definetly need to remember to be consistent with each article in how I format it. So, thank you again for this! (Pettition for this to be inserted into the codex?)
Thank you, I'm not surprised you've already discovered quite a few of them, but it never hurts to have a reference list!
Thank you so much for taking the time to put this together! These will make my life much, much easier moving forward.
You're welcome! I'm glad it'll come in handy for more people than just me!