Open In App
Related Articles

Bootstrap 5 Content Complete Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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

ApproachIt provides the various HTML elements with opinionated styles that are only utilized with element selectors.
Page defaultsReboot is a powerful set of default styles that helps us normalize and standardize how webpages are rendered on different browsers and devices.
Native font stackNative font stack includes a native/system font stack that is intended to deliver consistent and appealing typography across several devices and platforms.
Headings and paragraphsHeadings 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.
ListsLists 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 codeInline code is used to wrap the code in actual code form. To do so we can use the HTML code tag.
Code blocksCode blocks are used to put the code inside of <pre> tag, according to official docs
VariablesVariables facilitate the <var> tag that is used to indicate the variables.
User inputReboot 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.
TablesTables are designed to style captions, borders, alignment, and much more. 
FormsReboot 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 buttonsReboot 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 elementsMisc 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.
AddressReboot 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.
BlockquoteReboot Blockquote is used to remove the default margin of the HTML blockquote tag element.
Inline elementsInline 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] attributeReboot  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

HeadingsTypography is a feature of Bootstrap for styling and formatting text content.
Customizing headingsCustomizing headings is used to customize the heading without using HTML tags and CSS classes.
Display headingsDisplay headings are used to create a heading if it has a larger font size and lighter font weight than a regular heading.
LeadLead is used to make a paragraph get differentiated from the rest of the paragraphs by changing its look.
Inline text elementsInline text elements will get an output like HTML tags output without the help of HTML tags, instead, Inline text element classes are used.
Text utilitiesIt supports both text utilities and color utilities. There are several text utilities like text alignment, text wrapping, overflow, word break, text-transform, etc.
AbbreviationsAbbreviations 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. 
BlockquotesBlockquotes are used to display long quotations (a section that is quoted from another source).
Naming a sourceBlockquotes Naming a source is used to provide a class for naming the source of a blockquote.
ListsLists have three types of classes that can be used on the list. 
UnstyledLists Unstyled is used to remove the default style from the order or under the list.
InlineLists Inline classes are used to remove a list’s bullets and apply some light margin.
Description list alignmentDescription list alignment is used to align terms and descriptions horizontally by using the grid system’s predefined classes. 
Responsive font sizesNo special classes are used in Typography Responsive font sizes. You can customize the component using the classes of Typography.
SassSASS 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 imagesResponsive images are used to resize the images according to their parent element and screen sizes.
Image thumbnailsBootstrap 5 Images thumbnails are used to add a 1px rounded border around the image. 
Aligning imagesAligning Images are used to set the alignment to the image. We will use float or text alignment classes to set the alignment of images.
PictureBootstrap offers different classes for images to make their appearance better and also to make them responsive.
SassSASS 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

VariantsTable Variants can be used to color the whole tables, table rows, or an individual cell of a table.
Accented tablesAccented 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 rowsStriped rows are used to change the background color of alternate rows in the table row within the <tbody>.
Hoverable rowsHoverable Rows can be used to apply a hover state on table rows within a <tbody>.
Active tablesHoverable Rows can be used to apply a hover state on table rows within a <tbody>.
Bordered tablesBordered 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 bordersTables 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 tablesSmall tables are used to create the small size of tables. These tables are just smaller versions of the normal tables.
Vertical alignmentTables 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.
NestingTable 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.
AnatomyTable 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 headTable head class is used to set the thead elements’ background color.
Table footTable foot is used to create a section where we can calculate the whole column’s sum.
CaptionsTable 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 tablesA 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 responsiveAlways responsive is used for horizontal scrolling of the table across all the viewports or specific viewports.
Breakpoint specificTable Breakpoint is specifically used to scroll the table horizontally on a particular viewport
SassSASS 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

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


Last Updated : 27 Sep, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads