Profile
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 grid and placement
The 12-point grid
You can divide a screen into up to 12 fluid columns displaying right next to each other. You can make a column the width of a fraction over 12, for example 3/12. Generally, the sum of the columns should be 12, to ensure the full width of the grid is used. On mobile, grids may show up below each other rather than next to each other.
col-3
col-9
<div class="row no-gutters">
<div class="card col-3 p-1">col-3</div>
<div class="card col-9 p-1">col-9</div>
</div>col-3
col-9
<div class="row">
<div class="card col-3 p-1">col-3</div>
<div class="card col-9 p-1">col-9</div>
</div>col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-2
col-2
col-2
col-2
col-2
col-2
col-3
col-3
col-3
col-3
col-4
col-4
col-4
col-6
col-6
col-12
<div class="row no-gutters">
<div class="card col-1 p-1">col-1</div>
<div class="card col-1 p-1">col-1</div>
<div class="card col-1 p-1">col-1</div>
<div class="card col-1 p-1">col-1</div>
<div class="card col-1 p-1">col-1</div>
<div class="card col-1 p-1">col-1</div>
<div class="card col-1 p-1">col-1</div>
<div class="card col-1 p-1">col-1</div>
<div class="card col-1 p-1">col-1</div>
<div class="card col-1 p-1">col-1</div>
<div class="card col-1 p-1">col-1</div>
<div class="card col-1 p-1">col-1</div>
</div>col-10
<div class="row no-gutters">
<div class="col-1 p-1"></div>
<div class="card col-10 p-1">col-10</div>
<div class="col-1 p-1"></div>
</div>Mobile-friendly columns
By using col-x, the column will have the same width on every screen. To be friendly on mobile, columns can best be stacked above each other rather than next to each other. col-x can be replaced with col-md-x to do this. On a computer screen, it'll have the width of the col-md-x and on mobile, it'll be full-width.
col-6 will remain col-6 on mobile
col-6 will remain col-6 on mobile
col-md-6 will be col-12 on mobile
col-md-6 will be col-12 on mobile
<div class="row no-gutters">
<div class="col-md-6 p-1">
<div class="bg-faded p-3">
<p align="center">col-md-6 will be col-12 on mobile</p>
</div>
</div>
<div class="col-md-6 p-1">
<div class="bg-faded p-3">
<p align="center">col-md-6 will be col-12 on mobile</p>
</div>
</div>
</div>col-md-6 col-4 will be col-6 on desktop and col-4 on mobile
col-md-6 col-8 will be col-6 on desktop and col-8 on mobile
<div class="row no-gutters">
<div class="col-md-6 col-4 p-1">
<div class="bg-faded p-3 h-100">
<p align="center">col-md-6 col-4 will be col-6 on desktop and col-4 on mobile</p>
</div>
</div>
<div class="col-md-6 col-8 p-1">
<div class="bg-faded p-3 h-100">
<p align="center">col-md-6 col-8 will be col-6 on desktop and col-8 on mobile</p>
</div>
</div>
</div>col-md-6 col-lg-8 col-4 will be col-6 on a tablet, col-8 on a desktop, and col-4 on mobile
col-md-6 col-lg-4 col-8 will be col-6 on a tablet, col-4 on a desktop, and col-8 on mobile
<div class="row no-gutters">
<div class="col-md-6 col-4 p-1">
<div class="bg-faded p-3 h-100">
<p align="center">col-md-6 col-lg-8 col-4 will be col-6 on a tablet, col-8 on a desktop, and col-4 on mobile</p>
</div>
</div>
<div class="col-md-6 col-8 p-1">
<div class="bg-faded p-3 h-100">
<p align="center">col-md-6 col-lg-4 col-8 will be col-6 on a tablet, col-4 on a desktop, and col-8 on mobile</p>
</div>
</div>
</div>Matching column heights
col-6
col-6
col-6
col-6 will adjust its height to the total height of the left three columns
<div class="row no-gutters">
<div class="col-6 row no-gutters">
<div class="col-12 p-1">
<div class="bg-faded p-3 h-100">
<p align="center">col-6</p>
</div>
</div>
<div class="col-12 p-1">
<div class="bg-faded p-3 h-100">
<p align="center">col-6</p>
</div>
</div>
<div class="col-12 p-1">
<div class="bg-faded p-3 h-100">
<p align="center">col-6</p>
</div>
</div>
</div>
<div class="col-6 row no-gutters">
<div class="col-12 p-1">
<div class="bg-faded p-3 h-100">
<p align="center">col-6 will adjust its height to the total height of the left three columns</p>
</div>
</div>
</div>
</div>col-6 randomly generated filler text: Full he none no side. Uncommonly surrounded considered for him are its. It we is read good soon. My to considered delightful invitation announcing of no decisively boisterous. Did add dashwoods deficient man concluded additions resources. Or landlord packages overcame distance smallest in recurred. Wrong maids or be asked no on enjoy. Household few sometimes out attending described. Lain just fact four of am meet high.
col-6 will adjust its height to the total height of the left column
<div class="row no-gutters">
<div class="col-6 row no-gutters">
<div class="col-12 p-1">
<div class="bg-faded p-3 h-100">
<p align="center">col-6 randomly generated filler text: Full he none no side. Uncommonly surrounded considered for him are its. It we is read good soon. My to considered delightful invitation announcing of no decisively boisterous. Did add dashwoods deficient man concluded additions resources. Or landlord packages overcame distance smallest in recurred. Wrong maids or be asked no on enjoy. Household few sometimes out attending described. Lain just fact four of am meet high.</p>
</div>
</div>
</div>
<div class="col-6 row no-gutters">
<div class="col-12 p-1">
<div class="bg-faded p-3 h-100">
<p align="center">col-6 will adjust its height to the total height of the left column</p>
</div>
</div>
</div>
</div>Tabs
Regular tabs
Will look best on desktop and worse on mobile, but can be styled to work on mobile.
Text1
Text2
Text3
<ul class="nav nav-tabs card-header-tabs row mb-1">
<li class="col-md-4 mb-1"><a class="btn bg-faded btn-block btn-outline-secondary active" data-toggle="tab" href="#reg1">Tab1</a></li>
<li class="col-md-4 mb-1"><a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#reg2">Tab2</a></li>
<li class="col-md-4 mb-1"><a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#reg3">Tab3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active show" id="reg1">
<div class="card p-3">
<div class="p-3">Text1</div>
</div>
</div>
<div class="tab-pane fade" id="reg2">
<div class="card p-3">
<div class="p-3">Text2</div>
</div>
</div>
<div class="tab-pane fade" id="reg3">
<div class="card p-3">
<div class="p-3">Text3</div>
</div>
</div>
</div>Vertical tabs
Will look the same as horizontal ones on mobile.
Text1
Text2
Text3
Text4
<div class="row no-gutters">
<div class="col-md-3 px-3 mb-3">
<ul class="nav nav-tabs row card-header-tabs">
<li class="col-12 mb-1"><a class="btn bg-faded btn-block btn-outline-secondary active" data-toggle="tab" href="#vert1">Tab1</a></li>
<li class="col-12 mb-1"><a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#vert2">Tab2</a></li>
<li class="col-12 mb-1"><a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#vert3">Tab3</a></li>
<li class="col-12 mb-1"><a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#vert4">Tab4</a></li>
</ul>
</div>
<div class="col-md-9">
<div class="tab-content">
<div class="tab-pane fade active show" id="vert1">
<div class="card p-3">
<div class="p-3">Text1</div>
</div>
</div>
<div class="tab-pane fade" id="vert2">
<div class="card p-3">
<div class="p-3">Text2</div>
</div>
</div>
<div class="tab-pane fade" id="vert3">
<div class="card p-3">
<div class="p-3">Text3</div>
</div>
</div>
<div class="tab-pane fade" id="vert4">
<div class="card p-3">
<div class="p-3">Text4</div>
</div>
</div>
</div>
</div>
</div>Collapses
Collapse
Toggle above collapse
Everything between this start and end div will be collapsed, including any extra layout you add to it. Rename the id to something specific for multiple collapses.
<a href="#topcollapse" data-toggle="collapse">Toggle above collapse</a>
<div id="topcollapse" class="collapse">
Everything between this start and end div will be collapsed, including any extra layout you add to it. Rename the id to something specific for multiple collapses.
</div>
Everything between this start and end div will be collapsed, including any extra layout you add to it. Rename the id to something specific for multiple collapses.
Toggle underneath collapse<div id="bottomcollapse" class="collapse">
Everything between this start and end div will be collapsed, including any extra layout you add to it. Rename the id to something specific for multiple collapses.
</div>
<a href="#bottomcollapse" data-toggle="collapse">Toggle underneath collapse</a>Text between toggle and collapse
This is text that's placed between the toggle and the collapse.
Everything between this start and end div will be collapsed, including any extra layout you add to it. Rename the id to something specific for multiple collapses.
<a href="#betweencollapse" data-toggle="collapse">Text between toggle and collapse</a>
<div>This is text that's placed between the toggle and the collapse.</div>
<div id="betweencollapse" class="collapse">
Everything between this start and end div will be collapsed, including any extra layout you add to it. Rename the id to something specific for multiple collapses.
</div>Accordion collapse
Text in the first collapse, which is opened upon loading the page
Text in the second collapse
Text in the third collapse
<div class="accordion md-accordion" id="accordion" role="tablist" aria-multiselectable="true">
<div>
<div class="card p-3 mb-2" role="tab" id="heading1">
<a data-toggle="collapse" data-parent="#accordion" href="#accordion1" aria-expanded="true"
aria-controls="accordion1">
<div class="mb-0">
Toggle 1
</div>
</a>
</div>
<div id="accordion1" class="collapse show" role="tabpanel" aria-labelledby="heading1"
data-parent="#accordion">
<div class="card-body p-3">
Text in the first collapse, which is opened upon loading the page
</div>
</div>
</div>
<div>
<div class="card p-3 mb-2" role="tab" id="heading2">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#accordion2"
aria-expanded="false" aria-controls="accordion2">
<div class="mb-0">
Toggle 2
</div>
</a>
</div>
<div id="accordion2" class="collapse" role="tabpanel" aria-labelledby="heading2"
data-parent="#accordion">
<div class="card-body p-3">
Text in the second collapse
</div>
</div>
</div>
<div>
<div class="card p-3 mb-2" role="tab" id="heading3">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#accordion3"
aria-expanded="false" aria-controls="accordion3">
<div class="mb-0">
Toggle 3
</div>
</a>
</div>
<div id="accordion3" class="collapse" role="tabpanel" aria-labelledby="heading3"
data-parent="#accordion">
<div class="card-body p-3">
Text in the third collapse
</div>
</div>
</div>
</div>
By removing the 'show' part from "class="collapse show"", all collapses start out closed
Text in the second collapse
Text in the third collapse
<div class="accordion md-accordion" id="allclosed" role="tablist" aria-multiselectable="true">
<div>
<div class="card p-3 mb-2" role="tab" id="headingclosed1">
<a data-toggle="collapse" data-parent="#allclosed" href="#allclosed1" aria-expanded="false"
aria-controls="allclosed1">
<div class="mb-0">
Toggle 1
</div>
</a>
</div>
<div id="allclosed1" class="collapse" role="tabpanel" aria-labelledby="headingclosed1"
data-parent="#allclosed">
<div class="card-body p-3">
By removing the 'show' part from "class="collapse show"", all collapses start out closed
</div>
</div>
</div>
<div>
<div class="card p-3 mb-2" role="tab" id="headingclosed2">
<a class="collapsed" data-toggle="collapse" data-parent="#allclosed" href="#allclosed2"
aria-expanded="false" aria-controls="allclosed2">
<div class="mb-0">
Toggle 2
</div>
</a>
</div>
<div id="allclosed2" class="collapse" role="tabpanel" aria-labelledby="headingclosed2"
data-parent="#allclosed">
<div class="card-body p-3">
Text in the second collapse
</div>
</div>
</div>
<div>
<div class="card p-3 mb-2" role="tab" id="headingclosed3">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#allclosed3"
aria-expanded="false" aria-controls="allclosed3">
<div class="mb-0">
Toggle 3
</div>
</a>
</div>
<div id="allclosed3" class="collapse" role="tabpanel" aria-labelledby="headingclosed3"
data-parent="#allclosed">
<div class="card-body p-3">
Text in the third collapse
</div>
</div>
</div>
</div>
The opposite is used to open all collapses by default
Text in the second collapse
Text in the third collapse
<div class="accordion md-accordion" id="allopen" role="tablist" aria-multiselectable="true">
<div>
<div class="card p-3 mb-2" role="tab" id="headingopen1">
<a data-toggle="collapse" data-parent="#allopen" href="#allopen1" aria-expanded="false"
aria-controls="allopen1">
<div class="mb-0">
Toggle 1
</div>
</a>
</div>
<div id="allopen1" class="collapse show" role="tabpanel" aria-labelledby="headingopen1"
data-parent="#allopen">
<div class="card-body p-3">
By removing the 'show' part from "class="collapse show"", all collapses start out closed
</div>
</div>
</div>
<div>
<div class="card p-3 mb-2" role="tab" id="headingopen2">
<a class="collapsed" data-toggle="collapse" data-parent="#allopen" href="#allopen2"
aria-expanded="false" aria-controls="allopen2">
<div class="mb-0">
Toggle 2
</div>
</a>
</div>
<div id="allopen2" class="collapse show" role="tabpanel" aria-labelledby="headingopen2"
data-parent="#allopen">
<div class="card-body p-3">
Text in the second collapse
</div>
</div>
</div>
<div>
<div class="card p-3 mb-2" role="tab" id="headingopen3">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#allopen3"
aria-expanded="false" aria-controls="allopen3">
<div class="mb-0">
Toggle 3
</div>
</a>
</div>
<div id="allopen3" class="collapse show" role="tabpanel" aria-labelledby="headingopen3"
data-parent="#allopen">
<div class="card-body p-3">
Text in the third collapse
</div>
</div>
</div>
</div>Recent Images
No images.