Note: If you want to change the percentage, just change the style='width: _____%;" to whatever numerical value you want.
Decimal values (ex. 10.7%, 56.9%,) work too!

Note: You can find coool icons at fontawsome.com.

Note: play around with mx-___ values to change the margins of the text/cards!

Note: If the sum of the columns in a row exceeds 12, the column will spill over into another row.
Also, columns may work weird on mobile, so refer to mobile/tablet friendliness sections for that kind of info.

Note: If col-md-x and col-y are present, this means that col-md-x corresponds to the column on computer and col-y corresponds to the column on mobile.
If col-md-x and col-lg-y and col-z are present, this means that col-md-x refers to the column on tablet, col-lg-y refers to the column on computer, and col-z on mobile.

Note: Rename the id to something specific for multiple collapses all at once, or the collapses will not show properly.

Note: By removing the 'show' part from "class="collapse show"", all collapses start out closed.

Note: I am not sure how to add 100% working tooltipsters to images, cards, etc. but will do so when I am more confident!

Note: There are two ways of getting custom colors on TH: through the rgba system and through hex codes.

Note: Bootstrap colors are basically all the preset colors use can use in TH. Bootstrap colors vary depending on the theme one uses.

Note: Opacity can only be achieved through using rgba by adding a, namely opacity, value to the color. The opacity can range from 0-1, with 0 being completely transparent to 1 being not transparent at all.

Note: Max-height sets up a maximum height for the card, so if the maximum is not met, it will automatically just set it to the smallest value possible.

Note: This allows for you to create a scrollable card. However, it is not possible to easily hide the scrollbar without CSS. A specific height/width must be set for this to work!

Card with overflow-y

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan, ex sit amet rutrum ultrices, ligula diam pellentesque ante, sit amet facilisis metus libero eget purus. Nunc fringilla, lectus ut egestas tristique, eros quam porta dui, quis hendrerit nisi erat et dui. Aenean pulvinar fermentum ligula nec ultrices. Quisque bibendum ut neque et elementum. Duis placerat aliquet rhoncus. Suspendisse pretium tellus et rutrum placerat. Curabitur feugiat nibh non enim condimentum auctor. Aliquam erat volutpat. Phasellus porta vulputate mattis.

Card with overflow-x

Note: Be warned that using position:absolute may lead to wonky layouts on mobile, so make sure to consider this + check for mobile friendliness as you use this!

Note: Position-absolute allows you to also go beyond the scope of the character description and minimally add stuff across the entire screen. For example if you want to put a small icon next to the character's image at the top of the page, you can use the following directions to do so:
<span class="fa-regular fa-cheese-swiss" style="font-size:15px; position:absolute; left: 5rem; top: 1rem;">
</span>

Note: The following code can be added to the style="______" to further customize the background image. Some can be used at the same.

Note: This allows you to layer elements that normally aren't be layered, some usage/understanding of position:absolute may be necessary. Can be applied to not just cards, but other elements as well! Just add: z-index: ____ to the style="____" aspect of the element. The larger the number, the more on top it will be.

Note: Somehow you can add some font-awesome class stuff to the class of the thing you want to animate, it works! I am not sure if this works on other sites.

Note: These are the only fonts that are freely used by Toyhou.se, if you want to upload custom fonts you must use CSS.

Note: For text-shadow, the first px value refers to how much pixels it shifts on the x-axis. The second px value refers to how much pixels it shifts on the y-axis. The thrid px value refers to how much gaussian blur there is.

Note: Alt text is something that shows up when the website/Toyhou.se somehow can't load your photo. In this case, if the alt is "Image alt", this text will show up if the image does not load.

Note: href allows you to link internally, but the element you want to link to must have id =" ______" while the internal link must have href "#________" for this to work.

Note: Great thanks and kudos to this tutorial made by K90-Nyel ! This is just a basic showcase of the music player, but if you want a more detailed music player tutorial/walkthrough, go check out their tutorial!

Note: This pride flag tutorial made by VynxCodes is what inspired me to find out that flags can be made using the d-flex linline-rounded-block as a base. You will have to manually edit the flag colors yourself and add the appropriate images if you want to customize it. Pride flags are fully listed in the pride flag tutorial above, but you can repurpose them to make country/any other type of flag!

Note: Basically what I will be doing to hide the scroll bar without CSS is to first put a card around the card you want to croll, then use position:absolute to orient a card to "hide" the scroll bar. This may look wonky on mobile but with enough patience and testing, it is possible to make it look seamless.
My tip is to choose a card padding that is very large (either p-4 or p-5) so that none of the text gets accidentally covered by the scrollbar-hiding card. Then, in the description of this card that encircles the card you want to scroll, create the card that you want to use to hide the scroll bar. Set it to the appropriate height, and use position-absolute to move it around and hide the scroll bar!

Note: Basically, to make a hex code color palette for your character, just create one big card and use &ltdiv class="row no-gutters"> to create a row of small cards, then change the background color of each of the cards to the colors of your character.
Don't know what your characater's hex codes are? Use this colorpicking website!

Note: I know there are more sophisticated meethods to go about doing this, but way I do it is I create a p-0 card, set the background to an image, then I add in another p-0 card within this card and set the background to something too. If all works properly, the two elements will overlap without any problem!You can definitely do this 3+ cards, but I have not tested it to see if looks wonky or not.