The Wayback Machine - https://web.archive.org/web/20240927044054/https://www.geeksforgeeks.org/bootstrap-5-content-complete-reference/
Open In App

Bootstrap 5 Content Complete Reference

Last Updated : 27 Sep, 2023
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report
News Follow

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


https://media.geeksforgeeks.org/auth/avatar.png
GeeksforGeeks
News
Improve
Previous Article
Bootstrap 5 Layout Complete Reference
Next Article
Bootstrap 5 Forms Reference

Similar Reads

Bootstrap 4 Complete Reference
Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the foremost popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. It solves many problems which we had once, one among which is that the cross-browser compatibility issue. Nowadays, the websites a
2 min read
Bootstrap 5 Layout Complete Reference
Bootstrap 5 Layout facilitates the different components for the Layout to build a better user interface, along with enhancing the overall interactivity of the website. It helps to customize the in-built functions to make a responsive layout & scalable that fits across different device or viewport sizes. The complete list of Layout is listed bel
5 min read
Projecting Content into Components with ng-content
In Angular, there are many ways to pass the data in our app. But sometimes we have complex HTML/typescript codes that are needed to pass into the component from outside. So if we want simplified code and don't want to set the Html/typescript codes inside the server-component.html, then we can write the piece of code between opening and the closing
2 min read
How do min-content and max-content work ?
CSS (Cascading Style Sheets) is a stylesheet language used to design a webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles on web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page. In this article, we w
2 min read
PHP Calendar Functions Complete Reference
The calendar extension contains a series of functions to represent the calendar date into a different format. The standard date is based on Julian Day Count. The date count starting from January 1st, 4713 B.C. is known as Julian Day Count. First, the date is converted into Julian Day Count and then converted into a calendar system. Example: The pro
2 min read
Blaze UI Objects Complete Reference
Blaze UI is a free & open-source (MIT Licence) Framework with a lightweight UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation Blaze UI Objects List: Blaze UI Containers Blaze UI Container sizesBlaze UI Containers NestingBlaze UI Containers Vertical AlignmentBlaze UI Container Re
1 min read
Node.js String Decoder Complete Reference
The string Decoder module provides an API for decoding Buffer objects into strings. Example: C/C++ Code // Node.js program to demonstrate the // stringDecoder.write() Method // Import the string_decoder module // and get the StringDecoder class // using object destructuring const { StringDecoder } = require("string_decoder"); // Create a
1 min read
CSS Selectors Complete Reference
CSS selectors are used to select HTML elements based on their element name, id, class, attribute, and many more. Example: Below the HTML/CSS code shows the functionality of ::after selector. C/C++ Code <!DOCTYPE html> <html> <head> <style> p::after { content: " - Remember this"; background-color: blue; } </style
4 min read
jQuery Mobile Pagecontainer Widget Complete Reference
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. The Pagecontainer Widget is used to manage the collection of pages in jQuery Mobile. jQuery Mobile Pagecontainer Widget Options jQuery Mobile Pagecontainer classes OptionjQuery Mobile Pagecontainer defaults Optionj
1 min read
Foundation CSS Utilities Complete Reference
Foundation CSS has different types of utility like Prototyping Utilities Sizing is used to give width and height to an element. There is a various utility that helps to make it easy for us. Complete list Foundation CSS Utility are listed below: Foundation CSS Prototyping Utilities Foundation CSS Prototyping Utilities Enable Prototype ModeFoundation
2 min read
TensorFlow.js Browser Complete Reference
TensorFlow.js is an open-source JavaScript library designed by Google to develop Machine Learning models and deep learning neural networks. TensorFlow.js Browser Functions: TensorFlow.js tf.browser.fromPixels() FunctionTensorFlow.js tf.browser.fromPixelsAsync() FunctionTensorFlow.js tf.browser.toPixels() Function
1 min read
jQuery Mobile Loader Widget Complete Reference
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. Loader Widget is used to display the loading dialog when jQuery Mobile pulls in content via Ajax. jQuery Mobile Loader Widget Options jQuery Mobile Loader classes OptionjQuery Mobile Loader defaults OptionjQuery Mo
1 min read
PHP Gmagick Functions Complete Reference
Gmagick is the PHP extension used to create, modify and obtain meta information of an image using GraphicsMagick API. The Gmagick consists of Gmagick, GmagickDraw, and GmagickPixel class. Example: Below programs illustrate the Gmagick::getpackagename()Function in PHP: Original Image: C/C++ Code <?php // Create new Gmagick object $im = new Gmagic
3 min read
Node.js HTTP Module Complete Reference
To make HTTP requests in Node.js, there is a built-in module HTTP in Node.js to transfer data over the HTTP. To use the HTTP server in the node, we need to require the HTTP module. The HTTP module creates an HTTP server that listens to server ports and gives a response back to the client. Example: C/C++ Code // Node.js program to demonstrate the //
4 min read
HTML DOM Complete Reference
HTML DOM: The Document Object Model (DOM) is a programming interface for HTML(HyperText Markup Language) and XML(Extensible markup language) documents. Example: C/C++ Code <!DOCTYPE html> <html> <head> <title>DOM console.count() Method</title> <style> h1 { color:green; } h2 { font-family: Impact; } body { text-al
15+ min read
Fabric.js Line Class Complete Reference
Fabric.js is an open-source JavaScript canvas library, which provides the interactive object model built on top of the canvas element. It is also an SVG-to-canvas & canvas-to-SVG parser. The canvas line means the line is movable and can be stretched according to requirement, & contains the customizable option when it comes to initial stroke
2 min read
React Rebass Recipes Complete Reference
React Rebass is a front-end framework that was designed keeping react in mind. React Rebass Recipes is requires recipes of each development like recipes of dishes. There are lots of components in Rebass Recipes like Flexbox Grid Component, Flexbox, wrap component, Nav Bar Component, etc. React Rebass Flexbox Grid ComponentReact Rebass Flexbox Wrap
1 min read
PHP Ds\Deque Functions Complete Reference
A deque data structure is used to store the sequence of values in a contiguous memory buffer which grows and shrinks automatically. The deque is the abbreviation of "double-ended queue". Requirements: PHP 7 is required for both extension and the compatibility polyfill. Installation: The easiest way to install data structure by using the PECL extens
3 min read
PHP Ds\Set Functions Complete Reference
Set is the collection of unique values. The implementation of Ds\Set is similar to the Ds\Map which creates a hash table. The values of Ds\Set are used as key and the mapped values are ignored. Requirements: PHP 7 is required for both extension and the compatibility polyfill. Installation: The easiest way to install data structure by using the PECL
2 min read
PHP Ds\Map Functions Complete Reference
A Map is a sequential collection of key-value pair which is very similar to the array. The key of a map can be of any type and it is unique. If any value added to the same key in a Map then the map value will replace. It is the efficient Data Structure in PHP 7 to provide the alternative of an array. Requirements: PHP 7 is required for both extensi
3 min read
CSS Functions Complete Reference
CSS functions are used to set the various CSS property. For example, the attr() function is used to retrieve the value of the HTML attribute. Example: Below example illustrates the radial-gradient() function in CSS: C/C++ Code <!DOCTYPE html> <html> <head> <title>CSS Gradients</title> <style> #main { height: 250p
4 min read
PHP Filesystem Functions Complete Reference
The Filesystem function is used to access and manipulate filesystem. It is the part of PHP code so no need to install these functions. For accessing the files on the system, the file path will be used. On Unix system, forward slash (/) is used as a directory separator and on Windows platform, both forward slash (/) and backward slash (\) will be us
4 min read
PHP Image Processing and GD Functions Complete Reference
Image processing and GD functions are used to create and manipulate image files in different image formats including GIF, PNG, JPEG, WBMP, and XPM. PHP can deliver the output image directly to the browser. The image processing and GD functions are used to compile the image functions for this work. It can also require other libraries, depending on t
3 min read
PHP GMP Functions Complete Reference
The GMP function uses arbitrary-length integers to perform mathematical operations. The GMP function contains the GMP number as an argument. Example: Program to perform the division of GMP numbers when numeric strings as GMP numbers are passed as arguments. C/C++ Code <?php // PHP program to perform division of // GMP numbers passed as arguments
3 min read
PHP String Functions Complete Reference
Strings are a collection of characters. For example, 'G' is the character and 'GeeksforGeeks' is the string. Installation: These functions are not required any installation. These are the part of PHP core. The complete list of PHP string functions are given below: Example: This program helps us to calculate a 32-bit CRC for the string “Hello World”
6 min read
PHP Math Functions Complete Reference
The predefined math functions in PHP are used to handle the mathematical operations within the integer and float types. These math functions are part of the PHP core. Installation: These functions have not required any installation. The complete list of PHP math functions are given below: Example: Programs illustrate the decbin() function in PHP: C
3 min read
PHP Imagick Functions Complete Reference
The Imagick Function is used to create and modify images using the ImageMagick API. ImageMagick is the software suite to create edit and modify the composing bitmap images. Thisread, writes and converts images in many formats including DPX, EXR, GIF, JPEG, JPEG-2000, PDF, PhotoCD, PNG, Postscript, SVG, and TIFF. Requirements: PHP 5.1.3 and ImageMag
6 min read
PHP IntlChar Functions Complete Reference
IntlChar() functions provide access of utility methods which is used to access the information about Unicode characters. The IntlChar methods and constants are close to the names and behavior which are used by ICU (International Components for Unicode) library. Example: programs illustrate the IntlChar::charFromName() function in PHP C/C++ Code
4 min read
PHP ImagickDraw Functions Complete Reference
The ImagickDraw class is used to draw the vector-based image using ImageMagick. The vector-based generated image can be saved into the file. Syntax: bool ImagickDraw::s() Example: Below program illustrates the ImagickDraw::point() Function in PHP: C/C++ Code <?php // Create an ImagickDraw object $draw = new \ImagickDraw(); // Set the filled colo
3 min read
PHP Ds\Sequence Functions Complete Reference
A Sequence is used to arrange the values in a single and linear dimension way. In some languages, the sequence refers to the List. The sequence is similar to the array which is used as incremental integer keys are listed below: The index value of the sequence are [0, 1, 2, …, size - 1], where size represents the size of the array.The sequence eleme
3 min read
Article Tags :
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox