Grandmaster Container CSS

Guild Exclusive

This is a Grandmaster+ feature. To get access, Join the Worldbuilder's Guild!

Grandmasters have the ability to create arbitrary containers and sections with CSS classes. These open up many possibilities to customize articles and other World Anvil pages. The difference between sections and containers is, that the sections create HTML <span> elements and the containers create HTML <div> elements.
For every example there is some BBCode and some CSS. The BBCode marks the location of where in the article you would like this special formatting to appear. The CSS tells the browser how to display that special formatting.
In general:

• Use [section]s if you want to add a special effect to a line of text or an inline image or icon.
• Use [container]s if you want to add a special effect surrounding a block of text or element. In this guide we mostly use containers for the examples.

Understanding Bootstrap

The easiest way to use containers is to target Bootstrap classes. Bootstrap is the CSS Framework on which World Anvil is built on. The framework takes care of many intricacies to ensure the website looks good and remains responsive on as many devices and browsers as possible.
This means you can use the classes used by the framework to implement your own layouts. Not everything bootstrap offers can be used because some components requires special attributes to be set. This is currently only possible with custom templates.

The Bootstrap Grid

The core of the bootstrap layout system is the grid. This grid is made up of up to twelve columns and can be utilized to display content next to each other. The columns come with so-called breakpoints for screen sizes defined. This allows you a good layout for both mobile and desktop screens without too much tinkering.
Example Columns 2/3 + 1/3 - Click to Expand

The code below creates two columns with the first column taking up 2/3 of the width and the second column the rest. The md in the middle means that the columns will stop being columns on any devices with a screen resolution width of less than 992 pixels. This generally includes smartphones and tablets.

[row]
	[container:col-md-8]
 [/container]
 [container:col-md-4]
 [/container]
[/row]

These columns can be customized in any way. You can make up to twelve columns total. Always make sure that the numbers are summed up to 12. Read up on the details here.

Sidebar Panels

The sidebar panel which is used in most articles can be easily duplicated. Just use the following containers and get the same effect anywhere on World Anvil:

Sidebar Panel - Click to Expand

[container:panel panel-default card]
 [container:panel-body card-body]
 	Your Content
 [/container]
[/container]

This creates the same effect as in the sidebar. Check the BBCode guide to learn how to make it create columns like these.

Adding Unique Effects to Specific Elements

With the use of containers it is possible to make sure certain CSS is only applied to a single element or a group of elements. For example if you wish to have a special type of tables that should have a different look from your other tables you can just wrap those tables with a container and then adjust your CSS to target only that. You can use this trick for any element you embed into an article!
Table Example - Click to Expand

[container:your-class]
 [table]
  ...
 [/table]
[/container]

CSS - Click to Expand

.user-css .your-class .table {
  ...
}

Adding Icons

With the help of containers or sections it is possible to add icons from Fontawesome & RPGawesome into your content. World Anvil has the Pro version of Fontawesome which means that you can use all of their icons and not just the free ones.
Fontawesome Icon Example - Click to Expand

Note the space between the sections. This is important as it will not work otherwise. The fa-2x class increases the size of the icon.

[section:fas fa-2x fa-book] [/section]

RPGawesome Icon Example - Click to Expand

The space between the section elements is important. It won't work without it. And always add the ra class to the icon class.

[section:ra ra-dragon] [/section]

Additional Layout Boxes

It is very easy to create additional layout boxes like the [aloud] or [quote] BBCodes. You can find the BBCode and CSS for the boxes used on the Codex. From there you should be able to customize your own containers as you need. These examples also show how you can reuse CSS rules effectively.

This grey box can be created with the CSS & BBCode found below. These serve just as a starting point. You can play around with each of the values to get different results!

CSS - Click to Expand

.box-grey {
  background: #b1b1b166;
  border: 1px solid #616161;
}


.box-contain {
  margin: 5px;
  border-radius: 0px 15px 0px 15px;
  padding: 10px;
}

BBCode - Click to Expand

[container:box-contain box-grey]
  Your content
[/container]

Your content

CSS - Click to Expand

.box-orange {
  background: #ffa5004f;
  border: 1px solid #ffa500;
}


.box-contain {
  margin: 5px;
  border-radius: 0px 15px 0px 15px;
  padding: 10px;
}

BBCode - Click to Expand

[container:box-contain box-orange]
  Your content
[/container]

Box with Icon

The below example creates a box with an icon in the upper right corner.
CSS - Click to Expand

.user-css .box-special {
  position: relative;
  padding: 10px 10px 10px 50px;
  border: purple solid 2px;
  background: mediumpurple;
  border-radius: 20px;
}


.user-css .box-special .corner-icon {
  position: absolute;
  left: 10px;
  top: 10px;
}

BBCode - Click to Expand

[container:box-special][section:corner-icon fas fa-2x fa-book] [/section] 
  Your content
[/container]

Example in Action - Click to Expand

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Box with Background Image

Credit: Ademal

[container: con-img-background] [img:169171|nolink] [h1]Test[/h1] [p]Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Vestibulum dapibus, augue at porttitor dapibus, enim nulla volutpat nunc, sit amet posuere leo 
neque vel nibh. Integer mi mi, fermentum vitae ullamcorper venenatis, malesuada id nunc.
[br][br]Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
Cras blandit dictum arcu, tristique pellentesque tortor vestibulum in. Praesent in odio sit amet tellus 
elementum convallis vitae ut nunc. Praesent tempus rutrum tincidunt. Nam vel viverra arcu.[/p] [/container] 

CSS - Click to Expand

.user-css .con-img-background {
 position: relative;
 text-align: center;
}


.user-css .con-img-background h2 {
 text-align: left;
 padding: 10px 0px 5px 10px;
 height: 2%;
 margin: 0px;
 border: none;
 position: absolute;
 width: 100%;
 top: 1%;
}


.user-css .con-img-background img {
 border-radius: 0px 10px 10px 10px;
 opacity: 0.5;
}


.user-css .con-img-background .padding-10 {
 background: black;
 padding: 0px;
 border-radius: 0px 10px 10px 10px;
}


.user-css .con-img-background img {
 border-radius: 0px 10px 10px 10px;
 opacity: 0.5;
}


.con-img-background p {
 position: absolute;
 top: 10%;
 padding: 3%;
 height: 100%;
 border-radius: 0px 10px 10px 10px; 
}


.user-css .con-img-background .artist-credits {
 position: absolute;
 bottom: 0;
 width: 100%;
 border-left: none;
 border-right: none;
 border-bottom: none;
 border-radius: 0px 0px 10px 10px;
}

Tabs

Credit: User51
Check out the guide below to add tabs within one of your articles.

Accordion

Credit: User51
Check out the guide below to see how you can create an accordion in your article.

CSS Guides

CSS Framework

Bootstrap 3.3 or Bootstrap 5.0 (check the styling settings for which one your world is using. If your account was created after the summer 2022 it is Bootstrap 5).

[section]

<span>

[container]

<div>

Additional Guides

Bootstrap for Grandmasters (Part 1)
Bootstrap for Grandmasters (Part 2)

Community Guides

This is an introduction to containers by Catoblepon made for users with little experience with CSS:
The following is a deep-dive written by Annie Stein into Bootstrap classes you can use to create custom columns and grids with containers: