Bootstrap 5 Content Complete Reference

Last Updated : 27 Sep, 2023

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

kartik

Improve

Article Tags :

Bootstrap 5 Content Complete Reference

Reboot

Typography

Images

Tables

Figures

Similar Reads

Layout

Content

Forms

Forms Layout

Components

Navbar

Helpers

Extend

Thank You!

What kind of Experience do you want to share?