This chapter discusses about the figure component of Bootstrap. Consider utilizing the <figure> element whenever you have a need to exhibit content, such as an image that may be accompanied by an optional caption.
<figure> element is used to markup a photo or an image in a document and <figcaption> is used to define a caption to that photo.
The .figure class is used to create a responsive container for images, videos, or other media objects.
It provides a way to wrap media content along with optional captions and other related elements.
The classes .figure, .figure-img and .figure-caption provide baseline styles for the <figure> and <figcaption>.
Use .img-fluid class to your <img>, in order to make it responsive; as the images in figures have no explicit size.
Let us see an example of .figure class
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Figures</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><h4>Figures</h4><br><figure class="figure"><img src="/bootstrap/images/scenery.jpg" class="figure-img img-fluid rounded" alt="Image in Figure"><figcaption class="figure-caption">A caption for the responsive image.</figcaption></figure></body></html>
The alignment of the caption can be changed using the text utilities, such as .text-start, .text-center or .text-end.
Let us see an example for changing the alignment of caption
Example
You can edit and try running this code using the Edit & Run option.
This chapter will discuss about bootstrap tables and the classes to create table. Tables is used to organize data in the form of rows and columns. Tables allow you to group huge amounts of data and present them clearly and in an orderly manner. Some table items supported by Bootstraps are listed below.
Sr.No.
Tag & Description
1
<table>Wrapping element for displaying data in a tabular format
2
<thead>Container element for table header rows (<tr>) to label table columns.
3
<tbody>Container element for table rows (<tr>) in the body of the table.
4
<tr>Container element for a set of table cells (<td> or <th>) that appears on a single row.
5
<td>Default table cell.
6
<th>Special table cell for column (or row, depending on scope and placement) labels. Must be used within a <thead>
7
<caption>Defines a table caption
Simple table
If you want a basic table style with just a little light padding and horizontal dividers, add the .table class at table, as shown in the example below.
Example
You can edit and try running this code using Edit & Run option.
The contextual classes allow you to change the background color of your table rows or individual cells. Add classes .table-active, .table-success, .table-danger, .table-warning class to Highlight a table row or cell, as shown in the below example.
Example
You can edit and try running this code using Edit & Run option.
The cells of the <thead> table are always vertically aligned to the bottom. The cells in the <tbody> table inherit their alignment from <table> and are aligned to the top by default. Use the vertical alignment classes to re-align as required
Example
You can edit and try running this code using Edit & Run option.
Responsive tables enable horizontal scrolling of the table. Wrapping class .table with .table-responsive makes a table responsive across different view ports. Add a maximum breakpoint to a responsive table by using .table-responsive{-sm|-md|-lg|-xl|-xxl}. Following table depicts the screensize and respective Bootstrap table class:
Class
Screen width
.table-responsive-sm
< 576px
.table-responsive-md
< 768px
.table-responsive-lg
< 992px
.table-responsive-xl
< 1200px
.table-responsive-xxl
< 1400px
Example
You can edit and try running this code using Edit & Run option.
This chapter will discuss various classes provided by Bootstrap, as a support to the images. Images play a vital role in capturing the attention of a visitor on a website. Apart from making the content interesting and engaging, the images help in planning the content strategy of any website.
Responsive Images
Images can be made responsive in Bootstrap using the class .img-fluid. This class applies max-width: 100%; and height: auto; to the image so that it scales with the parent width. The responsive images automatically fit as per the size of the screen.
Example
You can edit and try running this code using the Edit & Run option.
When multiple <source> elements are used for a specific image <img> element under a <picture> element/tag, then we must add the .img-* classes to the <img> element and not to the <picture> element/tag.
Example
You can edit and try running this code using theEdit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Images</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h1>Use of Picture tag</h1><picture><img class="img-fluid img-thumbnail" alt="alt text for all sources" src="/bootstrap/images/tutimg.png"></picture></body></html>
This chapter, will discuss about the various typography related features provided by Bootstrap. Typography is the art of making the written matter look legible, attractive and appealing when displayed.
Bootstrap Default / Global Settings
The latest version of Bootstrap sets the default settings for display, typography and link styles. Following are some of the default settings:
Bootstrap sets a default font-size of 1rem, 16px by default.
Bootstrap sets the line-height as 1.5
For optimum text rendering on every device and OS through font-family, use the “Native Font Stack”.
The $body-bg variable should be used to set a background-color on the <body> tag, where #fff is by default.
The global link color can be set using the variable $link-color and apply link underlines only on :hover.
To apply the typographic base to the <body> tag, use the attributes such as $font-family-base, $font-size-base, and $line-height-base.
One must set the $font-size-base in rem. The global variables are defined in _variables.scss and the styles within _reboot.scss.
Headings
The HTML heading tags i.e. <h1> to <h6> are styled in bootstrap in the following way.
Example
You can edit and try running this code using the Edit & Run option.
The utility classes provided by bootstrap can be used to customize the headings.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography - Customizing Headings </title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><p>This is an example to show the customized heading.</p><h4>
Here the text will
<small class="text-muted"> be customized through this class.</small></h4></body></html></pre>
Display Headings
When the headings are to be displayed in a larger and opinionated style, then the display heading classes can be used
Example
You can edit and try running this code using the Edit & Run option.
The class .lead makes the paragraph stand out. It gives a larger font size, lighter weight, and a taller line height to the text in a paragraph.https://www.tutorialspoint.com/bootstrap/examples/typography_lead.php
Example
You can edit and try running this code using the Edit & Run option.
The class lead will make the paragraph look different from the regular paragraph. It looks stand-out.
</p></body></html></pre>
Abbreviations
The <abbr> element of HTML is styled by bootstrap where the fullform of the abbreviations and the acronyms is shown on hover and the text is displayed with a light dotted line at the bottom of the text.
Use .initialism class to an abbreviation, in order to get a slightly smaller font size.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography - Abbreviations </title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><p><abbr title="Indian Space Research Organisation">ISRO</abbr></p><p><abbr title="World Health Organisation" class="initialism">WHO</abbr></p></body></html>
Blockquote
When a block of content needs to be added in a document as a quote, class .blockquote is used around the <blockquote> html element.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography - Blockquote </title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Example for blockquote</h4><p>Refer the quote given below.</p><blockquote class="blockquote"><p>An ounce of patience is worth more than a tonne of preaching</p></blockquote></body></html>
Naming a Source
Bootstrap provides a class .blockquote-footer inside the <footer> element for identifying the source. <cite> tag is used to wrap the name of the source work.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography - Naming Source </title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Example for Naming a Source</h4><p>Refer the quote given below.</p><blockquote class="blockquote"><p>An ounce of patience is worth more than a tonne of preaching</p><footer class="blockquote-footer">Written by someone <cite title="Very famous">Very famous</cite></footer></blockquote></body></html>
Alignment
Bootstrap provides classes to change the alignment of the blockquote, such as .text-center and .text-right.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography - Blockquote Alignment </title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Example for alignment of blockquote</h4><p>Refer the quote given below.</p><blockquote class="blockquote text-center"><p>An ounce of patience is worth more than a tonne of preaching</p><footer class="blockquote-footer">Written by someone <cite title="Very famous">Very famous</cite></footer></blockquote></body></html>
Inline Text Elements
Instead of using the common inline HTML5 elements, bootstrap provides the classes that can be used for styling of the text. Follow some of the examples given below:
.mark
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Inline Elements</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of mark </h4><p>Demonstrating use of mark tag to <mark> highlight </mark> text.</p><p class="mark">Demonstrating use of mark class to highlight text.</p></body></html>
.small
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Inline Elements</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of small</h4><p>Demonstrating use of <small> tag to make the text look fineprint.</p><p class="small">Demonstrating use of small class to make the text look fineprint.</p></body></html>
.text-decoration-underline
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Inline Elements</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of .text-decoration-underline</h4><p>Demonstrating use of <u> tag to make the text underlined.</p><p class="text-decoration-underline">Demonstrating use of text-decoration-underline class to make the text underlined.</p></body></html>
.text-decoration-line-through
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Inline Elements</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of .text-decoration-line-through</h4><p>Demonstrating use of s tag to treat the text as no longer accurate.</p><p class="text-decoration-line-through">Demonstrating use of text-decoration-line-through class to treat the text as no longer accurate.</p></body></html>
<del>
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Inline Elements</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of <del> element</h4><p><del>Demonstrating use of <del> tag to render the text as deleted.</del></p></body></html>
<strong>
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Inline Elements</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of strong element</h4><p><strong>Demonstrating use of strong tag to render the text as bold.</strong></p></body></html>
<em>
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Inline Elements</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of em element</h4><p><em>Demonstrating use of em tag to render the text as italicized.</em></p></body></html>
Lists
Unstyled
The class .list-unstyled removes the default style of list and the left margin on the items of the list. However, this style only applies to the immediate child elements.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Lists</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of .list-unstyled</h4><p>The class .list-unstyled removes the default style of list and the left margin on the items of the list.</p><ul class="list-unstyled"><li>Snacks</li><li>Beverages
Bootstrap provides a combination of two classes, .list-inline and .list-inline-item, that removes a list's bullets and adds some margin or space in between the listed items.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Lists</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of .list-inline and .list-inline-item</h4><p>The classes <b>.list-inline</b> and <b>.list-inline-item</b> removes a list's bullets and adds a little margin.</p><ul class="list-inline"><li class="list-inline-item">Tea</li><li class="list-inline-item">Coffee</li><li class="list-inline-item">Juice</li></ul></body></html>
Description List Alignment
Bootstrap provides predefined classes to be added to the <dl>, <dt>, and <dd> tags of HTML to align terms and descriptions horizontally. One can optionally add the class .text-truncate to truncate the text with an ellipsis.https://www.tutorialspoint.com/bootstrap/examples/typography_desc_list_alignment.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Description List Alignment</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of classes for description list alignment</h4><p>The predefined classes of bootstrap help to align terms and description in grid form.</p><dl class="row"><dt class="col-sm-3">Description Lists</dt><dd class="col-sm-9">This tag shows the description of the term</dd><dt class="col-sm-3 text-truncate">The predefined class text-truncate truncates the text and returns the output with ellipsis.</dt><dd class="col-sm-9">This tag shows the truncated text with ellipsis</dd></dl></body></html>
Responsive Font Sizes
Responsive font sizes are enabled in bootstrap 5 by default, allowing the text to scale automatically across all the devices and viewport sizes. It is abbreviated as RFS and is capable of rescaling the text with unit values like margin, padding, border-radius, or even box-shadow.
The RFS automatically calculates the appropriate values as per the dimensions of the browser viewport.
This chapter will discuss about Bootstrap reboot. Reboot is used to reset all the styles of a particular element.
Approach
Reboot styles HTML elements with opinionated styles using only element selectors. Extra styling is done with classes only. For instance, reboot some <table> styles, then include the classes .table, .table-bordered, and more.
Replace default ems with rems for scalable component spacing in browsers.
Skip margin-top. Vertical margins collapse unexpectedly. However, a margin with single direction is a simpler concept.
Block elements should use rems for margins to make scaling across device sizes easier.
Use inherit whenever possible and limit font-related properties declarations.
This enables you to customize in real-time, however you’d like to:
Reboot is used for a elements <HTML> and <body> elements to provide better page-wide defaults. More details are as below.
All elments have a global box-sizing, including *::before, *::after, to border-box. Padding and borders won’t exceed element’s declared width because of it.
If no font-size is set on <HTML>, 16px is assumed as browser default. Use font-size: 1rem on the <body> for accessible, responsive type-scaling, considering user preferences. Modify $font-size-root variable to override default browser setting.
Global styles for <body> include font-family, font-weight, line-height, and color. To avoid font discrepancies, some form elements will inherit this later.
<body> background-color is defaulted to #fff for security purposes.
Native font stack
Reboot is used for the Bootstrap uses a native font stack or system font stack for optimum text rendering on every device and OS.
These system fonts are designed for modern devices with improved screen rendering, changeable font support and more.
Learn more about native font stacks.
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// Windows
"Segoe UI",
// Android
Roboto,
// older macOS and iOS
"Helvetica Neue"
// Linux
"Noto Sans",
"Liberation Sans",
// Basic web fallback
Arial,
// Sans serif fallback
sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
Notes
The font stack has emoji fonts, thus the common symbols, dingbat Unicode characters will appear as colorful pictographs. Their appearance varies with the native emoji font of the browser or platform, and remain unaffected by CSS color styles.
font-family is applied to the <body> and automatically inherited globally in Bootstrap. Update $font-family-base and recompile the Bootstrap for global font-family change.
Headings
Bootstrap Reboot headings are used for removing the default margin that has been provided by HTML header tags which are margin-bottom: .5rem and tightened line-height.
The –bs-heading-color CSS variable allows you to change the default heading-color.
Heading
Example
<h1></h1>
h1. Bootstrap heading
<h2></h2>
h2. Bootstrap heading
<h3></h3>
h3. Bootstrap heading
<h4></h4>
h4. Bootstrap heading
<h5></h5>
h5. Bootstrap heading
<h6></h6>
h6. Bootstrap heading
Paragraphs
Bootstrap 5 reboot paragraphs are used for removing default margin-top that has been provided by HTML <p> tags and set paragraph margin-bottom: 1rem.https://www.tutorialspoint.com/bootstrap/examples/reboot_paragraph.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><p>This is the first paragraph.</p><p>This is the second paragraph.</p></body></html>
Links
Reboot provides links have default color and underline, and change on :hover but not when a user has :visited. No special :focus styles are given.
Example
You can edit and try running this code using Edit & Run option.
As a Bootstrap v5.3.x, link color is set using rgba() and new -rgb CSS variables. This allows easy customization of link color opacity. Link color opacity can be changed using CSS variable –bs-link-opacity as demostrated in the following example.
Example
You can edit and try running this code using Edit & Run option.
Bootstrap reboot targets placeholder links (those without an href) with more specific selectors. Their color and text-decoration are reset to their default values.
Example
You can edit and try running this code using Edit & Run option.
Reboot simplifies <hr> element. The <hr> elements are styled with border-top and opacity: .25 by default, and inherit their border-color from the parent color automatically.
Example
You can edit and try running this code using Edit & Run option.
Bootstrap reboot has removed margin-top and set margin-bottom: 1rem of lists.
List elements <ul>, <ol>, and <dl> have a margin-top removed and set margin-bottom: 1rem.
Description lists have improved margins for easier styling, clear hierarchy, and spacing <dd>s reset margin-left to 0, and add margin-bottom: .5rem. <dt>s are bolded.https://www.tutorialspoint.com/bootstrap/examples/reboot_description_list.php
Inline Code
Use <code> to enclose inline code snippets. Escape HTML angle brackets as necessary.
Example
You can edit and try running this code using Edit & Run option.
The <code>&lt;section&gt;</code> element should be enclosed within an inline container.
</div></body></html></pre>
Code blocks
Bootstrap 5 Reboot Code blocks are used to put the code inside of <pre> tag. It is recommanded to escape angle brackets in code for proper rendering. <pre> element is reset to remove its margin-top.
Example
You can edit and try running this code using Edit & Run option.
To save the changes, press <kbd><kbd>Ctrl</kbd> + <kbd>s</kbd></kbd><br>
To paste the selected item, press <kbd><kbd>Ctrl</kbd> + <kbd>v</kbd></kbd></div></body></html></pre>
Sample output
The <samp> tag should be used to indicate sample output from a program.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><samp>This text should be considered as an example output generated by a computer program.</samp></div></body></html>
Tables
Tables are modified for style <caption>s, border collapse, and consistent text-align. The .table class offers further modifications to borders and padding.
Example
You can edit and try running this code using Edit & Run option.
This is a caption of table to describe the contents.
</caption><thead><tr><th>Employee Id</th><th>Employee Name</th><th>Employee Role</th></tr></thead><tbody><tr><td>10</td><td>Jhon</td><td>Software Devloper</td></tr><tr><td>20</td><td>Mayra</td><td>Tester</td></tr><tr><td>30</td><td>Rocky</td><td>Data Analyst</td></tr></tbody></table></body></html></pre>
Forms
Form elements have been simplified for new base styles. The most significant changes are listed below:
<fieldset>s can be easily used as wrappers for single inputs or groups of inputs as they don't have borders, padding, or margins.
<legend>s have been restyled to be displayed as a heading.
To allow for margins, <label>s are set to display: inline-block.
Normalise mainly handles the styling of <input>s, <select>s, <textarea>s, and <button>s, while reboot also removes their margin and sets line-height: inherit.
<textarea>s are only vertically resizable to prevent page layout "breaks".
<button>s and <input> buttons have cursor: pointer when not disabled.
Some date inputs are not supported by the latest versions of Safari and Firefox.
Example
You can edit and try running this code using Edit & Run option.
Blockquotes default margin is 1em 40px, which is changed to 0 0 1rem for consistency with other elements. These are used when we want to quote content from other sources.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><blockquote class="blockquote"><p>Blockquote removes default margin of HTML blockquote tag element.</p></blockquote><p>Someone well-known in <cite title="Source Title">Source Title</cite>.</p></div></body></html>
Inline elements
Reboot 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.
Basic styling is applied to the <abbr> element to stand out from the paragraph text.
Example
You can edit and try running this code using Edit & Run option.
The <abbr title="Cascading Style Sheet">CSS</abbr> is a style sheet language.
</body></html>
Summary
Text elements can be made interactive to show summary. The default value of the cursor on it is text. So it is reset to the pointer to tell that the particular element is interactive and the user can click on it.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><details><summary>Bootstrap Colors</summary><p>Bootstrap colors used to give the colors to the text or the background.</p></details><details open><summary>Bootstrap Dropdown</summary><p>Dropdown menus are toggleable, contextual menus that can be enabled to show links in a list format.</p></details></div></body></html>
HTML5 [hidden] attribute
The golbal attribute [hidden] in HTML5 has the default styling of display: none.
To improve this default (display:none) reboot helps prevents its display from getting accidentally overridden by setting [hidden] {display: none !important;}.
<input type="text" hidden>
To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of document, use .invisible class instead