WORKING
WITH CONTENT
Content
components in Bootstrap are reserved for the most commonly used HTML elements
such as images, tables, typography, and more.
Bootstrap comes with a brand-new CSS reset called Reboot.
It builds on top of Normalize.css to make
your site look even better out of the box.
Reboot, a collection of element-specific CSS changes in a single file,
kickstart Bootstrap to provide an elegant, consistent, and simple baseline to
build upon.
REBOOT
BASICS
Update
some browser default values to use rems instead
of ems
for scalable component spacing.
rem is short for root em and is a little bit different from a regular em unit.
em is a relative unit to the font-size of the parent element it is contained
within.
The rem unit is not relative to its parent, it is relative to the root or HTML
element.
This makes it much easier to determine the actual size of text or other content
components that will appear on the screen.
REBOOT PAGE
DEFAULTS
The <html> and <body> elements
are updated to provide better page-wide defaults
The box-sizing is
globally set on every element—including *::before and *::after, to border-box.
The base font-size is set to 16px (the browser default).
font-size: 1rem is applied on the <body> for easy
responsive type-scaling via media queries
The <body> also sets a
global font-family, font-weight, line-height, and color.
This is inherited later by some form elements to prevent font inconsistencies.
For safety, the <body> has a declared background-color,
defaulting to #fff.
REBOOT
HEADINGS AND PARAGRAPHS
All
heading elements have been reset to have their top-margin removed.
Headings have a margin-bottom value of 0.5rem
Paragraphs
have a margin-bottom value of 1rem.
Headings inherit their color by
default, but can be overridden using CSS variable, --bs-heading-color.
Lists
All lists
have their top margin removed, has a bottom margin of 1rem.
In nesting lists, there is no bottom-margin at all.
The left padding has also been reset
REBOOT
TABLES AND FORMS
Tables
are slightly adjusted to style <caption>s, collapse
borders, and ensure consistent text-align throughout.
Various form elements have been rebooted for simpler base styles.
<fieldset>s have no borders, padding, or margin so they can be easily
used as wrappers for individual inputs or groups of inputs.
<legend>s, like fieldsets, have also been restyled to be displayed as a
heading of sorts.
<label>s are set to display: inline-block to
allow margin to be applied.
<input>s, <select>s, <textarea>s,
and <button>s are mostly addressed by Normalize, but Reboot removes
their margin and sets line-height: inherit, too.
<textarea>s are modified to only be resizable vertically as horizontal
resizing often “breaks” page layout.
<button>s and <input> button elements have cursor:
pointer when :not(:disabled).
HEADINGS
EXAMPLE
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h3>
This is the main title
<small class="text-muted">this is a description</small>
</h3>
Display
headings are configured via the $display-font-sizes Sass
map and two variables, $display-font-weight and $display-line-height.
PARAGRAPH
EXAMPLE
<p
class="lead"> here's some text with the .lead class to make this
paragraph look a bit different and standout. </p>
TEXT FORMATTING
<p>mark
tag <mark>highlights</mark> text.</p>
<p>del tag used to
<del>delete</del> text.</p>
<p>s tag is used for text
which is <s>no longer accurate</s>.</p>
<p><ins>This line is added.</ins></p>
<p>This is
<u>underlined</u>.</p>
<p><small>small tag
is used for fine prints.</small></p>
<p><strong>strong
tag is used to bold text.</strong></p>
<p><em>em tag is used to italicize
text.</em></p>
LISTS
Unstyled
class
Remove the
default list-style and
left margin on list items
This only applies to immediate children list items
Example
<ul
class="list-unstyled"> <li>item</li>
<li>item</li> <li>item</li> <li>item</li>
<li>item</li> </ul>
The next most useful class is list-inline,
which will line up each <li> in a horizontal line.
Need to add a class of list-inline-item to each
<li> tag.
DESCRIPTION
LIST
Align
terms and descriptions horizontally by using our grid system’s predefined
classes like row and col
For longer terms, add a .text-truncate class
to truncate the text with an ellipsis.
<dt class="col-sm-3 text-truncate">Truncated term is
truncated</dt>
<dl class="row"> <dt
class="col-sm-3">Description lists</dt> <dd
class="col-sm-9">A description list is perfect for defining
terms.</dd>