Tuesday 2 April 2024

Bootstrap working with content

 

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>