Profile
30th of July 2019 update: added Font Awesome icons. Anchor link
I made these resources for my personal use, but they proved to be a rather useful beginner's guide to coding here on TH so I'm making them public. Feel free to reference, copy-paste, and build layouts off of these. No need to credit.
Most of these codes were written referencing the information found on w3schools.com, getbootstrap.com, cssreference.io, and the likes. These sites will always remain the better reference on HTML, so I definitely recommend checking 'em out if you're unsure how to do something!
Feel free to check out my other coding as well!
HTML classes
Colours
These colours are responsive to the TH theme the viewer uses. Primary may be pink for Pink theme users but will be yellow for Bee theme users. You can find an overview of how all colours look here.
Text-primary
<div class="text-primary">Text-primary</div>Text-success
<div class="text-success">Text-success</div>Text-info
<div class="text-info">Text-info</div>Text-warning
<div class="text-warning">Text-warning</div>Text-danger
<div class="text-danger">Text-danger</div>Text-secondary
<div class="text-secondary">Text-secondary</div>Text-muted
<div class="text-muted">Text-muted</div>Text-dark
<div class="text-dark">Text-dark</div>Text-light
<div class="text-light">Text-light</div>Progress bars
<div class="progress my-2 rounded-0"><div class="progress-bar bg-warning" role="progressbar" aria-valuenow="0" aria-valuemin ="0" aria-valuemax="100" style="width:0%;height:16px"></div></div><div class="progress my-2 rounded-0"><div class="progress-bar bg-warning" role="progressbar" aria-valuenow="25" aria-valuemin ="0" aria-valuemax="100" style="width:25%;height:16px"></div></div><div class="progress my-2 rounded-0"><div class="progress-bar bg-warning" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div><div class="progress my-2 rounded-0"><div class="progress-bar bg-warning" role="progressbar" aria-valuenow="75" aria-valuemin ="0" aria-valuemax="100" style="width:75%;height:16px"></div></div><div class="progress my-2 rounded-0"><div class="progress-bar bg-warning" role="progressbar" aria-valuenow="100" aria-valuemin ="0" aria-valuemax="100" style="width:100%;height:16px"></div></div><div class="progress my-2"><div class="progress-bar bg-warning" role="progressbar" aria-valuenow="0" aria-valuemin ="0" aria-valuemax="100" style="width:0%;height:16px"></div></div><div class="progress my-2"><div class="progress-bar bg-warning" role="progressbar" aria-valuenow="25" aria-valuemin ="0" aria-valuemax="100" style="width:25%;height:16px">25%</div></div><div class="progress my-2"><div class="progress-bar bg-warning" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px">50%</div></div><div class="progress my-2"><div class="progress-bar bg-warning" role="progressbar" aria-valuenow="75" aria-valuemin ="0" aria-valuemax="100" style="width:75%;height:16px">75%</div></div><div class="progress my-2"><div class="progress-bar bg-warning" role="progressbar" aria-valuenow="100" aria-valuemin ="0" aria-valuemax="100" style="width:100%;height:16px">100%</div></div><div class="progress my-2 rounded-0"><div class="progress-bar bg-primary" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div><div class="progress my-2 rounded-0"><div class="progress-bar bg-success" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div><div class="progress my-2 rounded-0"><div class="progress-bar bg-info" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div><div class="progress my-2 rounded-0"><div class="progress-bar bg-warning" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div><div class="progress my-2 rounded-0"><div class="progress-bar bg-danger" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div><div class="progress my-2 rounded-0"><div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div><div class="progress my-2 rounded-0"><div class="progress-bar bg-dark" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div><div class="progress my-2 rounded-0"><div class="progress-bar bg-light" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div><div class="progress my-2 rounded-0"><iv class="progress-bar bg-primary progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div><div class="progress my-2 rounded-0"><div class="progress-bar bg-success progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div><div class="progress my-2 rounded-0"><div class="progress-bar bg-info progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div><div class="progress my-2 rounded-0"><div class="progress-bar bg-warning progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div><div class="progress my-2 rounded-0"><div class="progress-bar bg-danger progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div><div class="progress my-2 rounded-0"><div class="progress-bar bg-secondary progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div><div class="progress my-2 rounded-0"><div class="progress-bar bg-dark progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div><div class="progress my-2 rounded-0"><div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div>Cards
card + padding
<div class="card p-3">card</div>card without rounded borders + padding
<div class="card rounded-0 p-3">card without rounded borders</div>card without borders + padding
<div class="card border-0 p-3">card without borders</div>card + primary background + padding
<div class="card bg-primary p-3">card</div>card + primary outline + padding
<div class="card card-outline-primary p-3">card</div>card + #171717 outline + padding
<div class="card p-3 card-outline-primary" style="border:4px solid #171717;">card</div>Tooltips
regular tooltip
<span data-toggle="tooltip" title="this text appears in the tooltip">regular tooltip</span><a href="" data-toggle="tooltip" title="this text appears in the tooltip">link tooltip</a>Anchors and Table of Contents
This is the first one
This is the second one
This is the third one
This is the fourth one
This is the fifth one
This is the sixth one
<ul>
<li><a href="#first">1</a></li>
<li><a href="#second">2</a></li>
<li><a href="#third">3</a></li>
<li><a href="#fourth">4</a></li>
<li><a href="#fifth">5</a></li>
<li><a href="#sixth">6</a></li>
</ul>
<div class="p-3">
<div id="first">This is the first one</div>
<div id="second">This is the second one</div>
<div id="third">This is the third one</div>
<div id="fourth">This is the fourth one</div>
<div id="fifth">This is the fifth one</div>
<div id="sixth">This is the sixth one</div>
</div>Font Awesome icons
You can find all FA icons here. All icons can be used on TH. There are four types of icons: solid (fas), regular (far), light (fal), and branding (fab). If you already have the code of for example a light icon and want to make it solid, you can do so by replacing the 'fal' in the code with 'fas'. You can find all of these tips on the official site, under documents styling. Text has been marked up with colour because otherwise it's unclear.
Solid, regular, light, and brand icons
- - -
<i class="fas fa-square"></i>
<i class="far fa-square"></i>
<i class="fal fa-square"></i>
<i class="fab fa-discord"></i>Icon size: - - - - - - - This last one adapts to your font style
<i class="fas fa-square fa-xs"></i>
<i class="fas fa-square fa-sm"></i>
<i class="fas fa-square fa-lg"></i>
<i class="fas fa-square fa-2x"></i>
<i class="fas fa-square fa-4x"></i>
<i class="fas fa-square fa-8x"></i>
<i class="fas fa-square fa-10x"></i>
<span style="font-size:0.7rem"><i class="fas fa-square"></i></span>- This list has a FA icon as bullet
- Multiple FA icons can be used in the same list
- ✓You can also use non-FA characters in this code
- how cool
<ul class="fa-ul">
<li><span class="fa-li"><i class="fal fa-square"></i></span>This list has a FA icon as bullet</li>
<li><span class="fa-li"><i class="fal fa-circle"></i></span>Multiple FA icons can be used in the same list</li>
<li><span class="fa-li">✓</span>You can also use non-FA characters in this code</li>
<li><span class="fa-li"><i class="fal fa-alicorn"></i></span>how cool</li>
</ul>Rotate icons and flip icons horizontally, vertically, or both.
<i class="fal fa-alicorn"></i>
<i class="fal fa-alicorn fa-rotate-90"></i>
<i class="fal fa-alicorn fa-rotate-180"></i>
<i class="fal fa-alicorn fa-rotate-270"></i>
<i class="fal fa-alicorn fa-flip-horizontal"></i>
<i class="fal fa-alicorn fa-flip-vertical"></i>
<i class="fal fa-alicorn fa-flip-both"></i>Animated icons
for continuous animation - for 8-point animation
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
Stacking two icons on top of each other
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-alicorn fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-unicorn fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-heart fa-stack-2x"></i>
<i class="fas fa-pegasus fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" style="color:rgb(230,230,230)"></i>
<i class="fas fa-alicorn fa-stack-1x fa-inverse" style="color:rgb(0,0,0)"></i>
</span>
<span class="fa-stack fa-2x" style="color:rgb(230,230,230)">
<i class="fas fa-square fa-stack-2x" style="color:rgb(0,0,0)"></i>
<i class="fas fa-unicorn fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-heart fa-stack-2x" style="color:rgb(230,230,230)"></i>
<i class="fas fa-pegasus fa-stack-1x fa-inverse" style="color:rgb(0,0,0)"></i>
</span>Space-based HTML
Padding
Padding adds a small amount of space to the top, bottom, left, and right of the content the div is contained in. The space is added in to the div itself, pushing any content that's contained within inwards but not constraining the div's own size. This is an easy way to make sure the text doesn't just hang against the border of the containing element.
Both padding and margin can be applied to the whole element, to one direction, or to an axis. p-1 applies to all four directions, pl-1 to the left, pr-1 to the right, pb-1 to the bottom, pt-1 to the top, px-1 to the left and right, and py-1 to the top and bottom. You can combine multiple of these.
p-0
<div class="bg-faded p-0>p-0</div>p-1
<div class="bg-faded p-1>p-1</div>p-2
<div class="bg-faded p-2>p-2</div>p-3
<div class="bg-faded p-3>p-3</div>p-4
<div class="bg-faded p-4>p-4</div>p-5
<div class="bg-faded p-5>p-5</div>Margin
Margin adds a small amount of space to the top, bottom, left, and right of the content the div outside the div. The space is added outside the div, increasing the empty space between the div and bordering elements. Like this, you can make sure elements don't stick to each other.
mb-0
bottom element
<div class="bg-faded p-1 mb-0">mb-0</div>
<div class="bg-faded p-1">bottom element</div>mb-1
bottom element
<div class="bg-faded p-1 mb-1">mb-1</div>
<div class="bg-faded p-1">bottom element</div>mb-2
bottom element
<div class="bg-faded p-1 mb-2">mb-2</div>
<div class="bg-faded p-1">bottom element</div>mb-3
bottom element
<div class="bg-faded p-1 mb-3">mb-3</div>
<div class="bg-faded p-1">bottom element</div>mb-4
bottom element
<div class="bg-faded p-1 mb-4">mb-4</div>
<div class="bg-faded p-1">bottom element</div>mb-5
bottom element
<div class="bg-faded p-1 mb-5">mb-5</div>
<div class="bg-faded p-1">bottom element</div>mx-3 mb-3
mx-0
<div class="bg-faded p-1 mx-3 mb-3">mx-3 mb-3</div>
<div class="bg-faded p-1">bottom element</div>Justify content between
Value 1Value 2
Value 1Value 2Value 3
Value 1Value 2Value 3Value 4
Value 1Value 2Value 3Value 4Value 5
<div class="d-flex justify-content-between">
<span>Value 1</span>
<span>Value 2</span>
<span>Value 3</span>
<span>Value 4</span>
<span>Value 5</span>
</div>Justify content around
Value 1Value 2
Value 1Value 2Value 3
Value 1Value 2Value 3Value 4
<div class="d-flex justify-content-around">
<span>Value 1</span>
<span>Value 2</span>
<span>Value 3</span>
<span>Value 4</span>
<span>Value 5</span>
</div>Recent Images
No images.