Profile
Bootstrap Cheat Sheet
This guide is here to provide some useful classes that are coded into Bootstrap for you to add to elements for some quick and easy styling. Each page covers several components found in Bootstrap where you can change the appearance of elements with a single class or a small combination of them.
Classes are a kind of label you can add to HTML elements using the class="" attribute. These special labels are used by CSS stylesheets among other things to give the elements a particular look and function. You can certainly make your own custom style using inline CSS via the style="" attribute, but using these classes often will make things faster to code webpage designs. Not to mention, inline CSS has its limits on what it can do before requiring the use of a stylesheet.
This guide is making use of special labels already programmed in the Bootstrap CSS stylesheet to give our elements predetermined looks and functions. Bootstrap was designed and built with the purpose of being a custom theme with a uniform look that you can easily access when coding layouts.
<div class="card w-50 mx-auto bg-faded shadow p-3">
<div style="display:flex;border:1px solid hsla(0,0%,100%,.125);border-radius:.25rem;width:50%;margin:0 auto;background:#f7f7f7;box-shadow:0 .5rem 1rem rgba(0,0,0,.15);padding:.75rem;">
Both will produce the same box (if you're using the default TH theme), but one is already programmed into classes while the other is added in manually.
Short answer: a unit relative to the font size of the root element.
When it comes to font sizes, you would commonly use "px" (pixels) or "pt" (points) to determine the size. These are known as absolute units (lol). What if you want a font to be 70% smaller in some places? This is where relative units come into play. In CSS, you can either use "70%" or "0.7em". However, in both of these cases, this font size will be calculated based on what the direct parent element's font size. If that parent element has a different font size, it'll influence the child size.
A special version of this is known as "rem", which instead of it being influenced by the parent element, it instead skips the entire corporate ladder and seeks out the root element (hence the "R") for its calculation. While the most obvious use of "rem" is for font size, it can be used as a unit for a spacing too. If the root font size is 12px, now you have universal ruler with increments of 12px you can use for anything else. And if you were to change that value, everything else will scale accordingly.
If you have any more questions, feel free to leave them in the comments. Happy coding!
Recent Images
No images.