My Blog

Author: saqibkhan

  • Button Group

    This chapter will discuss about Bootstrap button groups. Bootstrap button group puts multiple buttons together on a single line, horizontally or vertically.

    Basic example

    You can create a group of buttons using .btn in .btn-group class.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</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="btn-group" role="group" aria-label="Basic Example"><button type="button" class="btn btn-info">Register</button><button type="button" class="btn btn-danger">Submit</button><button type="button" class="btn btn-warning">Cancel</button></div></body></html>

    To ensure accessibility for assistive technologies like screen readers, it is important to use the appropriate role attribute and provide explicit labels for button groups. You can use role=”group” for button groups or role=”toolbar” for button toolbars. To label them, you can use aria-label or aria-labelledby.

    • As an alternative to the .nav navigation components, these classes can also be applied to groups of links.
    • You can highlight a link by using .active class.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</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="btn-group my-2"><a href="#" class="btn btn-success active" aria-current="page">Registration Link</a><a href="#" class="btn btn-success">Submit</a><a href="#" class="btn btn-success">Cancel</a></div></body></html>

    Mixed styles

    In the case of button groups mixed styles, it is possible to form a button group where each button has a distinct background color.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</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="btn-group mt-2" role="group" aria-label="Mixed styles"><button type="button" class="btn btn-info">Register</button><button type="button" class="btn btn-success">Cancel</button><button type="button" class="btn btn-warning">Submit</button></div></body></html>

    Outlined styles

    Use button styles such as btn-outline-primary, btn-outline-dark, etc to show the colors only for the border of the buttons element in the group.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</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="btn-group my-2" role="group" aria-label="Basic outlined"><button type="button" class="btn btn-outline-primary">Register</button><button type="button" class="btn btn-outline-dark">Submit</button><button type="button" class="btn btn-outline-warning">Cancel</button></div></body></html>

    Checkbox and radio button groups

    Using button like-checkbox toggle buttons, we can create seamless looking button group. To acheive this use .btn-check class and type=”checkbox”.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</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="btn-group my-2" role="group" aria-label="checkbox toggle button group"><input type="checkbox" class="btn-check" id="btnCheckbox1" autocomplete="off"><label class="btn btn-outline-primary" for="btnCheckbox1">Register</label><input type="checkbox" class="btn-check" id="btnCheckbox2" autocomplete="off"><label class="btn btn-outline-warning" for="btnCheckbox2">Submit</label><input type="checkbox" class="btn-check" id="btnCheckbox3" autocomplete="off"><label class="btn btn-outline-info" for="btnCheckbox3">Cancel</label></div></body></html>

    Using button like-radio toggle button, we can create a seamless looking button group. To aceive this use .btn-check and type=”radio”.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</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="btn-group" role="group" aria-label="radio toggle button group"><input type="radio" class="btn-check" name="radioButton" id="buttonRadio1" autocomplete="off" checked><label class="btn btn-outline-primary" for="buttonRadio1">Register</label><input type="radio" class="btn-check" name="radioButton" id="buttonRadio2" autocomplete="off"><label class="btn btn-outline-warning" for="buttonRadio2">Submit</label><input type="radio" class="btn-check" name="radioButton" id="buttonRadio3" autocomplete="off"><label class="btn btn-outline-success" for="buttonRadio3">Cancel</label></div></body></html>

    Button toolbar

    Button toolbars can be created by combining sets of button groups. Use utility classes to add a space between groups, buttons, etc.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</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="btn-toolbar mt-2" role="toolbar" aria-label="Toolbar button groups"><div class="btn-group me-2" role="group" aria-label="toolbarButtonGroup1"><button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-info">Info</button><button type="button" class="btn btn-secondary">Secondary</button></div><div class="btn-group me-2" role="group" aria-label="toolbarButtonGroup2"><button type="button" class="btn btn-success">Success</button><button type="button" class="btn btn-dark">Dark</button></div><div class="btn-group" role="group" aria-label="toolbarButtonGroup3"><button type="button" class="btn btn-warning">Warning</button></div></div></body></html>

    Combine input groups and button groups in toolbars. Space things appropriately using utilities.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</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="btn-toolbar mb-3" role="toolbar" aria-label="toolbarButtonGroup1"><div class="btn-group me-2" role="group" aria-label="toolbarButtonGroup2"><button type="button" class="btn btn-outline-primary">Primary</button><button type="button" class="btn btn-outline-info">Info</button><button type="button" class="btn btn-outline-secondary">secondary</button></div><div class="input-group"><div class="input-group-text" id="inputbtnGroup1">@</div><input type="text" class="form-control" placeholder="Username" aria-label="toolbarButtonGroup3" aria-describedby="inputButtonGroup1"></div></div><div class="btn-toolbar justify-content-between" role="toolbar" aria-label="toolbarButtonGroup4"><div class="btn-group" role="group" aria-label="toolbarButtonGroup1"><button type="button" class="btn btn-outline-warning">Warning</button><button type="button" class="btn btn-outline-success">Success</button></div><div class="input-group"><input type="text" class="form-control" placeholder="tutorialspoint" aria-label="toolbarButtonGroup5" aria-describedby="inputButtonGroup2"><div class="input-group-text" id="inputbtnGroup2">@example.com</div></div></div></body></html>

    Sizing

    When nesting several groups, use .btn-group-* on each .btn-group rather than button sizing classes for each button.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</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><h6 class="mt-4">Default size button group</h6><div class="btn-group" role="group" aria-label="Default size button group"><button type="button" class="btn btn-outline-dark">Dark</button><button type="button" class="btn btn-outline-warning">Warning</button></div><h6 class="mt-4">Small size button group</h6><div class="btn-group btn-group-sm" role="group" aria-label="Small size button group"><button type="button" class="btn btn-outline-secondary">Secondary</button><button type="button" class="btn btn-outline-success">Success</button></div><h6 class="mt-4">Large size button group</h6><div class="btn-group btn-group-lg" role="group" aria-label="Large size button group"><button type="button" class="btn btn-outline-primary">Primary</button><button type="button" class="btn btn-outline-info">Info</button></div></body></html>

    Nesting

    To get the dropdown menu mixed with button series, use .btn-group within another .btn-group.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</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="btn-group mt-2" role="group" aria-label="Nested dropdown"><button type="button" class="btn btn-primary">Submit</button><button type="button" class="btn btn-warning">Cancel</button><div class="btn-group" role="group"><button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">

          Languages
    &lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;English&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Hindi&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Vertical variation
    




    To create vertically stacked button group, use .btn-group-vertical class. Bootstrap doesn't support split button dropdowns in this case.
    




    Example
    




    You can edit and try running this code using Edit & Run option.
    




    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</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="btn-group-vertical mt-2" role="group" aria-label="Button group with verical variation"><button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-info">Info</button></div></body></html>
    




    Create the vertical button group with the dropdown menu.
    




    Example
    




    You can edit and try running this code using Edit & Run option.
    




    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</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="btn-group-vertical mt-2" role="group" aria-label="Vertical button group"><button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-info">Secondary</button><div class="btn-group" role="group"><button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">

          Languages
    &lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;English&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;French&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;button type="button" class="btn btn-success"&gt;Success&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Create vertical button group with radio buttons.
    




    Example
    




    You can edit and try running this code using Edit & Run option.
    




    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</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="btn-group-vertical mt-2" role="group" aria-label="Vertical button group with radio"><input type="radio" class="btn-check" name="vbtn-radio" id="verticalRadioButton1" autocomplete="off" ><label class="btn btn-outline-warning" for="verticalRadioButton1">Unchecked Radio Button</label><input type="radio" class="btn-check" name="vbtn-radio" id="verticalRadioButton2" autocomplete="off" checked><label class="btn btn-outline-warning" for="verticalRadioButton2">checked Radio Button</label><input type="radio" class="btn-check" name="vbtn-radio" id="verticalRadioButton3" autocomplete="off"><label class="btn btn-outline-warning" for="verticalRadioButton3">Unchecked Radio Button</label></div></body></html>

  • Breadcrumb

    This chapter will discuss about Bootstrap breadcrumbs. A breadcrumb is a navigational method that shows the user where they are relative to the current page on a website or application. An accessible website with many pages or a complicated hierarchy can benefit greatly from breadcrumb navigation.

    Basic breadcrumbs

    Bootstrap allows users to easily create static breadcrumbs layouts by adding the class .breadcrumb to ordered or unordered lists, as demonstrated in the following example. Utility classes can be used to decorate the breadcrumbs.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><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><title>Bootstrap - Breadcrumb</title></head><body><div class="m-4"><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item active" aria-current="page">Home</li></ol></nav><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item active" aria-current="page">Services</li></ol></nav><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item"><a href="#">Services</a></li><li class="breadcrumb-item active" aria-current="page">Contact</li></ol></nav></div></body></html>

    Dividers

    When you want to modify the default breadcrumb divider / with the > as a divider, then you can use some custom CSS style rules as shown in the below example:

    Dividers are automatically added in CSS through the pseudo-element ::before and property content.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><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><title>Bootstrap - Breadcrumb</title></head><body><div class="m-4"><nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item active" aria-current="page">Services</li></ol></nav></div></body></html>

    The quote function is required to quote strings when modifying with Sass. For example, if you use > as your delimiter, then you can use $breadcrumb-divider: quote(“>”);

    You can also use embedded SVG icons. Apply icons via custom CSS properties or use Sass variables as demonstrated below.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Breadcrumb</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>

      &lt;nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E");" aria-label="breadcrumb"&gt;
      &lt;ol class="breadcrumb"&gt;&lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li class="breadcrumb-item active" aria-current="page"&gt;About us&lt;/li&gt;&lt;/ol&gt;&lt;/nav&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    If you don't want a breadcrumb separator into the linked list items then set the value of --bs-breadcrumb-divider as a empty strings (' ') or set a Saas variable to $breadcrumb-divider: none;
    




    Example
    




    You can edit and try running this code using Edit & Run option.
    




    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Breadcrumb</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><nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item active" aria-current="page">About us</li></ol></nav></body></html>

  • Badges

    This chapter will discuss about bootstrap badges and the classes to create badges. Badges are frequently used for highlighting important details on web pages, such as headings, warnings, and notification counters.

    Bootstrap badges are numerical indication or notification counters (of how many items are associated with a link).

    Badges

    To scale them according to the size of the immediate parent element, badge uses comparative font scaling and em units. In page links, focus or hover styles are no longer supported as of version 5.

    Following example demonstrates how to create inline badges using Bootstrap.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><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><title>Bootstrap - Badges</title></head><body><h1>Sample heading <span class="badge bg-secondary">New</span></h1><h2>Sample heading <span class="badge bg-secondary">Offer</span></h2><h3>Sample heading <span class="badge bg-secondary">New</span></h3><h4>Sample heading <span class="badge bg-secondary">Offer</span></h4><h5>Sample heading <span class="badge bg-secondary">New</span></h5><h6>Sample heading <span class="badge bg-secondary">Offer</span></h6></body></html>

    Buttons

    Badges can be used as part of links or buttons to provide a counter. The users will only see the content of the badge because of how badges are styled, which gives a visual cue as to their purpose. These badges may appear to be random additions of words or numbers at the conclusion of a sentence, a link, or a button, based on the circumstances.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><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><title>Bootstrap - Badges</title></head><body><button type="button" class="btn btn-success" style="margin: 20px;">

      Messages &lt;span class="badge text-bg-warning"&gt;6&lt;/span&gt;&lt;/button&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Notifications
    




    This example explains a visually hidden class with a portion of additional text where users can see the digit "32" represents the number of notifications.
    




    Example
    




    You can edit and try running this code using Edit & Run option.
    




    <!DOCTYPE html><html lang="en"><head><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><title>Bootstrap - Badges</title></head><body><button type="button" class="btn btn-success position-relative" style="margin: 20px;">

    Notifications
