Author: saqibkhan

  • Input Groups

    This chapter will discuss about bootstrap input groups component. A bootstrap input group component is a an extremely versatile and effective form controls for building appealing and visually appealing form controls, however it is only compatible with text input, select, and textarea.

    Users may quickly add text, buttons, or button groups to the sides of text inputs, custom selections, and custom file inputs to extend form controls.

    Input groups

    • The sections that follow will show users how to add text, icons, and buttons before, after, or on either side of form controls to make the form appear more professional.
    • An icon, sampletext, or a button can be added in front of or behind the input field using the .input-group class, which is a container to enhance inputs.
    https://www.tutorialspoint.com/bootstrap/examples/input_groups_basic_example.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Input 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="container mt-3"><form action="/contact.php"><div class="input-group mb-3"><span class="input-group-text">@ </span><input type="text" class="form-control" placeholder="Username" name="usrname"></div><div class="input-group mb-3"><input type="text" class="form-control" placeholder="Your Email" name="email"><span class="input-group-text">@tutorialspoint.com </span></div><button type="submit" class="btn btn-success">Submit </button></form></div></body></html>

    Wrapping

    By default, input groups wrap uses the flex-wrap: wrap class to allow for custom form field validation inside the input group. Users can disable this using .flex-nowrap class.https://www.tutorialspoint.com/bootstrap/examples/input_groups_with_wrapping.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Input 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="container mt-3"><div class="input-group flex-nowrap"><span class="input-group-text" id="addon-wrapping">Email address</span><input type="email" class="form-control" placeholder="[email protected]" aria-label="email id" aria-describedby="addon-wrapping"></div></div></body></html>

    Sizing

    For small and large input groups, respectively, use the .input-group-sm and .input-group-lg classes.https://www.tutorialspoint.com/bootstrap/examples/input_groups_sizing.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Input 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="container mt-3"><div class="input-group input-group-sm mb-3"><span class="input-group-text">@small</span><input type="text" class="form-control" aria-label="Input for sizing" aria-describedby="inputGroup-sizing-sm"></div><div class="input-group mb-3"><span class="input-group-text">@default</span><input type="text" class="form-control" aria-label="Input for sizing" aria-describedby="inputGroup-sizing-default"></div><div class="input-group input-group-lg mb-3"><span class="input-group-text">@large</span><input type="text" class="form-control" aria-label="Input for sizing" aria-describedby="inputGroup-sizing-lg"></div></div></body></html>

    Checkboxes and radios

    Insert the text inside the input group’s addon using any checkbox or radio button. If there is no text next to the input, we suggest to add .mt-0 to the .form-check-input.https://www.tutorialspoint.com/bootstrap/examples/input_groups_checkboxes_radios.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Input 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="container mt-3"><div class="input-group mb-3"><div class="input-group-text"><input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox"></div><input type="text" class="form-control" placeholder="Item 1"></div><div class="input-group"><div class="input-group-text"><input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button"></div><input type="text" class="form-control" placeholder="Item 2"></div></div></body></html>

    Multiple inputs

    Although more than one <input> tags can be displayed visually, validation styles are only offered for input groups with a single <input> tag.https://www.tutorialspoint.com/bootstrap/examples/input_groups_with_multiple_inputs.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Input 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="container mt-3"><div class="input-group"><span class="input-group-text">Student email id and  password </span><input type="text" aria-label=" email id " class="form-control"><input type="text" aria-label="password" class="form-control"></div></div></body></html>

    Multiple addons

    Users have the option to combine multiple addons into a single input group. Additionally, you can mix both the checkbox and radio inputs, as demonstrated in the example below.https://www.tutorialspoint.com/bootstrap/examples/input_groups_with_multiple_addons.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Input 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="container mt-3"><div class="input-group mb-3"><span class="input-group-text"><input type="checkbox" class="form-check-input mt-0"></span><span class="input-group-text">$</span><span class="input-group-text">0.00</span><input type="text" class="form-control"></div><div class="input-group mb-3"><input type="text" class="form-control"><span class="input-group-text">$</span><span class="input-group-text">0.00</span></div></div></body></html>

    Button addons

    Users can add or remove buttons from form controls like text. Easily add any number of buttons that you want to the .input-group, as shown in the example below.https://www.tutorialspoint.com/bootstrap/examples/input_groups_with_button_addons.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Input 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"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-4"><div class="row"><div class="input-group mb-3"><input type="text" class="form-control" placeholder="Search"><button type="button" class="btn btn-primary"><i class="bi-search"></i></button></div><div class="input-group"><input type="text" class="form-control" placeholder="Type text"><button type="submit" class="btn btn-success">Submit</button><button type="clear" class="btn btn-danger">Clear</button></div></div></div></body></html>

    Buttons with dropdowns

    Users have the option to combine multiple addons into a single input group. Additionally, you can mix both the checkbox and radio inputs, as demonstrated in the example below.https://www.tutorialspoint.com/bootstrap/examples/input_groups_buttons_with_dropdowns.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Input 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="container mt-4"><div class="input-group mb-3"><button class="btn btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown"
    
          aria-expanded="false"&gt;Dropdown&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;hr class="dropdown-divider"&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Others&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;input type="text" class="form-control" aria-label="Dropdown button"&gt;&lt;/div&gt;&lt;div class="input-group mb-3"&gt;&lt;input type="text" class="form-control" aria-label="Dropdown button"&gt;&lt;button class="btn btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown"
          aria-expanded="false"&gt;Dropdown&lt;/button&gt;&lt;ul class="dropdown-menu dropdown-menu-end"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;hr class="dropdown-divider"&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Others&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&gt;
      &lt;/div&gt;&lt;div class="input-group  mb-3"&gt;&lt;button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
          aria-expanded="false"&gt;Dropdown&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;hr class="dropdown-divider"&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Others&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons"&gt;&lt;button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
          aria-expanded="false"&gt;Dropdown&lt;/button&gt;&lt;ul class="dropdown-menu dropdown-menu-end"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;hr class="dropdown-divider"&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Others&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Segmented buttons

    The same common style that defines a dropdown button is used by segmented buttons to segment dropdowns in input groups. The .btn class is used to create buttons, and the .dropdown-menu class is used to create dropdown menus.https://www.tutorialspoint.com/bootstrap/examples/input_groups_segmented_buttons_with_dropdowns.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Input 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="container mt-4"><div class="input-group mb-3"><button type="button" class="btn btn-outline-dark">Home</button><button type="button" class="btn btn-outline-dark dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Home</a></li><li><a class="dropdown-item" href="#">About Us</a></li><li><a class="dropdown-item" href="#">Services</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Separated link</a></li></ul><input type="text" class="form-control" aria-label="Segmented dropdown button"></div><div class="input-group"><input type="text" class="form-control" aria-label="Segmented dropdown button"><button type="button" class="btn btn-outline-dark">Home</button><button type="button" class="btn btn-outline-dark dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button><ul class="dropdown-menu dropdown-menu-end"><li><a class="dropdown-item" href="#">Home</a></li><li><a class="dropdown-item" href="#">About Us</a></li><li><a class="dropdown-item" href="#">Services</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Separated link</a></li></ul></div></div></body></html>

    Custom forms

    Custom forms are expanded form controls used to gather certain data from website visitors. There are restrictions on the number of different forms you can create using custom forms. There are two types of custom forms:

    • Custom select
    • Custom file input

    Users can select or pick from a predefined option using the custom select menu, which is a dropdown menu.https://www.tutorialspoint.com/bootstrap/examples/input_groups_with_custom_select_form.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Input 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="container mt-4"><div class="input-group mb-3"><label class="input-group-text" for="customSelect1">Options</label><select class="form-select" id="customSelect1"><option selected>Select the Subject</option><option value="1">English</option><option value="2">Mathematics</option><option value="3">Science</option></select></div><div class="input-group mb-3"><select class="form-select" id="customSelect2"><option selected>Select the Subject</option><option value="1">English</option><option value="2">Mathematics</option><option value="3">Science</option></select><label class="input-group-text" for="customSelect2">Options</label></div><div class="input-group mb-3"><button class="btn btn-outline-dark" type="button">Button</button><select class="form-select" id="customSelect3" aria-label="Button addon"><option selected>Select the Subject</option><option value="1">English</option><option value="2">Mathematics</option><option value="3">Science</option></select></div><div class="input-group"><select class="form-select" id="customSelect4" aria-label="Button addon"><option selected>Select the Subject</option><option value="1">English</option><option value="2">Mathematics</option><option value="3">Science</option></select><button class="btn btn-outline-dark" type="button">Button</button></div></div></body></html>

    Custom file input

    In custom file input users can choose a file by clicking a button that opens a file to select from your personal computer or server.

    Example

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

    <!DOCTYPE html ><html lang="en" ><head ><title >Bootstrap - Input 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="container mt-4" ><div class="input-group mb-3" ><label class="input-group-text" for="customFileInput1" >Upload </label ><input type="file" class="form-control" id="customFileInput1" ></div ><div class="input-group mb-3" ><input type="file" class="form-control" id="customFileInput2" ><label class="input-group-text" for="customFileInput2" >Upload </label ></div ><div class="input-group mb-3" ><button class="btn btn-outline-primary" type="button" id="customFileInput3" >Option Button </button ><input type="file" class="form-control" id="inputGroupFile03" aria-describedby="customFileInput3" aria-label="Upload" ></div ><div class="input-group" ><input type="file" class="form-control" id="inputGroupFile04" aria-describedby="customFileInput4" aria-label="Upload" ><button class="btn btn-outline-primary" type="button" id="customFileInput4" >Option Button </button ></div ></div ></body ></html >

  • Range

    This chapter will discuss about Bootstrap form range. Range is an interactive component. The user can quickly scroll and slide through possible values spread across the required range.

    Basic example

    • Use class .form-range to create unique controls for <input type=”range”>. Both track and thumb have the same appearance across all browsers.
    • Bootstrap doesn’t support “filling” their range’s track from left to right of the thumb as a means to visually indicate progress. This is only supported on firefox.
    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Form - Range</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><label for="basicRange" class="form-label">Range</label><input type="range" class="form-range" id="basicRange"></body></html>

    Disabled

    • The disabled attribute is used to disable the Range.
    • Disabled range cannot be focused, appears greyed out, and has no pointer events.

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Form - Range</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><label for="disabledRange" class="form-label">Range</label><input type="range" class="form-range" id="disabledRange" disabled></body></html>

    Min and max

    Default range input for min is 0 and max is 100. If you are using min and max attributes, new values can be specified.https://www.tutorialspoint.com/bootstrap/examples/range_min_and_max.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Form - Range</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><label for="minmaxrange" class="form-label">Range</label><input type="range" class="form-range" min="0" max="9" id="minmaxrange"></body></html>

    Steps

    Range step determines how much the range input value will increase or decrease in one step. Number of steps is doubled when step=”0.5″ is used.https://www.tutorialspoint.com/bootstrap/examples/range_steps.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Form - Range</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><label for="stepRange" class="form-label">Range</label><input type="range" class="form-range" min="0" max="7" step="0.5" id="stepRange"></html>

    Print Page

  • Checkbox and Radios

    This chapter will discuss about checkbox and radios utilities provided by Bootstrap. Checkboxes allow you to select one or more alternatives from a list, whereas radio buttons allow you to choose only one.

    Approach

    • Bootstrap provides wrapper class .form-check for improved layout and behavior of browser default checkboxes and radios elements. It also allows greater customization and cross browser consistency.
    • .form-check-label class is used to show checkbox labels.
    • .form-check-input class is used for input type checkbox.
    • Structurally, the input and label act as siblings.

    Bootstrap’s custom icons are used to display checked or indeterminate states.

    Checkbox

    Checkboxes select one or several options from a list.https://www.tutorialspoint.com/bootstrap/examples/checkbox.php

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Checkbox</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="form-check"><input class="form-check-input" type="checkbox" value="" id="defaultCheck"><label class="form-check-label" for="defaultCheck">
    
       item 1
      &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check"&gt;&lt;input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked&gt;&lt;label class="form-check-label" for="flexCheckChecked"&gt;
        item 2
      &lt;/label&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Indeterminate

    • The :indeterminate pseudo class is used to create intermediate state checkboxes.
    • The indeterminate state is set via JavaScript as there is no equivalent HTML attribute available to specify it.

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Checkbox</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="form-check"><input class="form-check-input" type="checkbox" value="" id="indeterminateCheckbox" ><label class="form-check-label" for="indeterminateCheckbox">
    
         item 1
      &lt;/label&gt;&lt;/div&gt;&lt;script&gt;
      var x = document.getElementById("indeterminateCheckbox").indeterminate = true;;
    </script></body></html>

    Disabled checkbox

    To indicate disabled state use disabled attribute. This makes the associated <label> lighter color indicating disabled state.https://www.tutorialspoint.com/bootstrap/examples/checkbox_disabled.php

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Checkbox</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="form-check"><input class="form-check-input" type="checkbox" value="" id="disabledIndeterminateCheckbox" disabled><label class="form-check-label" for="disabledIndeterminateCheckbox">
    
         item 1
      &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check"&gt;&lt;input class="form-check-input" type="checkbox" value="" id="disabledCheckedCheckbox" checked disabled&gt;&lt;label class="form-check-label" for="disabledCheckedCheckbox"&gt;
         item 2
      &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check"&gt;&lt;input class="form-check-input" type="checkbox" value="" id="disabledCheckbox" disabled&gt;&lt;label class="form-check-label" for="disabledCheckbox"&gt;
       item 3
      &lt;/label&gt;&lt;/div&gt;&lt;/body&gt;&lt;script&gt;
    var x = document.getElementById("disabledIndeterminateCheckbox").indeterminate = true;
    </script></html>

    Radios

    Radio button limits the number of choices to only one in a list.https://www.tutorialspoint.com/bootstrap/examples/radio.php

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Radio</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="form-check"><input class="form-check-input" type="radio" name="flexRadioDefault" id="defaultRadio"><label class="form-check-label" for="defaultRadio">
    
        Item 1
      &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check"&gt;&lt;input class="form-check-input" type="radio" name="flexRadioDefault" id="defaultCheckRadio" checked&gt;&lt;label class="form-check-label" for="defaultCheckRadio"&gt;
        Item 2
      &lt;/label&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Disabled Radio Button

    To indicate disabled state use disabled attribute and the associated <label>'s are styled with a lighter color.https://www.tutorialspoint.com/bootstrap/examples/radio_disabled.php

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Form - Radio</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="form-check"><input class="form-check-input" type="radio" name="flexRadioDisabled" id="disabledRadio" disabled><label class="form-check-label" for="disabledRadio">
    
         Item 1
      &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check"&gt;&lt;input class="form-check-input" type="radio" name="flexRadioDisabled" id="disabledCheckedRadio" checked disabled&gt;&lt;label class="form-check-label" for="disabledCheckedRadio"&gt;
        Item 2
      &lt;/label&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Switches

    • The switch has the custom checkbox markup, to render the toggle use .form-switch class. Use role="switch" to convey the type of control to assistive technologies.
    • The switches supports the disabled attribute. The older assistive technologies just announced it as a normal checkbox as a fallback.
    https://www.tutorialspoint.com/bootstrap/examples/radio_switches.php

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Form - Radio</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="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="defaultSwitchCheckbox"><label class="form-check-label" for="defaultSwitchCheckbox">Wi-fi</label></div><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="defaultSwitchCheckedCheckbox" checked><label class="form-check-label" for="defaultSwitchCheckedCheckbox">Bluetooth</label></div><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="disabledSwitchCheckbox" disabled><label class="form-check-label" for="disabledSwitchCheckbox">Whatsapp Notification</label></div><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="disabledSwitchCheckedCheckbox" checked disabled><label class="form-check-label" for="disabledSwitchCheckedCheckbox">Facebook Notification</label></div></body></html>

    Default checkbox and radios (stacked)

    The radios and checkboxes can be stacked vertically using the .form-check class.https://www.tutorialspoint.com/bootstrap/examples/radio_checkbox_default_stacked.php

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Checkbox and Radios</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="form-check"><input class="form-check-input" type="radio" name="Radios" id="defaultStackedRadio" value="option2"><label class="form-check-label" for="defaultStackedRadio">
    
       English
      &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check"&gt;&lt;input class="form-check-input" type="radio" name="Radios" id="disabledStackedRadio" value="option3" disabled&gt;&lt;label class="form-check-label" for="disabledStackedRadio"&gt;
        Hindi
      &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check"&gt;&lt;input class="form-check-input" type="checkbox" value="" id="defaultCheckbox"&gt;&lt;label class="form-check-label" for="defaultCheckbox"&gt;
      Marathi
    &lt;/div&gt;&lt;div class="form-check"&gt;&lt;input class="form-check-input" type="checkbox" value="" id="disabledCheckbox" disabled&gt;&lt;label class="form-check-label" for="disabledCheckbox"&gt;
       Japanes
      &lt;/label&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Inline

    To put checkboxes and radios next to each other, use the class .form-check-inline with any .form-check.https://www.tutorialspoint.com/bootstrap/examples/checkbox_radios_inline.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Checkbox and Radios</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="form-check form-check-inline"><input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineDeafultRadio" value="option1"><label class="form-check-label" for="inlineDeafultRadio">English</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineDisabledRadio" value="option3" disabled><label class="form-check-label" for="inlineDisabledRadio">Hindi</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="inlineDeafultCheckbox" value="option1"><label class="form-check-label" for="inlineDeafultCheckbox">Marathi</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="inlineDisabledCheckbox" value="option3" disabled><label class="form-check-label" for="inlineDisabledCheckbox">Japanes</label></div></body></html>

    Reverse

    Place checkboxes, radios and switches on opposite sides using .form-check-reverse modifier class.https://www.tutorialspoint.com/bootstrap/examples/checkbox_radios_reverse.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Checkbox and Radios</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="form-check form-check-reverse"><h4>Inline Checkboxes</h4><input class="form-check-input" type="checkbox" value="" id="deafultReverseCheckbox"><label class="form-check-label" for="deafultReverseCheckbox">
    
       English
      &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check form-check-reverse"&gt;&lt;input class="form-check-input" type="checkbox" value="" id="disabledReverseCheckbox" disabled&gt;&lt;label class="form-check-label" for="disabledReverseCheckbox"&gt;
       Hindi
      &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check form-switch form-check-reverse"&gt;&lt;input class="form-check-input" type="checkbox" id="switchReverseCheckbox"&gt;&lt;label class="form-check-label" for="switchReverseCheckbox"&gt;Wifi&lt;/label&gt;&lt;/div&gt;&lt;div class="form-check form-check-reverse"&gt;&lt;h4&gt;Inline Radios&lt;/h4&gt;&lt;input class="form-check-input" type="radio" value="" id="deafultReverseRadio"&gt;&lt;label class="form-check-label" for="deafultReverseRadio"&gt;
       Marathi
      &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check form-check-reverse"&gt;&lt;input class="form-check-input" type="radio" value="" id="disabledReverseRadio" disabled&gt;&lt;label class="form-check-label" for="disabledReverseRadio"&gt;
        Japanes
      &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check form-switch form-check-reverse"&gt;&lt;input class="form-check-input" type="radio" id="switchReverseRadio"&gt;&lt;label class="form-check-label" for="switchReverseRadio"&gt;Bluetooth&lt;/label&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Without Labels

    • Skip the wrapping class .form-check for checkboxes and radio that have no label text.
    • Provide an accessible name for assistive technologies (for instance, using aria-label). For information, refer accessibility section of the Forms overview section.
    https://www.tutorialspoint.com/bootstrap/examples/checkbox_radio_without_labels.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Form - Checkbox and Radio Buttons</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><input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
    
      Item 1
    &lt;/div&gt;&lt;div&gt;&lt;input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="..."&gt;
      Item 2
    &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Toggle Buttons

    • Use .btn class on the <label> element rather than .form-check-label to create button-like checkboxes and radio buttons. These toggle buttons may also be placed together in a button group.
    • Use .btn-check class which indicate that the input is of a button-type checkbox.

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Checkbox and Radios</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><h5>Checkbox Toggle Buttons</h5><input type="checkbox" class="btn-check" id="defaultToggleChecbox" autocomplete="off"><label class="btn btn-primary" for="defaultToggleChecbox">Item 1</label><input type="checkbox" class="btn-check" id="checkedToggleChecbox" checked autocomplete="off"><label class="btn btn-secondary" for="checkedToggleChecbox">Item 2</label><input type="checkbox" class="btn-check" id="disabledToggleChecbox" autocomplete="off" disabled><label class="btn btn-info" for="disabledToggleChecbox">Item 3</label><h5>Radios Toggle Buttons</h5><input type="radio" class="btn-check"  id="defaultToggleRadio" autocomplete="off"><label class="btn btn-primary" for="defaultToggleRadio">Item 1</label><input type="radio" class="btn-check" id="checkedToggleRadio" checked autocomplete="off"><label class="btn btn-secondary" for="checkedToggleRadio">Item 2</label><input type="radio" class="btn-check" id="disabledToggleRadio" autocomplete="off" disabled><label class="btn btn-info" for="disabledToggleRadio">Item 3</label></body></html>

    Outlined Styles

    Different variants of .btn are supported, including different outline styles as demonstrated in below example.https://www.tutorialspoint.com/bootstrap/examples/checkbox_radio_outlined_styles.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Checkbox and Radio Buttons</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><input type="checkbox" class="btn-check" id="defualtOutlineCheckbox" autocomplete="off"><label class="btn btn-outline-primary" for="defualtOutlineCheckbox">Single toggle</label><br><br><input type="checkbox " class="btn-check" id="checkedOutlineCheckbox" checked autocomplete="off"><label class="btn btn-secondary" for="checkedOutlineCheckbox">Checked</label><br><br><input type="radio" class="btn-check" name="options-outlined" id="checkedOutlineRadio" autocomplete="off" checked><label class="btn btn-info" for="checkedOutlineRadio">Checked success radio</label><input type="radio" class="btn-check" name="options-outlined" id="defualtOutlineRadio" autocomplete="off"><label class="btn btn-outline-warning" for="defualtOutlineRadio">Danger radio</label></body></html>

  • Form Select

    This chapter will discuss about Bootstrap form select menu. Custom CSS can be used to alter the default appearance of the native <select> elements.

    Default

    • Custom class .form-select is required for custom <select> menus, to trigger the custom styles.
    • Due to browser restrictions, custom styles are only able to change the <select>‘s default appearance and cannot change the <options>s.

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Select Menu</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><select class="form-select" aria-label="Default select example"><option selected>Select Menu</option><option value="1">Item 1</option><option value="2">Item 2</option><option value="3">Item 3</option></select></body></html>

    Sizing

    In order to match the similar sized text inputs, you may also select from small and large custom selects.https://www.tutorialspoint.com/bootstrap/examples/select_menu_sizing.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Select Menu</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><select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example"><option selected>Large Sized Select Menu</option><option value="1">Item 1</option><option value="2">Item 2</option><option value="3">Item 3</option></select><select class="form-select form-select-sm" aria-label=".form-select-sm example"><option selected>Small Sized Select Menu</option><option value="1">Item 1</option><option value="2">Item 2</option><option value="3">Item 3</option></select></body></html>

    You can give multiple options in drop-down list using multiple attribute.https://www.tutorialspoint.com/bootstrap/examples/select_menu_sizing_multiple_attributes.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Select Menu</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><select class="form-select" multiple aria-label="multiple select example"><option selected>Select Menu</option><option value="1">Item 1</option><option value="2">Item 2</option><option value="3">Item 3</option></select></body></html>

    size attribute restricts the number of options in a drop-down list.https://www.tutorialspoint.com/bootstrap/examples/select_menu_sizing_size_attributes.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Select Menu</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><select class="form-select" size="4" aria-label="size 3 select example"><option selected>Select Menu</option><option value="1">Item 1</option><option value="2">Item 2</option><option value="3">Item 3</option><option value="3">Item 4</option></select></html>

    Disabled

    In order to make a select appear greyed out and eliminate pointer events, add the disabled boolean attribute to it.https://www.tutorialspoint.com/bootstrap/examples/select_menu_disabled.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Form - Select Menu</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><select class="form-select" aria-label="Disabled select example" disabled><option selected>Select Menu</option><option value="1">Item 1</option><option value="2">Item 2</option><option value="3">Item 3</option></select></html>

    Print Page

  • Form Controls

    This chapter will discuss about Bootstrap form controls. Custom styles, size, focus states, and other features can be used to upgrade textual form controls like <input> and <textarea>.

    Basic example

    Use the classes .form-control and .form-label to style the form controls.https://www.tutorialspoint.com/bootstrap/examples/formlayout_basic_example.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Form Control</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="mb-3"><label for="formControlName" class="form-label">Full Name</label><input type="text" class="form-control" id="formControlName" placeholder="name"></div><div class="mb-3"><label for="formControlEmail" class="form-label">Email id</label><input type="text" class="form-control" id="formControlEmail" placeholder="[email protected]"></div><div class="mb-3"><label for="formControlTextarea" class="form-label">Add a comment</label><textarea class="form-control" id="formControlTextarea" rows="3"></textarea></div><button type="submit" class="btn btn-success">Submit</button></body></html>

    Sizing

    Use classes like .form-control-lg and .form-control-sm to specify the size for the form input field.https://www.tutorialspoint.com/bootstrap/examples/formlayout_sizing.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Form Control</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><input class="form-control  form-control-lg mt-2" type="text" placeholder="Large size input box" aria-label=".form-control-lg example"><input class="form-control  mt-2" type="text" placeholder="Default size input box" aria-label="default input example"><input class="form-control  form-control-sm  mt-2" type="text" placeholder="Small size input box" aria-label=".form-control-sm example"></body></html>

    Form text

    • Use .form-text to create block-level or inline-level form text .
    • A top margin is added to easily space the inputs above a block-level element.

    Associate form text with form controls using aria-labelledby or aria-describedby attributes to ensure it is announced by assistive technologies such as screen readers.

    https://www.tutorialspoint.com/bootstrap/examples/formlayout_form_text.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Form Control</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><label for="inputUsername" class="form-label mt-2">Username</label><input type="text" id="inputUsername" class="form-control" aria-labelledby="UsernameHelpBlock"><div id="UsernameHelpBlock" class="form-text">
    
      Your username 620 characters long and can be any combination of letters, numbers or symbols.
    &lt;/div&gt;&lt;label for="inputPassword" class="form-label mt-2"&gt;Password&lt;/label&gt;&lt;input type="text" id="inputPassword" class="form-control" aria-labelledby="PasswordHelpBlock"&gt;&lt;div id="PasswordHelpBlock" class="form-text"&gt;
      must be 6-20 characters long.
    &lt;/div&gt;&lt;button type="submit" class="btn btn-primary mt-2"&gt;Submit&lt;/button&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Inline text can use any typical inline HTML element (such as, <span><small>...etc) with only .form-text class.https://www.tutorialspoint.com/bootstrap/examples/formlayout_form_text_inline.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Form Control</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="row g-3 align-items-center mt-2"><div class="col-auto"><label for="inputUsername" class="col-form-label">Username</label></div><div class="col-auto"><input type="text" id="inputUsername" class="form-control" aria-labelledby="usernameHelpInline"></div><div class="col-auto"><span id="usernameHelpInline" class="form-text">
    
          Username 620 characters long.
        &lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Disabled

    For a grayed-out appearance and to remove pointer events use the disabled attribute to an input.https://www.tutorialspoint.com/bootstrap/examples/formlayout_disabled.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Form Control</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><input class="form-control mt-2" type="text" placeholder="Disable Input Field" aria-label="Disabled input example" disabled></body></html>

    Readonly

    Use the readonly attribute to prevent changes to an input's value.https://www.tutorialspoint.com/bootstrap/examples/formlayout_readonly.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Form Control</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><input class="form-control mt-2" type="text" value="Tutorialspoint" aria-label="readonly example" readonly></body></html>

    Readonly plain text

    .form-control-plaintext creates a readonly input field as a plaintext. This removes styling and preserves the proper margin and padding.https://www.tutorialspoint.com/bootstrap/examples/formlayout_readonly_plaintext.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Form Control</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="mb-3 row"><label for="name" class="col-sm-2 col-form-label">Name</label><div class="col-sm-3"><input type="text" readonly class="form-control-plaintext" id="name" value="Tutorialspoint"></div></div><div class="mb-3 row"><label for="bootstrap" class="col-sm-2 col-form-label">Language</label><div class="col-sm-3"><input type="text" class="form-control" id="bootstrap" placeholder="Bootstrap"></div></div></body></html>

    In readonly plaintext inline, you can make form labels and inputs will appear inline and horizontally.https://www.tutorialspoint.com/bootstrap/examples/formlayout_readonly_plaintext_inline.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Form Control</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="row g-2 mt-2"><div class="col-auto"><input type="text" readonly class="form-control-plaintext" id="staticName" value="Tutorialspoint"></div><div class="col-auto"><input type="text" class="form-control" id="inputLanguage" placeholder="Bootstrap"></div></form></body></html>

    File input

    File input is used to browse the file as an input on your computer.

    File input using sizes

    • Use .form-control-sm to make the size of file input smaller.
    • Use .form-control-lg to make the size of file input bigger.
    https://www.tutorialspoint.com/bootstrap/examples/formlayout_file_input_sizes.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Form Control</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="mb-3"><label for="fileInputsm" class="form-label">Small size file input</label><input class="form-control form-control-sm" id="fileInputsm" type="file"></div><div><label for="fileInputlg" class="form-label">Large size file input</label><input class="form-control form-control-lg" id="fileInputlg" type="file"></div></body></html>

    File input using attribute

    • There is no need to explicitly define the default attribute.
    • Use disabled attribute which give grayed-out appearance and remove pointer events.
    • Multiple files can be accepted for input at once with multiple attribute.
    https://www.tutorialspoint.com/bootstrap/examples/formlayout_file_input_attribute.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Form Control</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="mb-3"><label for="defaultFileInput" class="form-label">Default file input</label><input class="form-control" type="file" id="defaultFileInput"></div><div class="mb-3"><label for="disabledFileInput" class="form-label">Disabled file input</label><input class="form-control" type="file" id="disabledFileInput" disabled></div><div class="mb-3"><label for="multipleFileInput" class="form-label">Multiple files input</label><input class="form-control" type="file" id="multipleFileInput" multiple></div></body></html>

    Color

    Use .form-control-color class and type="color" attribute in the <input> element to add color to the input field.https://www.tutorialspoint.com/bootstrap/examples/formlayout_color.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Form Control</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><label for="colorInput" class="form-label">Select a color</label><input type="color" class="form-control form-control-color" id="colorInput" value="#228b22"></body></html>

    Datalists

    You can create a group of <option>'s that can be accessed from a <input> by using datalists. Browsers and operating systems provide limited and inconsistent styling for <datalist> elements.https://www.tutorialspoint.com/bootstrap/examples/formlayout_datalist.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Form Control</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><label for="dataList" class="form-label">Languages</label><input class="form-control" list="datalistOptions" id="dataList" placeholder="Search languages..."><datalist id="datalistOptions"><option value="Bootstrap"><option value="HTML"><option value="CSS"></datalist></body></html>

  • Forms

    This chapter will discuss about Bootstrap forms. A form facilitate user to enter data such as name, email address, password etc, which can then be sent to server for processing. Bootstrap provides classes to create a variety of forms with varied styles, layouts and custom components.

    Basic form

    • Form controls in Bootstrap extend Rebooted form styles with classes. For consistent rendering across browsers and devices with customized display, use these classes .
    • To use more recent input controls, such as email verification, number selection, and other features, be sure to use an appropriate type attribute on all inputs (e.g., email for email addresses or the number for numerical data).

    Following example demonstrates Boostrap’s basic form.https://www.tutorialspoint.com/bootstrap/examples/form_basic_form.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Form</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><div class="mb-3"><label for=" sampleInputEmail" class="form-label">Username</label><input type="email" class="form-control" id=" sampleInputEmail" aria-describedby="emailHelp"></div><div class="mb-3"><label for="sampleInputPassword" class="form-label">Password</label><input type="password" class="form-control" id="sampleInputPassword"></div><div class="mb-3 form-check"><input type="checkbox" class="form-check-input" id="sampleCheck"><label class="form-check-label" for="sampleCheck">Remember me</label></div><button type="submit" class="btn btn-primary">Log in</button></form></body></html>

    Disabled forms

    • To prevent user interactions and make an input appear lighter, use the disabled boolean attribute.
    • To disable all the controls in a <fieldset>, add the disabled attribute. The <input><select>, and <button> elements of native form controls contained within a fieldset <disabled> are all treated by browsers as disabled, preventing keyboard and mouse interactions with them.
    • If form has custom button-like elements, such as <a class=”btn btn-*”>…</a>, they have pointer-events: none set, whichmeans they are still focusable and keyboard-operable. To prevent them from receiving focus use tabindex=”-1″ and use aria-disabled=”disabled” to signal their state to assistive technologies.
    https://www.tutorialspoint.com/bootstrap/examples/form_disabled_form.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Form</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><fieldset disabled><div class="mb-3"><label for="disabledEmailInput" class="form-label">Disabled Input</label><input type="text" id="disabledEmailInput" class="form-control" placeholder="Email Id"></div><div class="mb-3"><label for="disabledPasswordInput" class="form-label">Disabled Input</label><select id="disabledPasswordInput" class="form-select"><option>Password</option></select></div><div class="mb-3"><div class="form-check"><input class="form-check-input" type="checkbox" id="disabledcheckbox" disabled><label class="form-check-label" for="disabledcheckbox">
    
              Disabled Check Box
            &lt;/label&gt;&lt;/div&gt;&lt;/div&gt;&lt;button type="submit" class="btn btn-primary"&gt;Disabled Button&lt;/button&gt;&lt;/fieldset&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Accessibility

    • Every form control has an appropriate accessible name for assistive technology users. Using label elements or descriptive text within <button>...</button>is the simplest method to achieve this.
    • When a visible "label" or appropriate text content is not provided then use other approaches for accessible names, for example:
      • Use the class .visually-hidden to hide the <label> elements.
      • Use aria-labelledby to pointing an existing element that behaves as a <label>.
      • Including a title attribute.
      • Use aria-label to set the element accessible name.
    • When none of these are available, for accessible name assistive technology use placeholder attribute as a fallback on <input> and <textarea> elements.
    • Using visually hidden content will help assistive technology users, however certain users may still have issues with a lack of visible label text.
  • Tooltips

    This chapter will discuss about adding custom Bootstrap tooltips. Tooltip is typically displayed as a small, floating box that appears when the user hovers over or clicks on a specific UI element, such as a button, icon, or hyperlink.

    Tooltips are used to provide context, explanations, or instructions for users who may need more information about the purpose or functionality of a UI element.

    Things to remember while using the tooltip plug-in:

    • As tooltips depend on Popper, a third party library, for positioning, you must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js, which contains Popper for tooltips to work.
    • You must initialize the tooltips first, as tooltips are opt-in for performance reasons.
    • A tooltip will never be shown for a zero-length title value.
    • Triggering tooltips will not work on hidden elements.
    • Tooltips for .disabled or disabled elements must be triggered using a wrapper element.
    • To avoid getting tooltips centered, use white-space: nowrap; on the <a> element.
    • Before removing any element from the DOM, you must hide the tooltips corresponding to them.
    • Inside a shadow DOM, tooltips can be triggered thanks to an element.

    Enable Tooltips

    Initialize all the tooltips on a page, by their data-bs-toggle attribute

      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    

    Creating a Tooltip

    Add the data-bs-toggle=”tooltip” attribute to an element, to create a tooltip.

    • The data-bs-toggle attribute defines the tooltip.
    • The title attribute defines the text to be displayed inside the tooltip.
    https://www.tutorialspoint.com/bootstrap/examples/bootstrap_tooltip_creation.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Tooltips</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>Bootstrap tooltip creation</h4><button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip" title="Tooltip description" data-content="Tooltip desc">View tooltip</button><script>
    
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl =&gt; new bootstrap.Tooltip(tooltipTriggerEl))
      &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Tooltips on Links

    Tooltips can be added to links as well using the attribute data-bs-toggle. Let's see an example:https://www.tutorialspoint.com/bootstrap/examples/bootstrap_tooltip_link.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Tooltip</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>Tooltip on link</h4><p class="muted">The  <a href="#" data-bs-toggle="tooltip" data-bs-title="Sample Tooltip">tooltip</a> is used for displaying some extra information about any content. This can be added to a <a href="#" data-bs-toggle="tooltip" data-bs-title="Second tooltip">link</a>.</p><script>
    
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl =&gt; new bootstrap.Tooltip(tooltipTriggerEl))
    &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Feel free to use either title or data-bs-title in your HTML. When title is used, Popper will replace it automatically with data-bs-title when the element is rendered.

    Custom tooltips

    Bootstrap provides a custom class data-bs-custom-class="custom tooltip" to customize the tooltip. Let's see an example:https://www.tutorialspoint.com/bootstrap/examples/bootstrap_custom_tooltip.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Tooltip</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>Custom Tooltip</h4><button type="button" class="btn btn-primary"
    
          data-bs-toggle="tooltip" data-bs-placement="right"
          data-bs-custom-class="custom-tooltip"
          data-bs-title="Tooltip is created as custom tooltip."&gt;
          Custom tooltip
    </button><script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl =&gt; new bootstrap.Tooltip(tooltipTriggerEl))
    &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Positioning of a Tooltip

    There are four options available for the positioning of the tooltip: left, right, top and bottom aligned.

    By default, the tooltip will appear on top of the element.

    The data-bs-placement attribute is used to set the position of the tooltip.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_tooltip_position.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Tooltip</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"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body class="p-3 m-0 border-0 bd-example tooltip-demo"><h4>Tooltip example - Position</h4><button type="button"   class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top"    data-bs-title="Top Tooltip">
    
    Top Tooltip
    &lt;/button&gt;&lt;button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right"  data-bs-title="Right Tooltip"&gt;
    Right Tooltip
    &lt;/button&gt;&lt;button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Bottom Tooltip"&gt;
    Bottom Tooltip
    &lt;/button&gt;&lt;button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left"   data-bs-title="Left Tooltip"&gt;
    Left Tooltip
    &lt;/button&gt;&lt;script&gt;
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl =&gt; new bootstrap.Tooltip(tooltipTriggerEl))
    &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Tooltip with custom HTML

    The example given below shows a tooltip with custom HTML added.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_tooltip_html.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Tooltips</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>Bootstrap tooltip creation with HTML</h4><button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
    
      Tooltip with HTML
    &lt;/button&gt;&lt;script&gt;
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl =&gt; new bootstrap.Tooltip(tooltipTriggerEl))
    &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Markup

    For a tooltip on any HTML element, the required markup for the tooltip is only a data attribute and title.

    The markup of a tooltip that is generated is simple and is set to top, be default.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_tooltip_markup.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Tooltips</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>Bootstrap tooltip markup</h4><!-- HTML to write --><a href="#" data-bs-toggle="tooltip" title="Markup for a tooltip!">Hover over me for markup</a><!-- Generated markup by the plugin --><div class="tooltip bs-tooltip-top" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner">
    
        Markup for a tooltip
    &lt;/div&gt;&lt;/div&gt;&lt;script&gt;
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl =&gt; new bootstrap.Tooltip(tooltipTriggerEl))
    &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Tooltip on disabled elements

    The users can not focus, hover or click on the elements with disabled attribute, to trigger a tooltip. Thus, in order to trigger a tooltip, use the wrapper <div> or <span>.

    Use tabindex="0" to make it keyboard-focusable.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_tooltip_disabled.php

    Example

    Here is an example of tooltip on disabled element:

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Tooltips</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>Tooltip on Disabled Element</h4><span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Tooltip Disabled"><button class="btn btn-secondary" type="button" disabled>Button Disabled</button></span><script>
    
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl =&gt; new bootstrap.Tooltip(tooltipTriggerEl))
    &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Options

    • An option name can be appended to the class data-bs- and that option can be passed as an attribute, such as data-bs-boundary="{value}".
    • When passing the options via data attributes, make sure to change the case type to "kebab-case" from "camelCase", such as use data-bs-fallback-placements="[array]" instead of data-bs-fallbackPlacements="[array]".
    https://www.tutorialspoint.com/bootstrap/examples/bootstrap_tooltip_options.php

    Example

    Here is an example of options added as an attribute to .data-bs- class:

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Tooltips - Options</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>Tooltip options</h4><button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip"  data-bs-title ="Title added through options and that overrides the title provided" title="Tooltip description" data-content="Tooltip desc">View tooltip</button><script>
    
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl =&gt; new bootstrap.Tooltip(tooltipTriggerEl))
    &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    The table given below shows the various options provided by Bootstrap, to be appended to the class .data-bs- as a data attribute.

    NameTypeDefaultDescription
    allowListobjectdefault valueObject that contains allowed attributes and tags.
    animationbooleantrueA CSS fade transition is applied to the tooltip.
    boundarystring, element'clippingParents'By default, its 'clippingParents' and can accept an HTML Element reference (via JavaScript only).
    containerstring, element, falsefalseAppends the tooltip to a specific element.
    customClassstring, function''These classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: 'class-1 class-2'.
    delaynumber, object0Delay showing and hiding the tooltip (ms). Object structure is: delay: { "show": 500, "hide": 100 }.
    fallbackPlacementsarray['top', 'right', 'bottom', 'left']Define fallback placements by providing a list of placements in array.
    htmlbooleanfalseAllow HTML in the tooltip.
    offsetarray, string, function[0, 0]Offset of the tooltip relative to its target. Ex: data-bs-offset="10,20".
    placementstring, function'top'Decides the position of the tooltip.
    popperConfignull, object, functionnullTo change Bootstraps default Popper config.
    sanitizebooleantrueEnable or disable the sanitization.
    sanitizeFnnull, functionnullYou can supply your own sanitize function.
    selectorstring, falsefalseWith a selector, tooltip objects will be delegated to the specified targets.
    templatestring''While creating a tooltip, use the base HTML.
    titlestring, element, function''It refers to the title of the tooltip.
    triggerstring'hover-focus'Shows how the tooltip is triggered: click, hover, focus, manual.
  • Toasts

    This chapter discusses about the component toasts. Toasts are like alert messages, that are lightweight and customizable. Toasts are a useful tool for providing responsive and unobtrusive notifications to the user.

    • Toasts in Bootstrap are used to display non-blocking notifications at the bottom or top of the screen.
    • They can provide feedback or alert the user to certain events or actions, without interrupting their current task.
    • Toasts can contain text, images, or any other HTML content, and can be customized to fit the design of the website or application.
    • They can also be dismissed by the user or have a set duration before disappearing on their own.
    • You must initialize the toasts yourself, as they are opt-in for performance reasons.
    • If you do not specify autohide: false, toasts will automatically hide.
    • The animation effect of the toast component is dependent on the prefers-reduced-motion media query.
    • A header and a body is recommended to be added to a toast to make it more extensible and predictable.
    • You require a single element to contain your toast and must have a dismiss button.

    Basic toast

    In order to create a basic toast, you need to use the .toast class and add a .toast-header to provide a heading and a .toast-body to add the content.

    Let us see an example of a basic toast:https://www.tutorialspoint.com/bootstrap/examples/toast_basic.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Example</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"><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"><h3>Toast Example</h3><p>A toast is like an alert box that is shown.</p><div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><small>A toast without an event</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
    
          Toast is shown without any event like on a click of a button.
        &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    In the past, the .hide class was added automatically to completely hide a toast with display:none instead of using opacity:0. Now, this is no longer needed.

    The following JavaScript query is used to trigger a toast:

        const toastTrigger = document.getElementById('liveToastBtn')
    
    const toastLiveExample = document.getElementById('liveToast')
    if (toastTrigger) {
      const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
      toastTrigger.addEventListener('click', () =&gt; {
        toastBootstrap.show()
      })
    }

    OR

        $(document).ready(function() {
    			$('#liveToast').click(function() {
    
    			$('.toast').toast({
    				animation: false,
    				delay: 3000
    			});
    			$('.toast').toast('show');
    }); });

    Add the following link in your html:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

    Live toast

    Following is an example of a live toast that can be viewed on your page:https://www.tutorialspoint.com/bootstrap/examples/toast_live.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Toasts</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><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script></head><body class="container mx-auto mt-2"><h4>View Live toast</h4><button type="button" class="btn btn-success" id="liveToast">View toast live</button><div class="toast-container position-fixed bottom-0 end-0 p-4"><div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><strong class="me-auto">Live Toast</strong><small>Now</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
    
            This is a live toast and placed at the bottom of the page.
        &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;script&gt;
    $(document).ready(function() { $('#liveToast').click(function() {
    			$('.toast').toast({
    				animation: false,
    				delay: 3000
    			});
    			$('.toast').toast('show');
    }); }); </script></body></html>

    Translucent toast

    Toasts are somewhat translucent and blend with the page on which they appear.

    Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/toast_translucent.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Toasts</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><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script></head><body class=" container mx-auto mt-2"><h4>Translucent toast</h4><button type="button" class="btn btn-success" id="viewToast">Click for toast</button><div class="toast-container position-top top-0"><div id="viewToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><strong class="me-auto">Translucent Toast</strong><small class="text-body-secondary">First toast</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
    
            This is a translucent toast and placed at the top of the page.
        &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;script&gt;
    $(document).ready(function() { $('#viewToast').click(function() {
    			$('.toast').toast({
    				animation: false,
    				delay: 3000
    			});
    			$('.toast').toast('show');
    }); }); </script></body></html>

    Stacking of toasts

    Toasts can be stacked in a toast container by wrapping them. Vertical space is added to the toasts when stacked.

    Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/toast_stack.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Toasts</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><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script></head><body class=" container mx-auto mt-2"><h4>Stacking of toasts</h4><button type="button" class="btn btn-success" id="viewToast">View stacked toasts</button><!-- First Toast --><div class="toast-container position-top top-0"><div id="viewToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><strong class="me-auto">Toast 1</strong><small class="text-body-secondary">First toast</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body text-bg-warning">
    
            This is toast 1 and is placed at the top of the page.
        &lt;/div&gt;&lt;/div&gt;&lt;!-- Second Toast --&gt;&lt;div id="viewToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true"&gt;&lt;div class="toast-header"&gt;&lt;strong class="me-auto"&gt;Toast 2&lt;/strong&gt;&lt;small class="text-body-secondary"&gt;Second toast&lt;/small&gt;&lt;button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="toast-body text-bg-info"&gt;
              This is toast 2 and is placed below toast 1.
          &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;script&gt;
    $(document).ready(function() { $('#viewToast').click(function() {
    			$('.toast').toast({
    				animation: false,
    				delay: 3000
    			});
    			$('.toast').toast('show');
    }); }); </script></body></html>

    Custom content

    • The toasts can be customized by removing the sub-components, adding some utilities or even for that matter, your own markup.
    • You can add a custom icon from Bootstrap icons or remove the .toast-header, add buttons to the content, etc.

    Let us see an example for the customization of a toast, where two buttons are added to the toast body:https://www.tutorialspoint.com/bootstrap/examples/toast_custom_content.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Toasts</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><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script></head><body class=" container mx-auto mt-2"><h4>Customization of toasts</h4><!-- Button to trigger the toasts --><button type="button" class="btn btn-primary" id="myBtn">View customized toast</button><div class="toast-container"><div class="toast"><div class="toast-header bg-secondary-subtle"><strong>Thanks</strong></div><div class="toast-body text-bg-secondary">Buttons are added to the toast.</div><button type="button" class="btn btn-success btn-sm">Submit</button><button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="toast" aria-label="Close">Cancel</button></div></div><script>
    
      $(document).ready(function() {
        $('#myBtn').click(function() {
          $('.toast').toast({
            animation: false,
            delay: 3000
          });
          $('.toast').toast('show');
        });
      });
    &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Color schemes

    Different toast color schemes can be created using the colors and background utilities.

    Let us see an example of adding the color scheme to a toast:https://www.tutorialspoint.com/bootstrap/examples/toast_color_scheme.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Toasts</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><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script></head><body class=" container mx-auto mt-2"><h4>Color scheme</h4><p>Color scheme added to the toast</p><!-- Button to trigger the toasts --><button type="button" class="btn btn-primary" id="myBtn">Click for toast</button><div class="toast-container"><div class="toast"><div class="toast-header bg-warning-subtle"><strong>Toast Header</strong></div><div class="toast-body text-bg-success">Color scheme is added to the header and body of the toast.</div></div></div><script>
    
      $(document).ready(function() {
        $('#myBtn').click(function() {
          $('.toast').toast({
            animation: false,
            delay: 3000
          });
          $('.toast').toast('show');
        });
      });
    &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Placement of toasts

    The toast placement feature is used to set the position of the toast on the webpage. Following are the options available for placement of toasts:

    • .position-absolute - It is used to position the element relative to its closest positioned ancestor.
    • .top-* - sets the position of the top alignment of the toast.
    • .bottom-* - sets the position of the bottom alignment of the toast.
    • .start-* - sets the position of the start alignment of the toast.
    • .end-* - sets the position of the end alignment of the toast.

    The values taken by the placement classes range from 0 to 50.

    Let us see an example of the placement classes:https://www.tutorialspoint.com/bootstrap/examples/toast_placement.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Toasts</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><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script></head><body class=" container mx-auto mt-2"><h4>Placement - Toasts</h4><p>Set the position of the toasts on webpage</p><!-- Button to trigger the toasts --><button type="button" class="btn btn-primary" id="myBtn">Click for toast</button><!--Top left --><div class="toast-container top-0 start-0"><div class="toast"><div class="toast-header"><strong class="me-auto">Toast 1</strong><small class="text-body-secondary">Toast top left </small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
    
                Position at Top left.
            &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;!--Top center--&gt;&lt;div class="toast-container top-0 start-50 translate-middle-x"&gt;&lt;div class="toast"&gt;&lt;div class="toast-header"&gt;&lt;strong class="me-auto"&gt;Toast 2&lt;/strong&gt;&lt;small class="text-body-secondary"&gt;Toast at top center&lt;/small&gt;&lt;button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="toast-body"&gt;
                Position at Top Center.
            &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;!--Top right --&gt;&lt;div class="toast-container top-0 end-0"&gt;&lt;div class="toast"&gt;&lt;div class="toast-header"&gt;&lt;strong class="me-auto"&gt;Toast 3&lt;/strong&gt;&lt;small class="text-body-secondary"&gt;Toast at top right&lt;/small&gt;&lt;button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="toast-body"&gt;
                Position at Top Right.
            &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;!--Middle left--&gt;&lt;div class="toast-container top-50 start-0 translate-middle-y"&gt;&lt;div class="toast"&gt;&lt;div class="toast-header"&gt;&lt;strong class="me-auto"&gt;Toast 4&lt;/strong&gt;&lt;small class="text-body-secondary"&gt;Toast at middle left&lt;/small&gt;&lt;button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="toast-body"&gt;
              Position at middle left.
          &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;!--Middle left--&gt;&lt;div class="toast-container top-50 start-50 translate-middle"&gt;&lt;div class="toast"&gt;&lt;div class="toast-header"&gt;&lt;strong class="me-auto"&gt;Toast 5&lt;/strong&gt;&lt;small class="text-body-secondary"&gt;Toast at middle center&lt;/small&gt;&lt;button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="toast-body"&gt;
              Position at middle center.
          &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;!--Middle right--&gt;&lt;div class="toast-container top-50 end-0 translate-middle-y"&gt;&lt;div class="toast"&gt;&lt;div class="toast-header"&gt;&lt;strong class="me-auto"&gt;Toast 6&lt;/strong&gt;&lt;small class="text-body-secondary"&gt;Toast at middle right&lt;/small&gt;&lt;button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="toast-body"&gt;
              Position at middle right.
          &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;!--Bottom left--&gt;&lt;div class="toast-container bottom-0 start-0"&gt;&lt;div class="toast"&gt;&lt;div class="toast-header"&gt;&lt;strong class="me-auto"&gt;Toast 7&lt;/strong&gt;&lt;small class="text-body-secondary"&gt;Toast at bottom left&lt;/small&gt;&lt;button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="toast-body"&gt;
              Position at bottom left.
          &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;!--Bottom center--&gt;&lt;div class="toast-container bottom-0 start-50 translate-middle-x"&gt;&lt;div class="toast"&gt;&lt;div class="toast-header"&gt;&lt;strong class="me-auto"&gt;Toast 8&lt;/strong&gt;&lt;small class="text-body-secondary"&gt;Toast at bottom center&lt;/small&gt;&lt;button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="toast-body"&gt;
              Position at bottom center.
          &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;!--Bottom right--&gt;&lt;div class="toast-container bottom-0 end-0"&gt;&lt;div class="toast"&gt;&lt;div class="toast-header"&gt;&lt;strong class="me-auto"&gt;Toast 9&lt;/strong&gt;&lt;small class="text-body-secondary"&gt;Toast at bottom right&lt;/small&gt;&lt;button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="toast-body"&gt;
              Position at bottom right.
          &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;script&gt;
      $(document).ready(function() {
        $('#myBtn').click(function() {
          $('.toast').toast({
            animation: false,
            delay: 3000
          });
          $('.toast').toast('show');
        });
      });
    &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    When working with systems that generate many notifications, one after the other, you can use a wrapping element to stack these notifications. Refer the example given below:https://www.tutorialspoint.com/bootstrap/examples/toast_wrapping.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Toasts</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><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script></head><body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-toasts p-0"><div aria-live="polite" aria-atomic="true" class="position-relative"><div class="toast-container top-0 start-0 p-3"><!-- Toasts within the container --><div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><strong class="me-auto">Toast 1</strong><small class="text-body-secondary">Toast on top</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
    
            Toast at the top of the container.
          &lt;/div&gt;&lt;/div&gt;&lt;div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"&gt;&lt;div class="toast-header"&gt;&lt;strong class="me-auto"&gt;Toast 2&lt;/strong&gt;&lt;small class="text-body-secondary"&gt;Second toast&lt;/small&gt;&lt;button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="toast-body"&gt;
            Second toast in the stack.
          &lt;/div&gt;&lt;/div&gt;&lt;div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"&gt;&lt;div class="toast-header"&gt;&lt;strong class="me-auto"&gt;Toast 3&lt;/strong&gt;&lt;small class="text-body-secondary"&gt;Third toast&lt;/small&gt;&lt;button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="toast-body"&gt;
            Another toast in the stack.
          &lt;/div&gt;&lt;/div&gt;&lt;div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"&gt;&lt;div class="toast-header"&gt;&lt;strong class="me-auto"&gt;Toast 4&lt;/strong&gt;&lt;small class="text-body-secondary"&gt;Last toast&lt;/small&gt;&lt;button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="toast-body"&gt;
            Fourth toast at the bottom of the stack.
          &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    In order to align toasts horizontally and/or vertically, use the flexbox utilties. Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/toast_with_flexbox.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Toasts</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><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script></head><body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-toasts d-flex"><!-- Adding a flexbox container for alignment of the toasts --><div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100"><!-- Then put toasts within the flexbox container--><div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header bg-danger-subtle"><strong class="me-auto">Toast within flexbox</strong><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
    
          This is a toast that is placed within a flexbox container and justified center.
        &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Accessibility

    In order to make the toasts accessible to the users with screen readers and / or similar assistive technologies, you should wrap the toasts in an aria-live region.

    • Changes to the live regions are automatically identified by the screen readers, without setting the user's focus.
    • Ensure that the complete toast is identified as a single (atomic) unit, by including aria-atomic="true".
    • When the information shown to the user is important, use the alert components rather than toasts.
    • The live region should be present in the markup before the toast is generated or updated.
    • Depending on the content, you need to adapt the role and aria-live attributes; such as:
      • In case of error, use:role="alert" aria-live="assertive"
      • Otherwise, use:role="status" aria-live="polite"
    • You must update the delay timeout in order to let the user read the toast, as the content being displayed changes dynamically.
    • A close button must be added to the toast, to allow users to close the toast, when using autohide: false.

    Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/toast_accessibility.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Toasts</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><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script></head><body class=" container mx-auto mt-2"><h4>Accessibility - Toasts</h4><p>Make the toasts accessible according to the value of role and aria-live</p><!-- Button to trigger the toasts --><button type="button" class="btn btn-primary" id="myBtn">Click for toast</button><div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false"><div class="toast"><div class="toast-header"><strong class="me-auto">Toast 1</strong><small class="text-body-secondary">First toast</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
    
                A toast that is like an alert.
            &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div role="status" aria-live="polite" aria-atomic="true" class="toast" data-bs-autohide="false"&gt;&lt;div class="toast"&gt;&lt;div class="toast-header"&gt;&lt;strong class="me-auto"&gt;Toast 2&lt;/strong&gt;&lt;small class="text-body-secondary"&gt;Second toast&lt;/small&gt;&lt;button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="toast-body"&gt;
              Toast where role=status and aria-live=polite.
          &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;script&gt;
      $(document).ready(function() {
        $('#myBtn').click(function() {
          $('.toast').toast({
            animation: false,
            delay: 3000
          });
          $('.toast').toast('show');
        });
      });
    &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • Spinners

    This chapter will discuss about Bootstrap spinners. Bootstrap spinner display the loading state of projects using .spinner class.

    How it works

    • Bootstrap spinners show the loading state of a project, using HTML and CSS. JavaScript is not required to build them.
    • Custom JavaScript is needed to toggle their visibility. Appearance, alignment, and sizing can be easily customized with Bootstrap’s utility classes.
    • Each loader has role=”status” and a nested <span class=”visually-hidden”>Loading… </span > for accessibility.

    Border spinner

    Use .spinner-border class to create lightweight spinner/loading indicator.https://www.tutorialspoint.com/bootstrap/examples/spinners_border_spinners.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</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><h3>Border Spinner</h3><div class="spinner-border mt-2" role="status"><span class="spinner-grow text-white spinner-grow-sm" role="status"></span><span class="visually-hidden"></span></div></body></html>

    Colors

    Border spinner uses currentColor for its border-color, which is customizable with text color utilities. Use text color utilities on a standard spinner.https://www.tutorialspoint.com/bootstrap/examples/spinners_color_spinners.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</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><h3>Colored Spinner</h3><div class="spinner-border text-primary" role="status"><span class="visually-hidden"></span></div><div class="spinner-border text-secondary" role="status"><span class="visually-hidden"></span></div><div class="spinner-border text-success" role="status"><span class="visually-hidden"></span></div><div class="spinner-border text-danger" role="status"><span class="visually-hidden"></span></div><div class="spinner-border text-warning" role="status"><span class="visually-hidden"></span></div><div class="spinner-border text-info" role="status"><span class="visually-hidden"></span></div><div class="spinner-border text-light" role="status"><span class="visually-hidden"></span></div><div class="spinner-border text-dark" role="status"><span class="visually-hidden"></span></div></body></html>

    Why not use border-color utilities? Border spinners have transparent border on one side, overridden by .border-{color} utilities.

    Growing spinner

    • You can change the spin type of spinner to the grow spinner. It technically doesn’t rotate, but it repeatedly grows.
    • Use .spinner-grow class to create grow spinner.
    https://www.tutorialspoint.com/bootstrap/examples/spinners_growing_spinners.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</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><h3>Growing Spinner</h3><div class="spinner-grow" role="status"><span class="visually-hidden"></span></div></body></html>

    This spinner uses currentColor to change its appearance with text color utilities.https://www.tutorialspoint.com/bootstrap/examples/spinners_growing_colors_spinners.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</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><h3>Growing color Spinners</h3><div class="spinner-grow text-primary" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow text-secondary" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow text-info" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow text-dark" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow text-warning" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow text-success" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow text-light" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow text-danger" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow" role="status"><span class="visually-hidden"></span></div></body></html>

    Alignment

    Bootstrap spinners are designed with rems, currentColor, and display: inline-flex. They are easily resizable, recolorable, and alignable.

    Margin

    For simple spacing, use margin utilities like .m-4.https://www.tutorialspoint.com/bootstrap/examples/spinners_margin_spinners.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</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><h3>Margin</h3><div class="spinner-border m-4" role="status"><span class="visually-hidden"></span></div></body></html>

    Placement

    Bootstrap spinners can be placed using flexbox utilities, float utilities, or text alignment utilities.

    Flex

    Use flexbox placement classes to set the position of spinners.https://www.tutorialspoint.com/bootstrap/examples/spinners_flex_palcement.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</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><h5 class="text-center">Flex placement at start, center, end</h5><div class="d-flex justify-content-start"><div class="spinner-border" role="status"><span class="visually-hidden"></span></div></div><div class="d-flex justify-content-center"><div class="spinner-border" role="status"><span class="visually-hidden"></span></div></div><div class="d-flex justify-content-end"><div class="spinner-border" role="status"><span class="visually-hidden"></span></div></div></body></html>

    You can change spinner alignment using flexbox placement.https://www.tutorialspoint.com/bootstrap/examples/spinners_flex.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</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="d-flex align-items-end mt-2"><h5 class="text-center">Flex placement</h5><div class="spinner-border ms-auto" role="status" aria-hidden="true"></div></div></body></html>

    Float

    Use float placement classees to set the position of spinners.https://www.tutorialspoint.com/bootstrap/examples/spinners_float_placement.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</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><h5>Float placement at start and end</h5><div class="clearfix float-start mt-2"><div class="spinner-border" role="status"><span class="visually-hidden"></span></div></div><div class="clearfix float-end"><div class="spinner-border" role="status"><span class="visually-hidden"></span></div></div></body></html>

    Text align

    Use .text-align placement classes to set the position of spinners items.https://www.tutorialspoint.com/bootstrap/examples/spinners_text_align.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</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><h5 class="text-center">Text Align at start, center, end</h5><div class="text-start"><div class="spinner-border" role="status"><span class="visually-hidden"></span></div></div><div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden"></span></div></div><div class="text-end"><div class="spinner-border" role="status"><span class="visually-hidden"></span></div></div></body></html>

    Size

    Spinner size can be used to create spinners of various sizes.

    • For small-size spinners, use .spinner-border-sm and .spinner-grow-sm classes.
    • For medium-size spinners, use .spinner-border-md and .spinner-grow-md classes.
    https://www.tutorialspoint.com/bootstrap/examples/spinners_sizes.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</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><h5 class="mt-2">Small Size Spinner</h5><div class="spinner-border spinner-border-sm text" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow spinner-grow-sm" role="status"><span class="visually-hidden"></span></div><h5 class="mt-2">Medium Size Spinner</h5><div class="spinner-border spinner-border-md" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow spinner-grow-md" role="status"><span class="visually-hidden"></span></div></body></html>

    To modify the dimensions as required, use custom CSS or inline styles.https://www.tutorialspoint.com/bootstrap/examples/spinners_using_custom_sizes.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</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><h5 class="mt-2">Spinner using custom CSS</h5><div class="spinner-border" style="width: 2rem; height: 2rem;" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow" style="width: 2rem; height: 2rem;" role="status"><span class="visually-hidden"></span></div></body></html>

    Buttons

    • Button spinners are used to show an action that is currently processing. Replace spinner element text with button text if required.
    • Use .btn and .spinner-border class to create spinner button.
    https://www.tutorialspoint.com/bootstrap/examples/spinners_buttons.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</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><h5 class="mt-2">Spinner Buttons</h5><button class="btn btn-primary" type="button" disabled><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden"></span></button><button class="btn btn-secondary" type="button" disabled><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    
        Wait...
      &lt;/button&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Use .btn and .spinner-grow class to create growing spinner buttons.https://www.tutorialspoint.com/bootstrap/examples/spinners_grow_buttons.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</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><h5 class="mt-2">Growing Spinner Buttons</h5><button class="btn btn-primary" type="button" disabled><span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span><span class="visually-hidden">Wait...</span></button><button class="btn btn-secondary" type="button" disabled><span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
    
       Wait...
      &lt;/button&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • Scrollspy

    This chapter will discuss about Bootstrap scrollspy. Bootstrap scrollspy automatically targets the navigation bar contents as you scroll the page.

    How it work

    When the element with the id referred by the anchor’s href is scrolled into view, scrollspy works with nav, list group, and also works with any anchor element in the current page. Here’s how it’s works.

    • In order to utilize scrollspy, you should have two thing i.e a navigation, list group or a simple set of links, along with scrollable container such as the <body> or a custom element with a specific height and overflow-y: scroll.
    • To the scrollspy container, add attributes data-bs-spy=”scroll” and data-bs-target=”#navId”, where “navId” refers the unique id of the corresponding navigation. If the container does not have any focusable element, include tabindex=”0″ to guarantee keyboard accessibility.
    • When you scroll within the “spied” container, anchor links in the navigation will have an .active class added or removed. If the id targets of links cannot be resolved, they will be ignored. For example, a <a href=”#home”>home</a> should have a corresponding <div id=”home”></div>.
    • In the non-visible elements section, only visible elements will be considered and targeted.

    Navbar

    Scroll below the navbar area to see active class change. Open the dropdown and see highlighted items.https://www.tutorialspoint.com/bootstrap/examples/scrollspy_navbar.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Scrollspy</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 id="navbarFirstExample" class="navbar bg-body-tertiary px-3 mb-3"><a class="navbar-brand" href="#">Tutorialspoints</a><ul class="nav nav-pills"><li class="nav-item"><a class="nav-link" href="#scrollspyFirstTitle">Home</a></li><li class="nav-item"><a class="nav-link" href="#scrollspySecondTitle">Services</a></li><li class="nav-item"><a class="nav-link" href="#scrollspyThirdTitle">About us</a></li><li class="nav-item"><a class="nav-link" href="#scrollspyFourthTitle">Contact us</a></li><li class="nav-item"><a class="nav-link" href="#scrollspyFifthTitle">Features</a></li></ul></nav><div data-bs-spy="scroll" data-bs-target="#navbarFirstExample" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0"><h4 id="scrollspyFirstTitle">Home</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p><h4 id="scrollspySecondTitle">Services</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="scrollspyThirdTitle">About us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p><h4 id="scrollspyFourthTitle">Contact us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="scrollspyFifthTitle">Features</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p></div></body></html>

    Nested nav

    Scrollspy supports nested .navs and makes their parents .active when they are .active. See active class changes while scrolling the navbar.https://www.tutorialspoint.com/bootstrap/examples/scrollspy_nested_navbar.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Scrollspy</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="row mt-2"><div class="col-4"><nav id="nestatedNavbar" class="h-100 flex-column align-items-stretch pe-4 border-end"><nav class="nav nav-pills flex-column"><a class="nav-link" href="#home">Home</a><nav class="nav nav-pills flex-column"><a class="nav-link ms-3 my-1" href="#login">Log in</a><a class="nav-link ms-3 my-1" href="#logout">Log out</a></nav><a class="nav-link" href="#aboutus">About us</a><a class="nav-link" href="#contactus">Contact Us</a></nav></nav></div><div class="col-8"><div data-bs-spy="scroll" data-bs-target="#nestatedNavbar" data-bs-smooth-scroll="true" class="bg-body-tertiary p-3 rounded-2 my-2" tabindex="0"><div id="home"><h4>Home</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p></div><div id="login"><h5>Log In</h5><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group</p></div><div id="logout"><h5>Log out</h5><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p></div><div id="aboutus"><h4>About us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group</p></div><div id="contactus"><h4>Contact us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p></div></div></div></div></body></html>

    List group

    Scrollspy supports .list-groups. See the active class change as you scroll near the list group.https://www.tutorialspoint.com/bootstrap/examples/scrollspy_list_group.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Scrollspy</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="row mt-2"><div class="col-4"><div id="navbarList" class="list-group my-2"><a class="list-group-item list-group-item-action" href="#home">Home</a><a class="list-group-item list-group-item-action" href="#services">Services</a><a class="list-group-item list-group-item-action" href="#aboutus">About us</a><a class="list-group-item list-group-item-action" href="#contactus">Contact us</a><a class="list-group-item list-group-item-action" href="#features">Features</a></div></div><div class="col-8"><div data-bs-spy="scroll" data-bs-target="#navbarList" data-bs-smooth-scroll="true" class="bg-body-tertiary p-3 rounded-2 my-2" tabindex="0"><h4 id="home">Home</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area.</p><h4 id="services">Services</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="aboutus">About us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area.</p><h4 id="contactus">Contact us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="features">Features</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. </p></div></div></div></div></body></html>

    Simple anchors

    Scrollspy works on all <a> anchor elements, not restricted to nav elements and list groups.https://www.tutorialspoint.com/bootstrap/examples/scrollspy_simple_anchor.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Scrollspy</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="row"><div class="col-4"><div id="listUsingAnchor" class="text-center"><nav class="nav nav-pills flex-column mx-3"><a class="nav-link active" href="#home">Home</a><a class="nav-link" href="#services">Services</a><a class="nav-link" href="#aboutus">About us</a><a class="nav-link" href="#contactus">Contact us</a><a class="nav-link" href="#features">Features</a></nav></div></div><div class="col-8"><div data-bs-spy="scroll" data-bs-target="#listUsingAnchor" data-bs-offset="0" data-bs-smooth-scroll="true" class="bg-body-tertiary p-3 rounded-2 my-2" tabindex="0"><h4 id="home">Home</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p><h4 id="services">Services</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="aboutus">About us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="contactus">Contact us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p><h4 id="features">Features</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p></div></div></div></body></html>

    Non-visible elements

    Non-visible elements will be disregarded, and their corresponding nav items will not be assigned the .active class. Scrollspy instances that are initialized within an non-visible wrapper ignores all target elements. Use refresh method in case the wrapper becomes visible. This helps check for observable elements .

    Example

      document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
    
    el.addEventListener('shown.bs.tab', () =&gt; {
      const target = el.getAttribute('data-bs-target')
      const scrollElem = document.querySelector(${target} [data-bs-spy="scroll"])
      bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
    })
    })

    Usage

    Via data attributes

    Add data-bs-spy=”scroll” to the element to spy on (usually the <body>) to quickly add scroll spy behavior to topbar navigation. Then, specifying the id or class name of the parent element of any Bootstrap .nav component using the “data-bs-target” attribute.https://www.tutorialspoint.com/bootstrap/examples/scrollspy_via_data_attribute.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Scrollspy</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 data-bs-spy="scroll" data-bs-target="#navbarDataAttribute"><div id="navbarDataAttribute" class="my-2"><ul class="nav nav-pills" role="pillslist"><li class="nav-item"><a class="nav-link" href="#scrollspyFirstTitle">Home</a></li><li class="nav-item"><a class="nav-link" href="#scrollspySecondTitle">Services</a></li><li class="nav-item"><a class="nav-link" href="#scrollspyThirdTitle">About us</a></li><li class="nav-item"><a class="nav-link" href="#scrollspyFourthTitle">Contact us</a></li><li class="nav-item"><a class="nav-link" href="#scrollspyFifthTitle">Features</a></li></ul><div data-bs-spy="scroll" data-bs-target="#navbarDataAttribute" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="bg-body-tertiary p-3 rounded-2 my-2" tabindex="0"><h4 id="scrollspyFirstTitle">Home</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p><h4 id="scrollspySecondTitle">Services</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="scrollspyThirdTitle">About us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="scrollspyFourthTitle">Contact us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p><h4 id="scrollspyFifthTitle">Features</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p></div></div></body></html>

    Via JavaScript

    • To enable scrollspy behavior on your topbar navigation, add data-bs-spy=”scroll” to the desired element (usually the <body> tag).
    • Inside the <script> tag apply scroll spy to a component using the identifier or class like “navbarJavaScript”.
    https://www.tutorialspoint.com/bootstrap/examples/scrollspy_via_javascript.php

    Example

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

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Scrollspy</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 data-bs-spy="scroll" data-bs-target="#navbarJavaScript"><div id="navbarJavaScript"><ul class="nav nav-pills" role="pillslist"><li class="nav-item"><a class="nav-link" href="#scrollspyFirstTitle">Home</a></li><li class="nav-item"><a class="nav-link" href="#scrollspySecondTitle">Services</a></li><li class="nav-item"><a class="nav-link" href="#scrollspyThirdTitle">About us</a></li><li class="nav-item"><a class="nav-link" href="#scrollspyFourthTitle">Contact us</a></li><li class="nav-item"><a class="nav-link" href="#scrollspyFifthTitle">Features</a></li></ul><div data-bs-spy="scroll" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0"><h4 id="scrollspyFirstTitle">Home</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="scrollspySecondTitle">Services</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="scrollspyThirdTitle">About us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="scrollspyFourthTitle">Contact us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p><h4 id="scrollspyFifthTitle">Features</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p></div></div><script>
    
        const scrollSpy = new bootstrap.ScrollSpy(document.body, {
          target: '#navbarJavaScript'
        })
      &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Otpions

    Options can be provided through data attributes or JavaScript

    • To add an option name to data-bs-, as in data-bs-animation={value}," use either data attributes or JavaScript. If using data attributes, use "kebab-case" instead of "camelCase" for the option name. For example, use data-bs-custom-class="beautifier" instead of data-bs-custom-class="beautifier".
    • Bootstrap 5.2.0 has added a new feature called data-bs-config attribute to store basic component configurations as a JSON string. If an element has both data-bs-config and separate data attributes, the separate data attributes' values take precedence over those in data-bs-config. Even, existing data attributes can also store JSON values.
    • Data-bs-configdata-bs-, and js objects are combined to create the final configuration object, where the most recent key-value overrides all others.

    CSS Properties

    The table describes the properties and their corresponding values for a ScrollSpy plugin.

    NameTypeDefaultDescription
    rootMarginstring0px 0px -25%Intersection Observer rootMargin valid units, when calculating scroll position.
    smoothScrollbooleanfalseEnables smooth scrolling when a user clicks on a link that refers to ScrollSpy observables.
    targetstring, DOM elementnullSpecifies element to apply Scrollspy plugin.
    thresholdarray[0.1, 0.5, 1]IntersectionObserverthreshold valid input, when calculating scroll position.