Horje
Bootstrap 5 Content Complete Reference

Bootstrap 5 Content facilitates the different components, such as typography, responsive images, tables, etc., that help to organize the content in the hierarchical order, along with styling them in an elegant, consistent, and simple baseline, in order to enhance the overall user-experience to the website.

The complete list of Content is listed below with their brief description:

Reboot

Reboot is used to reboot all the styles of some specific elements. All the HTML elements, hold some styling by using Bootstrap 5 reboot in the file and remove that CSS from those elements.

Topic

Description
Approach It provides the various HTML elements with opinionated styles that are only utilized with element selectors.
Page defaults Reboot is a powerful set of default styles that helps us normalize and standardize how webpages are rendered on different browsers and devices.
Native font stack Native font stack includes a native/system font stack that is intended to deliver consistent and appealing typography across several devices and platforms.
Headings and paragraphs Headings and paragraphs are used for removing the default margin that has been provided by HTML header tags which are margin-bottom: .5rem and for paragraph margin-bottom: 1rem.
Lists Lists facilitate different kinds of lists, namely, unordered lists, ordered lists, & description lists, that remove the margin-top property & a margin-bottom property with a value of 1rem.
Inline code Inline code is used to wrap the code in actual code form. To do so we can use the HTML code tag.
Code blocks Code blocks are used to put the code inside of <pre> tag, according to official docs
Variables Variables facilitate the <var> tag that is used to indicate the variables.
User input Reboot is a collection of element-specific CSS that changes in a single file, kickstart Bootstrap provides an elegant, consistent, and simple baseline to build upon.
Tables Tables are designed to style captions, borders, alignment, and much more. 
Forms Reboot Forms are used to reboot form elements, that take it to the base style where there will be no effect of HTML tags inherited.
Pointers on buttons Reboot is a collection of element-specific CSS that changes in a single file, kickstart Bootstrap provides an elegant, consistent, and simple baseline to build upon.
Misc elements Misc elements are some other tags that are used to reset browser defaults and can be used when we do not want to specify CSS explicitly.
Address Reboot is a collection of element-specific CSS that changes in a single file, kickstart Bootstrap provides an elegant, consistent, and simple baseline to build upon.
Blockquote Reboot Blockquote is used to remove the default margin of the HTML blockquote tag element.
Inline elements Inline elements are used to put some elements abbreviations or short forms of an element that receive basic styling to make it different than other text.
HTML5 [hidden] attribute Reboot  HTML5 [hidden] attribute is used to hide the section you want to not be rendered on the web page.

Typography

Typography is a feature of Bootstrap for styling and formatting text content. It is used to create customized headings, inline subheadings, lists, and paragraphs, align, add more design-oriented font styles, and much more. 

Topics

Descriptions
Headings Typography is a feature of Bootstrap for styling and formatting text content.
Customizing headings Customizing headings is used to customize the heading without using HTML tags and CSS classes.
Display headings Display headings are used to create a heading if it has a larger font size and lighter font weight than a regular heading.
Lead Lead is used to make a paragraph get differentiated from the rest of the paragraphs by changing its look.
Inline text elements Inline text elements will get an output like HTML tags output without the help of HTML tags, instead, Inline text element classes are used.
Text utilities It supports both text utilities and color utilities. There are several text utilities like text alignment, text wrapping, overflow, word break, text-transform, etc.
Abbreviations Abbreviations are not different from the basic HTML <abbr> tag and its main usage is to define an acronym or an abbreviation like HTML, CSS, JavaScript, etc. 
Blockquotes Blockquotes are used to display long quotations (a section that is quoted from another source).
Naming a source Blockquotes Naming a source is used to provide a class for naming the source of a blockquote.
Lists Lists have three types of classes that can be used on the list. 
Unstyled Lists Unstyled is used to remove the default style from the order or under the list.
Inline Lists Inline classes are used to remove a list’s bullets and apply some light margin.
Description list alignment Description list alignment is used to align terms and descriptions horizontally by using the grid system’s predefined classes. 
Responsive font sizes No special classes are used in Typography Responsive font sizes. You can customize the component using the classes of Typography.
Sass SASS can be used to change the default values provided for the headings, body text, lists, and more typography by customizing scss files.

Images

Images content uses different classes that make the image appearance better and also make them responsive. Making an image responsive means it should scale according to its parent element.

Topics

Descriptions
Responsive images Responsive images are used to resize the images according to their parent element and screen sizes.
Image thumbnails Bootstrap 5 Images thumbnails are used to add a 1px rounded border around the image. 
Aligning images Aligning Images are used to set the alignment to the image. We will use float or text alignment classes to set the alignment of images.
Picture Bootstrap offers different classes for images to make their appearance better and also to make them responsive.
Sass SASS has a set of variables with default values for customizing images. We can change those values using sass variables.

Tables

Bootstrap provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows stripped, adding or removing borders, making rows hoverable, etc.

Topic

Description
Variants Table Variants can be used to color the whole tables, table rows, or an individual cell of a table.
Accented tables Accented tables are the tables that give a design-specific look and feel and that go beyond the mere basic table functionality of carrying rows and columns.
Striped rows Striped rows are used to change the background color of alternate rows in the table row within the <tbody>.
Hoverable rows Hoverable Rows can be used to apply a hover state on table rows within a <tbody>.
Active tables Hoverable Rows can be used to apply a hover state on table rows within a <tbody>.
Bordered tables Bordered tables are used to pt border on tables. The Bootstrap 5 Bordered tables class puts borders on all the sides of the table.
Tables without borders Tables without borders are used to create a table in borderless form. It is mostly used when we do not want to show the separation in the table content.
Small tables Small tables are used to create the small size of tables. These tables are just smaller versions of the normal tables.
Vertical alignment Tables are this is useful for making tables and charts and it has a lot of customizable options and utilities thanks to the Bootstrap predefined styles.
Nesting Table nesting is used to make a table inside of a table. Nesting is an important feature that is used in all the elements, especially on the listing.
Anatomy Table Anatomy contains three parts table-head, table-foot & captions, you may think about where is the body as I did in tables but there are no classes for that.
Table head Table head class is used to set the thead elements’ background color.
Table foot Table foot is used to create a section where we can calculate the whole column’s sum.
Captions Table Captions are used to set the caption position on the table. A table caption is required to put the table name or single keyword information.
Responsive tables A Responsive table is used to make a table responsive in two different categories we can make the table always responsive, or make the table responsive on the basis of the breakpoint.
Always responsive Always responsive is used for horizontal scrolling of the table across all the viewports or specific viewports.
Breakpoint specific Table Breakpoint is specifically used to scroll the table horizontally on a particular viewport
Sass SASS can be used to change the default values provided for the table by customizing scss file.

Figures

A Bootstrap5 Figures is a component that provides a way to display a piece of content along with an image.

Topic

Description
Sass Figures SASS can be used to change the default values provided for the captions by customizing scss file of bootstrap5 



Reffered: https://www.geeksforgeeks.org

Bootstrap

Related
Bootstrap 5 Layout Complete Reference Bootstrap 5 Layout Complete Reference
Bootstrap 5 Grid Columns and Gutters Bootstrap 5 Grid Columns and Gutters
Bootstrap 5 Customizing the Grid Bootstrap 5 Customizing the Grid
Bootstrap 5 List group Via JavaScript Bootstrap 5 List group Via JavaScript
Bootstrap5 Validation SASS Bootstrap5 Validation SASS

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 12



 

Horje