&lt;span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary"&gt;
  32+
  &lt;span class="visually-hidden"&gt;unread notifications&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Positioned
    




    A .badge can be modified with top-0 , start-100 , translate-middle utilities and placed in the corner of a link or button. Let's look at the sample below to see how it generally functions.
    




    Example
    




    You can edit and try running this code using Edit & Run option.
    




    <!DOCTYPE html><html lang="en"><head><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><title>Bootstrap - Badges</title></head><body><button type="button" class="btn btn-primary position-relative" style="margin: 20px;">

    Inbox
&lt;span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info"&gt;
  55+
  &lt;span class="visually-hidden"&gt;unread notifications&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Indicator
    




    Bootstrap Badges are a numerical indication of the number of items associated with a link. Items that are new or unread are highlighted using badges
    




    Example
    




    You can edit and try running this code using Edit & Run option.
    




    <!DOCTYPE html><html lang="en"><head><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><title>Bootstrap - Badges</title></head><body><button type="button" class="btn btn-info position-relative" style="margin: 20px;">

    Webinar
&lt;span class="position-absolute top-0 start-100 translate-middle p-2 bg-primary border border-light rounded-circle"&gt;&lt;span class="visually-hidden"&gt;New notifications&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Background colors
    




    Using the .text-bg-{color} helpers , users may set a background color with a contrasting foreground color. In the past, pairing the preferred .text-{color} and .bg-{color} utilities manually was necessary for styling; nevertheless, users are still free to do so if they wish.
    




    Use the text-bg-primary, text-bg-info, text-bg-success etc. utility classes offered by bootstrap's background colour framework to instantly change the appearance of the badges.
    




    Example
    




    You can edit and try running this code using Edit & Run option.
    




    <!DOCTYPE html><html lang="en"><head><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><title>Bootstrap - Badges</title></head><body style="margin: 20px;"><span class="badge text-bg-primary">Primary</span><span class="badge text-bg-info">Info</span><span class="badge text-bg-secondary">Secondary</span><span class="badge text-bg-success">Success</span><span class="badge text-bg-light">Light</span><span class="badge text-bg-dark">Dark</span><span class="badge text-bg-warning">Warning</span><span class="badge text-bg-danger">Danger</span></body></html>
    




    Pill Badges
    




    Users can design badges in the shape of pills, or badges having more rounded corners, by using the .rounded-pill modifier class, as demonstrated in the example below.
    




    To quickly modify the appearance of the badges, use the .rounded-pill utility classes provided in bootstrap's background color framework.
    




    Example
    




    You can edit and try running this code using Edit & Run option.
    




    <!DOCTYPE html><html lang="en"><head><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><title>Bootstrap - Badges</title></head><body style="margin: 20px;"><span class="badge rounded-pill text-bg-primary">Primary</span><span class="badge rounded-pill text-bg-secondary">Secondary</span><span class="badge rounded-pill text-bg-info">Info</span><span class="badge rounded-pill text-bg-success">Success</span><span class="badge rounded-pill text-bg-light">Light</span><span class="badge rounded-pill text-bg-dark">Dark</span><span class="badge rounded-pill text-bg-danger">Danger</span><span class="badge rounded-pill text-bg-warning">Warning</span></body></html>

  • Alerts

    This chapter discusses about the Bootstrap alerts. The alert messages are often the stand out messages shown to the user, where some user action is required, such as warning, error, information or confirmation messages.

    By extending the .alert base class with the contextual classes (such as .alert-success, .alert-warning, .alert-info, etc.), you can quickly and simply build attractive alert messages for any number of reasons using Bootstrap. To cancel any alert, you may also include an optional close button.

    Simple Alerts

    There is a total of 8 different alert types offered by Bootstrap. The most typical alerts, such as success, error or danger, warning and info alerts, etc., are demonstrated in the example below.

    Example

    You can edit and try running this code using the Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Alerts</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 mt-3"><h4 class="fs-2">Examples of alert messages</h4><div class="alert alert-primary" role="alert">

                It is a primary alert box!
        &lt;/div&gt;&lt;div class="alert alert-secondary" role="alert"&gt;
            It is a secondary alert box!
        &lt;/div&gt;&lt;div class="alert alert-success" role="alert"&gt;
            It is a success alert box!
        &lt;/div&gt;&lt;div class="alert alert-danger" role="alert"&gt;
            It is a danger alert box!
        &lt;/div&gt;&lt;div class="alert alert-warning" role="alert"&gt;
            It is a warning alert box!
        &lt;/div&gt;&lt;div class="alert alert-info" role="alert"&gt;
            It is an info alert box!
        &lt;/div&gt;&lt;div class="alert alert-light" role="alert"&gt;
            It is a light alert box!
        &lt;/div&gt;&lt;div class="alert alert-dark" role="alert"&gt;
            It is a dark alert box!
        &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    

    Accessibility tip: Use of color to the alert messages just provides a visual indication, and this will not be helpful to users of assistive technologies like screen readers. Make sure that the meaning is clear from the content itself.
    




    Use alternative means to add clarity to the content using the .visually-hidden class.
    

    




    Live alert example
    




    You can add a live alert message on your webpage. In order to achieve this refer the example given below.
    




    Example
    




    You can edit and try running this code using the Edit & Run option.
    




    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Alerts</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 mt-3"><h4 class="fs-2">Live alert</h4><div class="alert alert-primary alert-dismissible" role="alert"><div id="liveAlertPlaceholder"></div><button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button></div></div><script>

                const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
            const appendAlert = (message, type) =&gt; {
            const wrapper = document.createElement('div')
            wrapper.innerHTML = [
            &amp;lt;div class="alert alert-${type} alert-dismissible" role="alert"&amp;gt;,
               &amp;lt;div&amp;gt;${message}&amp;lt;/div&amp;gt;,
            '   &lt;button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"&gt;&lt;/button&gt;',
            '&lt;/div&gt;'
            ].join('')
            alertPlaceholder.append(wrapper)
            }
            const alertTrigger = document.getElementById('liveAlertBtn')
            if (alertTrigger) {
                alertTrigger.addEventListener('click', () =&gt; {
                appendAlert('Amazing, this is a live alert message!', 'success')
                })
                }
        &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    The following Javascript is used to trigger the live alert demo:
    




      const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

            const appendAlert = (message, type) =&gt; {
        const wrapper = document.createElement('div')
        wrapper.innerHTML = [
        ``,
           ${message},
        '   ',
        ''
        ].join('')
          alertPlaceholder.append(wrapper)
        }
        const alertTrigger = document.getElementById('liveAlertBtn')
        if (alertTrigger) {
            alertTrigger.addEventListener('click', () =&gt; {
            appendAlert('Amazing, this is a live alert message!', 'success')
             })
            }
    




    Link Color
    




    The utility class .alert-link can be used for any alert message to instantly produce matching coloured links, as demonstrated in the example below.
    




    Example
    




    You can edit and try running this code using the Edit & Run option.
    




    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Alerts</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 mt-3"><h4 class="fs-2">Alert messages with links</h4><div class="alert alert-primary" role="alert">

                It is a primary alert with &lt;a href="https://www.tutorialspoint.com/bootstrap/bootstrap_alerts.htm" class="alert-link"&gt;tutorialspoint.com&lt;/a&gt;&lt;/div&gt;&lt;div class="alert alert-secondary" role="alert"&gt;
            It is a secondary alert with &lt;a href="https://www.tutorialspoint.com/bootstrap/bootstrap_alerts.htm" class="alert-link"&gt;tutorialspoint.com&lt;/a&gt;&lt;/div&gt;&lt;div class="alert alert-success" role="alert"&gt;
            It is a success alert with &lt;a href="https://www.tutorialspoint.com/bootstrap/bootstrap_alerts.htm" class="alert-link"&gt;tutorialspoint.com&lt;/a&gt;&lt;/div&gt;&lt;div class="alert alert-danger" role="alert"&gt;
            It is a danger alert with &lt;a href="https://www.tutorialspoint.com/bootstrap/bootstrap_alerts.htm" class="alert-link"&gt;tutorialspoint.com&lt;/a&gt;&lt;/div&gt;&lt;div class="alert alert-warning" role="alert"&gt;
            It is a warning alert with &lt;a href="https://www.tutorialspoint.com/bootstrap/bootstrap_alerts.htm" class="alert-link"&gt;tutorialspoint.com&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Additional content
    




    Additional HTML elements like headers, paragraphs, and dividers can also be included in alerts. Following example demonstrates the same.
    




    Example
    




    You can edit and try running this code using the Edit & Run option.
    




    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Alerts</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 mt-3"><h4 class="fs-2">Alert messages with additional content</h4><div class="alert alert-success" role="alert"><h4 class="alert-heading">Congratulations! Sending my best wishes.</h4><p>Congratulations on your graduation! Sending you our best wishes for a happy and successful future.</p><hr><p class="mb-0">What could be better than something sweet to celebrate an accomplishment!!!</p></div></div></body></html>
    




    Alerts with Icons
    




    For creating alerts with icons use flexbox utilities and Bootstrap Icons.https://www.tutorialspoint.com/bootstrap/examples/alerts_icon.php
    




    Example
    




    You can edit and try running this code using the Edit & Run option.
    




    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Alerts</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 mt-3"><h4 class="fs-2">Alert messages with icons</h4><svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="success-bg" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></symbol><symbol id="info-bg" viewBox="0 0 16 16"><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></symbol><symbol id="warning-bg" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></symbol></svg><div class="alert alert-primary d-flex align-items-center" role="alert"><svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-bg"/></svg><div>

                  It is an info alert with an info icon.
            &lt;/div&gt;&lt;/div&gt;&lt;div class="alert alert-success d-flex align-items-center" role="alert"&gt;&lt;svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"&gt;&lt;use xlink:href="#success-bg"/&gt;&lt;/svg&gt;&lt;div&gt;
              It is a success alert with a success icon.
            &lt;/div&gt;&lt;/div&gt;&lt;div class="alert alert-warning d-flex align-items-center" role="alert"&gt;&lt;svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"&gt;&lt;use xlink:href="#warning-bg"/&gt;&lt;/svg&gt;&lt;div&gt;
              It is a warning alert with a warning icon.
            &lt;/div&gt;&lt;/div&gt;&lt;div class="alert alert-danger d-flex align-items-center" role="alert"&gt;&lt;svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"&gt;&lt;use xlink:href="#warning-bg"/&gt;&lt;/svg&gt;&lt;div&gt;
              It is a danger alert with a danger icon.
            &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Dismissing Alerts
    




    Any alert can be dismissed inline by using the alert JavaScript plugin. Refer the following points:
    




      

    • Make sure the built-in Bootstrap JavaScript or the alert plugin is loaded.
      • 




    • Add a close button and the .alert-dismissible class, which places the close button and provides extra padding to the right of the alert.
      • 




    • The JavaScript feature can be turned on by adding the data-bs-dismiss="alert" attribute to the close button.
      • 

    




    Let us see this feature in the following example:
    




    Example
    




    You can edit and try running this code using the Edit & Run option.
    




    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Alerts</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 mt-3"><h4 class="fs-2">Dismissal of alerts</h4><div class="alert alert-primary alert-dismissible" role="alert"><strong>Primary Alert Box!</strong> Click on close icon to dismiss the alert box.

                &lt;button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="alert alert-success alert-dismissible" role="alert"&gt;&lt;strong&gt;Success Alert Box!&lt;/strong&gt; Click on close icon to dismiss the alert box.
            &lt;button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="alert alert-warning alert-dismissible" role="alert"&gt;&lt;strong&gt;Warning Alert Box!&lt;/strong&gt; Click on close icon to dismiss the alert box.
            &lt;button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    

    Make sure to add tabindex="-1" to the element, when you are setting the focus on a non-interactive element that usually does not receive the focus, after closing an alert message. As, not doing so, might lose the focus and reset it to the start of the page, after an alert message is closed.
    

    




    Animated Alerts
    




    The utility classes .fade and .show create the animation effect, when you close an alert message. Let us see this feature in the following example.
    




    Example
    




    You can edit and try running this code using the Edit & Run option.
    




    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Alerts</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 mt-3"><h4 class="fs-2">Alert messages with animation</h4><div class="alert alert-info alert-dismissible fade show" role="alert"><strong>Primary Alert Box!</strong> This will close the alert box with fading effect.

                &lt;button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="alert alert-success alert-dismissible fade show" role="alert"&gt;&lt;strong&gt;Success Alert Box!&lt;/strong&gt; This will close the alert box with fading effect.
            &lt;button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="alert alert-warning alert-dismissible fade show" role="alert"&gt;&lt;strong&gt;Warning Alert Box!&lt;/strong&gt; This will close the alert box with fading effect.
            &lt;button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • Accordion

    This chapter will discuss about Bootstrap accordion. The accordion collapses elements vertically, shows and hides through class changes. Use the collapse JavaScript plugin to create accordions that collapse vertically.

    How it works

    In order to collapse, the accordion uses collapse internally. Use .open class to .accordion element to render an expanded accordion.

    Basic Example

    To expand and collapsethe content, click on the accordions below.https://www.tutorialspoint.com/bootstrap/examples/basic_example.php

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Accordion</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><style></style></head><body><div class="accordion" id="basicAccordion"><div class="accordion-item"><h2 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#firstCollapse" aria-expanded="true" aria-controls="firstCollapse">

             Bootstrap - Accordian
        &lt;/button&gt;&lt;/h2&gt;&lt;div id="firstCollapse" class="accordion-collapse collapse show" data-bs-parent="#basicAccordion"&gt;&lt;div class="accordion-body"&gt;
          The &lt;b&gt;accordion&lt;/b&gt; collapses elements vertically, shown and hidden by class change.
        &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="accordion-item"&gt;&lt;h2 class="accordion-header"&gt;&lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#secondCollapse" aria-expanded="false" aria-controls="secondCollapse"&gt;
          Bootstrap - Buttons
        &lt;/button&gt;&lt;/h2&gt;&lt;div id="secondCollapse" class="accordion-collapse collapse" data-bs-parent="#basicAccordion"&gt;&lt;div class="accordion-body"&gt;
          You can use Bootstraps custom button styles for actions in forms, dialogs and many more.        
        &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Flush
    




    To render edge-to-edge accordions, use .accordion-flush to remove borders and rounded corners.
    




    You can edit and try running this code using Edit & Run option.
    




    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Accordion</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><style></style></head><body><div class="accordion accordion-flush" id="flushAccordion"><div class="accordion-item"><h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"

              data-bs-target="#flushCollapseOne" aria-expanded="false" aria-controls="flushCollapseOne"&gt;
          Bootstrap - Accordian
        &lt;/button&gt;&lt;/h2&gt;&lt;div id="flushCollapseOne" class="accordion-collapse collapse" data-bs-parent="#flushAccordion"&gt;&lt;div class="accordion-body"&gt;
          The &lt;b&gt;accordion&lt;/b&gt; collapses elements vertically, shown and hidden by class change.
        &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="accordion-item"&gt;&lt;h2 class="accordion-header"&gt;&lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#flushCollapseTwo" aria-expanded="false" aria-controls="flushCollapseTwo"&gt;
          Bootstrap - Buttons
        &lt;/button&gt;&lt;/h2&gt;&lt;div id="flushCollapseTwo" class="accordion-collapse collapse" data-bs-parent="#flushAccordion"&gt;&lt;div class="accordion-body"&gt;
          You can use Bootstraps custom button styles for actions in forms, dialogs and many more.
        &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Always open
    




    To keep accordion items open while another item is opened, remove data-bs-parent attribute from each .accordion-collapse.
    




    You can edit and try running this code using Edit & Run option.
    




    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Accordion</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><style></style></head><body><div class="accordion" id="alwaysOpenAccordion"><div class="accordion-item"><h2 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#firstCollpaseofAlwaysOpen" aria-expanded="true" aria-controls="firstCollpaseofAlwaysOpen">

              Bootstrap - Accordian
        &lt;/button&gt;&lt;/h2&gt;&lt;div id="firstCollpaseofAlwaysOpen" class="accordion-collapse collapse show"&gt;&lt;div class="accordion-body"&gt;
          The &lt;b&gt;accordion&lt;/b&gt; collapses elements vertically, shown and hidden by class change.
        &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="accordion-item"&gt;&lt;h2 class="accordion-header"&gt;&lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#secondCollpaseofAlwaysOpen" aria-expanded="false" aria-controls="secondCollpaseofAlwaysOpen"&gt;
          Bootstrap - Buttons
        &lt;/button&gt;&lt;/h2&gt;&lt;div id="secondCollpaseofAlwaysOpen" class="accordion-collapse collapse"&gt;&lt;div class="accordion-body"&gt;
          The &lt;b&gt;accordion&lt;/b&gt; collapses elements vertically, shown and hidden by class change.
        &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Accessibility
    




    See collapse accessibility section for details.

  • Figures

    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.

    <!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>Figure caption alignment</h4><br><figure class="figure"><img src="/bootstrap/images/tutimg.png" class="figure-img img-fluid rounded" alt="Image in Figure"><figcaption class="figure-caption text-center">Responsive image</figcaption></figure></body></html>

    Print Page

  • Tables

    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.

    <DOCTYPE html ><html lang="en"><head ><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><title >Bootstrap - Table</title ></head ><body ><table class="table" ><thead ><tr ><th scope="col" >Sr.No.</th ><th scope="col" >Name</th ><th scope="col" >Role</th ><th scope="col" >Salary</th ></tr ></thead ><tbody ><tr ><th scope="row" >1</th ><td >Jhon</td ><td >Software Developer</td ><td >40000</td ></tr ><tr ><th scope="row" >2</th ><td >David</td ><td >Tester</td ><td >50000</td ></tr ><tr ><th scope="row" >3</th ><td >Mary</td ><td >Data Analyst</td ><td >35000</td ></tr ></tbody ></table ></body ></html >

    Variants

    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.

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Table</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><table class="table"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr class="table-default"><th scope="row">1</th><td>Oliver</td><td>Full satck developer</td><td>40000</td></tr><tr class="table-primary"><th scope="row">2</th><td>Jhon</td><td>Software Developer</td><td>43000</td></tr><tr class="table-secondary"><th scope="row">3</th><td>David</td><td>Tester</td><td>60000</td></tr><tr class="table-info"><th scope="row">4</th><td>Sam</td><td>Software Developer</td><td>35000</td></tr><tr class="table-danger"><th scope="row">5</th><td>Mary</td><td>Data Analyst</td><td>36000</td></tr><tr class="table-success"><th scope="row">6</th><td>James</td><td>Tester</td><td>47000</td></tr><tr class="table-active"><th scope="row">7</th><td>Mary</td><td>HR</td><td>90000</td></tr><tr class="table-light"><th scope="row">8</th><td>Noah</td><td>Data Analyst</td><td>50000</td></tr><tr class="table-warning"><th scope="row">9</th><td>Lucas</td><td>Software Developer</td><td>52000</td></tr><tr class="table-dark"><th scope="row">10</th><td>Almand</td><td>Software Developer</td><td>73000</td></tr></tbody></table></body></html>

    Accented tables

    Striped rows

    To get zebra-striping on the rows add .table-striped class in the .tbody as shown in the below example.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><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><title>Bootstrap - Table</title></head><body><table class="table table-striped"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

    Striped columns

    To get zebra-striping on the columns add .table-striped-columns class in the .tbody as shown in the below example.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html><head><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><title>Bootstrap - Table</title></head><body><table class="table table-striped-columns"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

    Add the classes .table-dark and .table-striped to get the dark color zebra-striping on the table.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html><head><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><title>Bootstrap - Table</title></head><body><table class="table table-dark  table-striped"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

    Add the classes .table-dark and .table-striped-columns to get the dark color zebra-striping columns.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html><head><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><title>Bootstrap - Table</title></head><body><table class="table table-dark  table-striped-columns"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

    Add the classes .table-success and .table-striped to get the light green color zebra-striping on the table.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html><head><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><title>Bootstrap - Table</title></head><body><table class="table  table-success table-striped"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

    Add the classes .table-success and .table-striped-columns to get the light green color zebra-striping columns on the table.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html><head><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><title>Bootstrap - Table</title></head><body><table class="table  table-success table-striped-columns"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

    Hoverable rows

    Add the .table-hover class to get the hover effect on table rows as shown in the below example.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><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><title>Bootstrap - Table</title></head><body><table class="table table-hover  table-secondary"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

    Add the classes .table-hover and .table-dark to get the dark color hover effect on table rows.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html><head><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><title>Bootstrap - Table</title></head><body><table class="table  table-dark table-hover"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

    Add the classes .table-hover and .table-striped to get the hover effect with zebra-striping on the table.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html><head><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><title>Bootstrap - Table</title></head><body><table class="table  table-hover  table-striped"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

    Active table

    Add .table-active class to highlight the row or cell of the table.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html><head><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><title>Bootstrap - Table</title></head><body><table class="table"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr class="table-active"><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr class="table-active"><th scope="row">3</th><td >mery</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

    Bordered table

    To get boundaries around each item and rounded corners around the whole table add .table-bordered class in the .tbody as shown in the below example.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><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><title>Bootstrap - Table</title></head><body><table class="table table-bordered  border-primary"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

    Tables without borders

    To get the table without borders add .table-borderless class in the .tbody as shown in the below example.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><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><title>Bootstrap - Table</title></head><body><table class="table table-borderless"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

    Small tables

    To make table more compact by cutting all cell padding in half by adding .table-sm class to any .table, as seen in the below example.

    Example

    You can edit and try running this code using Edit & Run option.

    <DOCTYPE html><html lang="en"><head><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><title>Bootstrap - Table</title></head><body><table class="table table-sm"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

    Table group dividers

    To make table border thicker and darker between table groups .thead, .tbody and .tfoot add a .table-sm class, as seen in the below example.

    Example

    You can edit and try running this code using Edit & Run option.

    <DOCTYPE html><html lang="en"><head><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><title>Bootstrap - Table</title></head><body><table class="table"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody class="table-group-divider"><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

    Vertical alignment

    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.

    <!DOCTYPE html><html><head><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><title>Bootstrap - Tables</title></head><body><div class="table-responsive"><table class="table align-middle"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr class="align-bottom"><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mery</td><td class="align-top">Data Analyst</td><td>35000</td></tr></tbody></table></div></body></html>

    Responsive table

    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:

    ClassScreen 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.

    <!DOCTYPE html><html lang="en"><head><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><title>Bootstrap - Table</title></head><body><div class="table-responsive"><table class="table table-bordered"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Age</th><th scope="col">Blood Group</th><th scope="col">gender</th><th scope="col">Address</th><th scope="col">Married</th><th scope="col">Education</th><th scope="col">AdharCard Number</th><th scope="col">Pan Number</th><th scope="col">City</th><th scope="col">Country</th><th scope="col">Salary</th><th scope="col">status</th><th scope="col">status</th><th scope="col">status</th><th scope="col">status</th></tr></thead><tbody><tr><td></td><td>Jhon</td><td>Software Developer</td><td>32</td><td>A+</td><td>Male</td><td>Pune,Maharashtra.</td><td>Yes</td><td>B.E(Computer Science)</td><td>0101010101010101</td><td>2020200202020202</td><td>Pune</td><td>India</td><td>40000</td><td>yes</td><td>yes</td><td>yes</td><td>yes</td></tr></tbody></table></div></body></html>

    Nesting

    Table nesting is used to create a table inside of a table, as seen in the below example.

    Example

    You can edit and try running this code using Edit & Run option.

    <DOCTYPE html><html lang="en"><head><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><title>Bootstrap - Table</title></head><body><table class="table"><thead class="table"><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><td colspan="4"><table class="table mb-0  table-striped"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Almand</td><td>Software Developer</td><td>60000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>35000</td></tr><tr><th scope="row">3</th><td>Sam</td><td>Data Analyst</td><td>40000</td></tr></tbody></table></td></tr><tr><th scope="row">2</th><td>Mona</td><td>Data Analyst</td><td>50000</td></tr><tr><th scope="row">3</th><td>Oliver</td><td>Tester</td><td>45000</td></tr></tbody></table></body></html>

    Anatomy

    Table head

    Add classes .table-secondary to make table head gray color, as seen in the below example.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html><head><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><title>Bootstrap - Table</title></head><body><table class="table"><thead class="table-secondary"><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td >mery</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

    Table foot

    The .tfoot class add footer at the end of the table, as seen in the below example.

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html><head><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><title>Bootstrap - Table</title></head><body><table class="table"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td >mery</td><td>Data Analyst</td><td>35000</td></tr></tbody><tfoot><tr><th scope="row">footer</th><td >footer</td><td>footer</td><td>footer</td></tr></tfoot></table></body></html>

    Caption

    A <caption> functions use to give a heading for a table., as seen in the below example

    Example

    You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html><html><head><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><title>Bootstrap - Table</title></head><body><table class="table"><caption>List of Employees</caption><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td >mery</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

  • Images

    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.

    <!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><div class="container mt-3 p-2"><h2 class="text-start">Responsive Image</h2><img src="/bootstrap/images/tutimg.png" class="img-fluid" alt="Responsive Image"></div></body></html>

    Image as Thumbnail

    An image to be displayed as a thumbnail with a border and some padding, use the class .img-thumbnail on the image element

    Example

    You can edit and try running this code using the Edit & 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><div class="container mt-3 p-2"><h2 class="text-start">Thumbnail Image</h2><img src="/bootstrap/images/scenery.jpg" class="img-thumbnail" alt="Thumbnail Image"></div></body></html>

    Image with Rounded Corners

    An image to be displayed with rounded corners, use the class .rounded on the image element

    Example

    You can edit and try running this code using the Edit & 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><div class="container mt-3 p-2"><h2 class="text-start">Image with rounded corners</h2><img src="/bootstrap/images/scenery2.jpg" class="rounded" alt="Image with rounded corners"></div></body></html>

    Alignment of Images

    The images that are added to the webpage can be aligned as per our choice and that can be left, right or centred. In order to place an image:

    • to the left, use the class .float-start

    Example

    You can edit and try running this code using the Edit & 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><div class="container mt-3 p-2"><h2 class="text-start">Image aligned to left</h2><img src="/bootstrap/images/scenery3.jpg" class="float-start" alt="Left aligned Image"></div></body></html>
    • to the right use the class .float-end

    Example

    You can edit and try running this code using the Edit & 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><div class="container mt-3 p-2"><h2 class="text-center">Image aligned to right</h2><img src="/bootstrap/images/tutimg.png" class="float-end" alt="Right aligned Image"></div></body></html>
    • to the center, use the utility classes .mx-auto (margin:auto) and .d-block (display:block)

    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><div class="container"><h2 class="text-center">Image aligned to centre</h2><img src="/bootstrap/images/profile.jpg" width="500" height="500" class="mx-auto d-block" alt="Centre aligned Image"></div></body></html>

    Picture

    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>

  • Typography

    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.

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography - Headings </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>Heading 1 - h1</h1><h2>Heading 2 - h2</h2><h3>Heading 3 - h3</h3><h4>Heading 4 - h4</h4><h5>Heading 5 - h5</h5><h6>Heading 6 - h6</h6></body></html>

    The classes .h1 to .h6 are also available in bootstrap, to match the font styling of a heading without using the associated 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 - Headings Classes </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 class="h1">Class h1 - Heading 1</p><p class="h2">Class h2 - Heading 2</p><p class="h3">Class h3 - Heading 3</p><p class="h4">Class h4 - Heading 4</p><p class="h5">Class h5 - Heading 5</p><p class="h6">Class h6 - Heading 6</p></body></html>

    Customizing Headings

    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
  &lt;small class="text-muted"&gt; be customized through this class.&lt;/small&gt;&lt;/h4&gt;&lt;/body&gt;&lt;/html&gt;</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.
    




    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography - Display Headings </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 class="display-1">Display 1 - Heading 1</p><p class="display-2">Display 2 - Heading 2</p><p class="display-3">Display 3 - Heading 3</p><p class="display-4">Display 4 - Heading 4</p><p class="display-5">Display 5 - Heading 5</p><p class="display-6">Display 6 - Heading 6</p></body></html>
    




    Lead
    




    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.
    




    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography - Lead </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 class="lead">

       The class lead will make the paragraph look different from the regular paragraph. It looks stand-out.
 &lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</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

           &lt;ul class="list"&gt;&lt;li&gt;Cold Beverage&lt;/li&gt;&lt;li&gt;Hot Beverage&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Inline
    




    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.

  • Reboot

    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:

    <body style="--bs-body-color: #333;"><!-- ... --></body>

    Page defaults

    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.

    HeadingExample
    <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.

    <!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><a href="#">Visit Tutorialspoint..</a></p></body></html>

    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.

    <!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><a href="#" style="--bs-link-opacity: .7">Visit Tutorialspoint</a></p></body></html>

    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.

    <!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><a>Visit Tutorialspoint</a></p></body></html>

    Horizontal rules

    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.

    <!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><h2 class="text-center">Horizontal rules</h2><div class="container"><hr><div class="text-primary"><hr></div><hr class="border border-warning border-3 opacity-75"><hr class="border border-info border-4 opacity-100"></div></body></html>

    Lists

    • 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.

    <!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">

      The &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; element should be enclosed within an inline container.
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</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.
    




    <!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><pre><code>Tutorialspoint

        This is an example of code block.
    &lt;/code&gt;&lt;/pre&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Variables
    




    Reboot variables are used to reboot the style of <var> tag elements.
    




    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><var>a</var><var>x</var> + <var>b</var><var>y</var> = <var>c</var></body></html>
    




    User input
    




    Reboot user input <kbd> is used to indicate input that is typically entered via keyboard.
    




    The text enclosed within the <kbd> tag is typically dispalyed in the browser's default monospace font.
    




    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">

        To save the changes, press &lt;kbd&gt;&lt;kbd&gt;Ctrl&lt;/kbd&gt; + &lt;kbd&gt;s&lt;/kbd&gt;&lt;/kbd&gt;&lt;br&gt;
    To paste the selected item, press &lt;kbd&gt;&lt;kbd&gt;Ctrl&lt;/kbd&gt; + &lt;kbd&gt;v&lt;/kbd&gt;&lt;/kbd&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</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.
    




    <!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><table><caption>

            This is a caption of table to describe the contents.
      &lt;/caption&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Employee Id&lt;/th&gt;&lt;th&gt;Employee Name&lt;/th&gt;&lt;th&gt;Employee Role&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;10&lt;/td&gt;&lt;td&gt;Jhon&lt;/td&gt;&lt;td&gt;Software Devloper&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;20&lt;/td&gt;&lt;td&gt;Mayra&lt;/td&gt;&lt;td&gt;Tester&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;30&lt;/td&gt;&lt;td&gt;Rocky&lt;/td&gt;&lt;td&gt;Data Analyst&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;</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.
    




    <!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><form class="bd-example"><fieldset><legend>Form</legend><p><label for="input">Name</label><input type="text" id="inputName" placeholder="Enter your name..."></p><p><label for="email">Email id</label><input type="email" id="emailId" placeholder="[email protected]"></p><p><label for="tel">Mobile No:</label><input type="tel" id="Mob"></p><p><label for="url">Age</label><input type="number" id="age"></p><p><label for="number">Number</label><input type="number" id="number"></p><p><label for="search">Search Here</label><input type="search" id="searchHere"></p><p><label for="range">Range</label><input type="range" id="rangeExample" min="0" max="10"></p><p><label for="file">Upload file</label><input type="file" id="fileinput"></p><p><label for="select">Languages</label><select id="select"><option value="">select...</option><optgroup label="Group 1"><option value="">HTML</option><option value="">CSS</option><option value="">Bootstrap</option></optgroup><optgroup label="Group 2"><option value="">C</option><option value="">C++</option><option value="">Java</option></optgroup></select></p><p><h6>Selects the languages</h6><label><input type="checkbox" value="">

                HTML
        &lt;/label&gt;&lt;br&gt;&lt;label&gt;&lt;input type="checkbox" value=""&gt;
            CSS
        &lt;/label&gt;&lt;br&gt;&lt;label&gt;&lt;input type="checkbox" value=""&gt;
            Javascript
        &lt;/label&gt;&lt;/p&gt;&lt;p&gt;&lt;h6&gt;Select your gender&lt;/h6&gt;&lt;label&gt;&lt;input type="radio" name="firstOption" id="radios1" value="option1" checked&gt;
          Female
        &lt;/label&gt;&lt;br&gt;&lt;label&gt;&lt;input type="radio" name="secondOption" id="radios2" value="option2"&gt;
          Male
        &lt;/label&gt;&lt;br&gt;&lt;label&gt;&lt;input type="radio" name="thirdOption" id="radios3" value="option3" disabled&gt;
            Others
        &lt;/label&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="textarea"&gt;Feedback&lt;/label&gt;&lt;textarea id="feedbackTextarea" rows="4"&gt;&lt;/textarea&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="date"&gt;Birth date&lt;/label&gt;&lt;input type="date" id="birthDate"&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="time"&gt;Time&lt;/label&gt;&lt;input type="time" id="timeInput"&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="password"&gt;Enter Password&lt;/label&gt;&lt;input type="password" id="password"&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="datetime-local"&gt;Local Datetime&lt;/label&gt;&lt;input type="datetime-local" id="localDatetime"&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="week"&gt;Select week&lt;/label&gt;&lt;input type="week" id="weekInput"&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="month"&gt;Select month&lt;/label&gt;&lt;input type="month" id="monthInput"&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="color"&gt;Selet color&lt;/label&gt;&lt;input type="color" id="selectColor"&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="output"&gt;Output: &lt;/label&gt;&lt;output name="result" id="output"&gt;Tutorialspoint&lt;/output&gt;&lt;/p&gt;&lt;p&gt;&lt;label&gt;Buttons&lt;/label&gt;&lt;button type="submit"&gt;Submit&lt;/button&gt;&lt;input type="reset" value="Reset"&gt;&lt;input type="button" value="Button"&gt;&lt;/p&gt;&lt;p&gt;&lt;label&gt;Disabled Buttons&lt;/label&gt;&lt;button type="submit" disabled&gt;Submit&lt;/button&gt;&lt;input type="reset" value="Reset" disabled&gt;&lt;input type="button" value="Button" disabled&gt;&lt;/p&gt;&lt;/fieldset&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Pointers on buttons
    




      

    • Reboot provides a role="button" that changes the cursor to a pointer. Use this attribute to indicate interactive elements.
      • 




    • Not necessary for <button> elements, as they have their own cursor change.
      • 

    




    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"><span role="button" tabindex="0">Non-button element</span></div></body></html>
    




    Misc elements
    




    Address
    




      

    • Reboot address element <address> is used to change the font-style from italic to normal text.
      • 




    • It inherits line height and margin-bottom is set to 1rem.
      • 




    • Preserve formatting by ending lines with <br>.
      • 

    




    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"><address><strong>ABC Corporation</strong><br>

            505 sansui street,&lt;br&gt;
        Eillis, CA 0178&lt;br&gt;&lt;abbr title="Phone"&gt;P:&lt;/abbr&gt; (212) 357-0194
      &lt;/address&gt;&lt;address&gt;&lt;a href="mailto:[email protected]"&gt;[email protected]&lt;/a&gt;&lt;/address&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Blockquote
    




    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.
    




    <!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>

      The &lt;abbr title="Cascading Style Sheet"&gt;CSS&lt;/abbr&gt; 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