Bootstrap – Vertical align ”; Previous Next This chapter discusses about the vertical alignment utilities provided by Bootstrap. You can change the vertical alignment of inline, inline-block, inline-table, and table cell elements. Choose from following classes as per your need: .align-baseline .align-top .align-middle .align-bottom .align-text-bottom .align-text-top In order to align the non-inline content, use flex box utilities Let us see an example to align the inline elements: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Vertical align</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </head> <body> <div class=”container mt-3″> <h4 class=”display-5″>Vertical align</h4> <p>Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table and table cell elements):</p><br><br> <button class=”btn align-baseline text-bg-success”>align baseline</button> <button class=”btn align-top text-bg-success”>align top</button> <button class=”btn align-middle text-bg-success”>align middle</button> <button class=”btn align-bottom text-bg-success”>align bottom</button> <button class=”btn align-text-top text-bg-success”>align text top</button> <button class=”btn align-text-bottom text-bg-success”>align text bottom </button> </div> </body> </html> Let us see an example to align the table cell elements: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Vertical align</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </head> <body> <div class=”container mt-3″> <h4 class=”display-5″>Vertical Align – Table cell elements</h4> <p>Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table and table cell elements):</p><br><br> <table class=”table-bordered bg-light” style=”height: 100px;”> <tbody> <tr> <td class=”p-2 align-baseline”>align baseline</td> <td class=”p-2 align-top”>align top</td> <td class=”p-2 align-middle”>align middle</td> <td class=”p-2 align-bottom”>align bottom</td> <td class=”p-2 align-text-top”>align-text-top</td> <td class=”p-2 align-text-bottom”>align-text-bottom</td> </tr> </tbody> </table> </div> </body> </html> Print Page Previous Next Advertisements ”;
Category: bootstrap
Bootstrap – Buttons
Bootstrap – Buttons ”; Previous Next This chapter will discuss about Bootstrap Buttons.You can use Bootstrap’s custom button styles for actions in forms, dialogs and many more. This support for multiple sizes, states,…etc. Bootstrap includes the class .btn that sets basic styles such as padding and content alignment. Base button Add .btn class that implements basic styles such as padding and content alignment. The .btn class provides a transparent border, a background color, and no explicit focus and hover styles. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> <title>Bootstrap – Buttons</title> </head> <body> <button type=”button” class=”btn btn-primary”>Base Button </button> </body> </html> Variants Bootstrap includes different styles of buttons, each serving its own semantic purpose, with some extras thrown in for further control. To achieve the button styles, Bootstrap provides following classes: .btn .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link Example You can edit and try running this code using Edit & Run option. <DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” ></script> <title>Bootstrap – Buttons</title> </head> <body> <button type=”button” class=”btn btn-primary”>Primary</button> <button type=”button” class=”btn btn-secondary”>Secondary</button> <button type=”button” class=”btn btn-success”>Success</button> <button type=”button” class=”btn btn-danger”>Danger</button> <button type=”button” class=”btn btn-warning”>Warning</button> <button type=”button” class=”btn btn-info”>Info</button> <button type=”button” class=”btn btn-light”>Light</button> <button type=”button” class=”btn btn-dark”>Dark</button> <button type=”button” class=”btn btn-link”>Link</button> </body> </html> Disabled text wrapping To disable the text wrapping on a button text, add .text-nowrap class to the button. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> <title>Bootstrap – Buttons</title> </head> <body> <button type=”button” class=”btn btn-primary text-nowrap”>this button”s text has disabled text wrapping. Here we see the test in a single line</button><br><br><br> <button type=”button” class=”btn btn-primary”>this button”s text does not have text wrapping enabled. Here we see the text being wrapped to next line</button> </body> </html> Button tags The .btn classes can be used on <a> and <input> elements. When you are using button classes on <a> elements that used to trigger in-page functionality instead of linking to new pages or sections within the current page these links have element role=”button” to appropriately convey their purpose to assistive technologies such as screen readers. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> <title>Bootstrap – Buttons</title> </head> <body> <a href=”#”role=”button” class=”btn btn-info”>Download Link</a> <button type=”button” class=”btn btn-primary”>Button</button> <input type=”submit” class=”btn btn-secondary” value=”Submit”> <input type=”button” class=”btn btn-danger” value=”Login”> <input type=”reset” class=”btn btn-light” value=”Reset”> </body> </html> Outline button To get the button without heavy background colors, use .btn-outline-* class which allows you to remove all background images and colors from any button. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> <title>Bootstrap – Buttons</title> </head> <body> <button type=”button” class=”btn btn-outline-primary”>Primary Button</button> <button type=”submit” class=”btn btn-outline-secondary”>Secondary Button</button> <button type=”button” class=”btn btn-outline-warning”>Warning Button</button> <button type=”button” class=”btn btn-outline-success”>Sucess Button</button> <button type=”button” class=”btn btn-outline-light”>Light Button</button> <button type=”button” class=”btn btn-outline-danger”>Danger Button</button> <button type=”button” class=”btn btn-outline-dark”>Dark Button</button> <button type=”button” class=”btn btn-outline-info”>Info Button</button> <button type=”button” class=”btn btn-outline-link”>Link</button> </button> </body> </html> Button sizes To get any larger or smaller buttons add the classes .btn-lg, .btn-sm to the .btn. You can create your own custom size button by using CSS variables. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> <title>Bootstrap – Buttons</title> </head> <body> <button type=”button” class=”btn btn-primary btn-lg”>Large button</button> <button type=”button” class=”btn btn-info btn-sm”>Small Button</button> <button type=”button” class=”btn btn-warning” style=”–bs-btn-padding-y: .24rem; –bs-btn-padding-x: .8rem; –bs-btn-font-size: .75rem;”> Custom Button </button> </body> </html> Disabled state Bootstrap provides class .disabled. This feature disables from hovering and active states of click event. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> <title>Bootstrap – Buttons</title> </head> <body> <button type=”button” class=”btn btn-primary disabled”>Primary Disabled Button</button> <button type=”button” class=”btn btn-secondary” disabled>Secondary Disabled Button</button> <button type=”button” class=”btn btn-outline-primary” disabled>Outline Primary Disabled button</button> <button type=”button” class=”btn btn-outline-secondary” disabled>Outline Secondary Disabled Button</button> </button> </body> </html> Disabled buttons using the <a> element that has slightly different behavior: The element <a> doesn”t support the disabled attribute. You have to add the .disabled class to make it visually seem disabled. To disable all pointer-events on anchor buttons, some future-friendly styles are included. To show the state of the element to assistive technologies in disabled buttons using <a> should contain aria-disabled=”true” attribute. The href attribute should not be included within disabled buttons using <a>. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> <title>Bootstrap – Buttons</title> </head> <body> <a class=”btn btn-primary disabled” role=”button” aria-disabled=”true”>Primary Disabled</a>
Bootstrap – Checks & radios
Bootstrap – Checkbox and Radios ”; Previous Next 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. 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 </label> </div> <div class=”form-check”> <input class=”form-check-input” type=”checkbox” value=”” id=”flexCheckChecked” checked> <label class=”form-check-label” for=”flexCheckChecked”> item 2 </label> </div> </body> </html> 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 </label> </div> <script> 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. 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 </label> </div> <div class=”form-check”> <input class=”form-check-input” type=”checkbox” value=”” id=”disabledCheckedCheckbox” checked disabled> <label class=”form-check-label” for=”disabledCheckedCheckbox”> item 2 </label> </div> <div class=”form-check”> <input class=”form-check-input” type=”checkbox” value=”” id=”disabledCheckbox” disabled> <label class=”form-check-label” for=”disabledCheckbox”> item 3 </label> </div> </body> <script> var x = document.getElementById(“disabledIndeterminateCheckbox”).indeterminate = true; </script> </html> Radios Radio button limits the number of choices to only one in a list. 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 </label> </div> <div class=”form-check”> <input class=”form-check-input” type=”radio” name=”flexRadioDefault” id=”defaultCheckRadio” checked> <label class=”form-check-label” for=”defaultCheckRadio”> Item 2 </label> </div> </body> </html> Disabled Radio Button To indicate disabled state use disabled attribute and the associated <label>”s are styled with a lighter color. 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 </label> </div> <div class=”form-check”> <input class=”form-check-input” type=”radio” name=”flexRadioDisabled” id=”disabledCheckedRadio” checked disabled> <label class=”form-check-label” for=”disabledCheckedRadio”> Item 2 </label> </div> </body> </html> 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. 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. 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 </label> </div> <div class=”form-check”> <input class=”form-check-input” type=”radio” name=”Radios” id=”disabledStackedRadio” value=”option3″ disabled> <label class=”form-check-label” for=”disabledStackedRadio”> Hindi </label> </div> <div class=”form-check”> <input class=”form-check-input” type=”checkbox” value=”” id=”defaultCheckbox”> <label class=”form-check-label” for=”defaultCheckbox”> Marathi </div> <div class=”form-check”> <input class=”form-check-input” type=”checkbox” value=”” id=”disabledCheckbox” disabled> <label class=”form-check-label” for=”disabledCheckbox”> Japanes </label> </div> </body> </html> Inline To put checkboxes and radios next to each other, use the class .form-check-inline with any .form-check. 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>
Bootstrap – Tooltips
Bootstrap – Tooltips ”; Previous Next 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. 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 => new bootstrap.Tooltip(tooltipTriggerEl)) </script> </body> </html> Tooltips on Links Tooltips can be added to links as well using the attribute data-bs-toggle. Let”s see an example: 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 => new bootstrap.Tooltip(tooltipTriggerEl)) </script> </body> </html> 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: 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.”> Custom tooltip </button> <script> const tooltipTriggerList = document.querySelectorAll(”[data-bs-toggle=”tooltip”]”) const tooltipList = […tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) </script> </body> </html> 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. 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 </button> <button type=”button” class=”btn btn-secondary” data-bs-toggle=”tooltip” data-bs-placement=”right” data-bs-title=”Right Tooltip”> Right Tooltip </button> <button type=”button” class=”btn btn-secondary” data-bs-toggle=”tooltip” data-bs-placement=”bottom” data-bs-title=”Bottom Tooltip”> Bottom Tooltip </button> <button type=”button” class=”btn btn-secondary” data-bs-toggle=”tooltip” data-bs-placement=”left” data-bs-title=”Left Tooltip”> Left Tooltip </button> <script> const tooltipTriggerList = document.querySelectorAll(”[data-bs-toggle=”tooltip”]”) const tooltipList = […tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) </script> </body> </html> Tooltip with custom HTML The example given below shows a tooltip with custom HTML added. 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 </button> <script> const tooltipTriggerList = document.querySelectorAll(”[data-bs-toggle=”tooltip”]”) const tooltipList = […tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) </script> </body> </html> 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. 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 </div> </div> <script> const tooltipTriggerList = document.querySelectorAll(”[data-bs-toggle=”tooltip”]”) const
Bootstrap – Progress
Bootstrap – Progress Bars ”; Previous Next This chapter discusses about Bootstrap progress bars. Progress bars in Bootstrap are UI components that display the progress or completion status of a task or process. They are typically used to visually indicate the progress of an operation, such as file uploads, form submissions, or loading of data. Bootstrap provides a set of in-built classes to create progress bars with different styles, sizes and animations. Bootstrap also provides additional classes and options for customizing the appearance and behavior of progress bars, such as setting different colors, adding labels, using striped or animated progress bars, and stacking multiple progress bars together. Use the .progress as a wrapper to show the max value of the progress bar. Use the inner .progress-bar to show the progress so far. The .progress-bar requires an inline style, utility class, or custom CSS to set their width. The .progress-bar also requires some role and aria attributes to make it accessible. The .progress-stacked can be used to create multiple/stacked progress bars. Basic Progress Bar Here”s an example of a basic Bootstrap progress bar: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Progress</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>Progress Bar</h4><br> <div class=”progress”> <div class=”progress-bar” role=”progressbar” style=”width: 15%” aria-valuenow=”0″ aria-valuemin=”0″ aria-valuemax=”100″></div> </div><br> <div class=”progress”> <div class=”progress-bar” role=”progressbar” style=”width: 25%” aria-valuenow=”25″ aria-valuemin=”0″ aria-valuemax=”100″></div> </div><br> <div class=”progress”> <div class=”progress-bar” role=”progressbar” style=”width: 50%” aria-valuenow=”50″ aria-valuemin=”0″ aria-valuemax=”100″></div> </div><br> <div class=”progress”> <div class=”progress-bar” role=”progressbar” style=”width: 75%” aria-valuenow=”75″ aria-valuemin=”0″ aria-valuemax=”100″></div> </div><br> <div class=”progress”> <div class=”progress-bar” role=”progressbar” style=”width: 100%” aria-valuenow=”100″ aria-valuemin=”0″ aria-valuemax=”100″></div> </div> </body> </html> Bar Sizing Width Bootstrap provides a complete list of utilities for setting width. Let us see an example: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Progress</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>Progress Bar</h4><br><br> <div class=”progress”> <div class=”progress-bar w-25″ role=”progressbar” aria-valuenow=”75″ aria-valuemin=”0″ aria-valuemax=”100″></div> </div> </body> </html> Height By default the height of a progress bar is 1rem, but it can be changed using the CSS height property. You must set the same height for the progress container and the progress bar. Height value can be set only on the .progress, so once the value of height is changed in the .progress container, the inner .progress-bar automatically resizes. Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Progress</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>Progress Bar Height</h4><br> <div class=”progress” style=”height: 20px;”> <div class=”progress-bar” role=”progressbar” style=”width: 25%;height: 20px;” aria-valuenow=”25″ aria-valuemin=”0″ aria-valuemax=”100″></div> </div> <br> <div class=”progress” style=”height: 30px;”> <div class=”progress-bar” role=”progressbar” style=”width: 25%;height: 30px;” aria-valuenow=”25″ aria-valuemin=”0″ aria-valuemax=”100″></div> </div> </body> </html> Labels Labels can be added to the progress bars by placing text within the .progress-bar. Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Progress</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>Progress Bar Label</h4><br> <div class=”progress”> <div class=”progress-bar” role=”progressbar” style=”width: 50%;” aria-valuenow=”50″ aria-valuemin=”0″ aria-valuemax=”100″>50%</div> </div> </body> </html> Label Overflow Visible/Hidden In order to avoid the content getting bleed out of the bar, the content inside the .progress-bar is controlled with overflow: hidden Use overflow: visible from overflow utilities to make the content capped and become readable. This is useful when the progress bar is shorter than the label. Define an explicit text color to make the text readable. Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Progress</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>Progress Bar Long Label</h4><br> <div class=”progress” role=”progressbar” aria-label=”Example of label” aria-valuenow=”10″ aria-valuemin=”0″ aria-valuemax=”100″> <div class=”progress-bar overflow-visible text-dark” style=”width: 20%”>Overflow visible on progress bar, but the label is too long, but the label is too long,but the label is too long,but the label is too long,but the label is too long,but the label is too long,but the label is too long</div> </div> <br> <div class=”progress” role=”progressbar” aria-label=”Example of label” aria-valuenow=”10″ aria-valuemin=”0″ aria-valuemax=”100″> <div class=”progress-bar overflow-hidden text-dark” style=”width: 20%”>Overflow hidden on progress bar, but the label is too long, but the label is too long,but the label is too long,;/div> </div> </body> </html> Background The appearance of individual progress bar can be changed using the background utility classes. The progress bar is blue by default (primary). Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Progress</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>Progress Bar Background</h4><br> <!– Blue –> <div class=”progress”> <div class=”progress-bar” style=”width:10%”></div> </div><br> <!– Green –> <div class=”progress”> <div class=”progress-bar bg-success” style=”width:20%”></div> </div><br> <!– Turquoise –> <div class=”progress”> <div class=”progress-bar bg-info” style=”width:30%”></div> </div><br> <!– Orange –> <div class=”progress”> <div class=”progress-bar bg-warning” style=”width:40%”></div> </div><br> <!– Red –> <div class=”progress”> <div class=”progress-bar bg-danger” style=”width:50%”></div> </div><br> <!– White –> <div class=”progress border”> <div class=”progress-bar bg-white” style=”width:60%”></div> </div><br> <!– Grey –> <div class=”progress”> <div class=”progress-bar bg-secondary” style=”width:70%”></div> </div><br> <!– Light Grey –> <div class=”progress border”> <div class=”progress-bar bg-light” style=”width:80%”></div> </div><br> <!–
Bootstrap – Navs & tabs
Bootstrap – Navs and Tabs ”; Previous Next This chapter will discuss about Bootstrap navs and tabs. Create navigation menu using .nav class and tab navigation menu using .tab class. Base nav All types of Bootstrap”s navigation components are built with base class .nav (component build with flexbox). The nav components can be used to add a list of links to browse to other pages within the website. The items can be added within the .nav-item class. To add links within the item class use .nav-link class. There is no .active state in the .nav component. The class is used in the following examples, to show that this class does not have unique styling. To convey active links to assistive technologies like screen readers use an aria-current attribute with value as a page for the current page or true if the current item is set. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Navs and Tabs</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> <ul class=”nav bg-warning mt-2″> <li class=”nav-item”> <a class=”nav-link active” aria-current=”page” href=”#”>Tutorialspoint</a> </li> <li class=”nav-item”> <a class=”nav-link” href=”#”>Home</a> </li> <li class=”nav-item”> <a class=”nav-link disabled”>Services</a> </li> <li class=”nav-item”> <a class=”nav-link” href=”#”>About us</a> </li> </ul> </body> </html> When item order is important, use <ul>s, <ol>, or create your own with <nav>. The nav links behave similar to the nav items because the .nav uses display: flex without extra markup. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Navs and Tabs</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 class=”nav bg-light mt-2″> <a class=”nav-link active” aria-current=”page” href=”#”>Tutorialspoints</a> <a class=”nav-link” href=”#”>Home</a> <a class=”nav-link disabled”>Services</a> <a class=”nav-link” href=”#”>About us</a> </nav> </body> </html> Available styles Use modifiers and utilities to change the styles of the .navs component as seen the following sections: Horizontal alignment Use flexbox utilities to modify the horizontal alignment of navigation. Navs are left-aligned by default. Navs can be easily centered or right-aligned. For center-alignment, use the CSS class .justify-content-center. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Navs and Tabs</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> <ul class=”nav justify-content-center bg-warning mt-2″> <li class=”nav-item”> <a class=”nav-link active” aria-current=”page” href=”#”>Tutorialspoints</a> </li> <li class=”nav-item”> <a class=”nav-link” href=”#”>Home</a> </li> <li class=”nav-item”> <a class=”nav-link disabled”>Services</a> </li> <li class=”nav-item”> <a class=”nav-link” href=”#”>About us</a> </li> </ul> </body> </html> To achieve right-alignment, use the CSS class .justify-content-end. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Navs and Tabs</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> <ul class=”nav justify-content-end bg-light mt-2″> <li class=”nav-item”> <a class=”nav-link active” aria-current=”page” href=”#”>Tutorialspoints</a> </li> <li class=”nav-item”> <a class=”nav-link” href=”#”>Home</a> </li> <li class=”nav-item”> <a class=”nav-link disabled”>Services</a> </li> <li class=”nav-item”> <a class=”nav-link” href=”#”>About us</a> </li> </ul> </body> </html> Vertical Use the .flex-column utility, that changes the flex item direction, in order to stack the navigation items. Use responsive versions to stack them on various viewports (e.g., .flex-sm-column). Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Navs and Tabs</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> <ul class=”nav flex-column bg-light mt-2″> <li class=”nav-item”> <a class=”nav-link active” aria-current=”page” href=”#”>Tutorialspoints</a> </li> <li class=”nav-item”> <a class=”nav-link” href=”#”>Home</a> </li> <li class=”nav-item”> <a class=”nav-link disabled”>Services</a> </li> <li class=”nav-item”> <a class=”nav-link” href=”#”>About us</a> </li> </ul> </body> </html> Even without using <ul>s, vertical navigation is possible. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Navs and Tabs</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 class=”nav flex-column bg-light mt-2″> <a class=”nav-link active” aria-current=”page” href=”#”>Tutorialspoints</a> <a class=”nav-link” href=”#”>Home</a> <a class=”nav-link disabled”>Services</a> <a class=”nav-link” href=”#”>About us</a> </nav> </body> </html> Tabs Add the .nav-tabs class to .nav to create a tab navigation menu. Use them to create tabbable regions using tab JavaScript plugin. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Navs and Tabs</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> <ul class=”nav nav-tabs mt-2″> <li class=”nav-item”> <a class=”nav-link active bg-light” aria-current=”page” href=”#”>Tutorialspoints</a> </li> <li class=”nav-item”> <a class=”nav-link” href=”#”>Home</a> </li> <li class=”nav-item”> <a class=”nav-link disabled”>Services</a> </li> <li class=”nav-item”> <a class=”nav-link” href=”#”>About us</a> </li> </ul> </body> </html> Pills Create a navigation pills menu by replacing .nav-tab to .nav-pills within .nav class. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Navs and Tabs</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> <ul class=”nav nav-pills”> <li class=”nav-item”> <a class=”nav-link active” aria-current=”page” href=”#”>Tutorialspoints</a> </li> <li class=”nav-item”> <a class=”nav-link ” href=”#”>Home</a> </li> <li class=”nav-item”> <a class=”nav-link disabled”>Services</a> </li> <li class=”nav-item”> <a class=”nav-link” href=”#”>About us</a> </li> </ul> </body> </html> Underline Create an underlined navigation
Bootstrap – Overview
Bootstrap – Overview ”; Previous Next Bootstrap Bootstrap is a popular open-source front-end framework that is used to create responsive and mobile-first websites and web applications. It provides a collection of CSS and JavaScript components, such as grids, forms, buttons, navigation bars, and more, which can be easily implemented and customized to create responsive and visually appealing web interfaces. With Bootstrap, developers can save time and effort by utilizing pre-designed components, as well as the grid system for creating responsive layouts. It also provides numerous styling options and utilities to enhance the overall appearance and functionality of websites. Bootstrap is widely used by web developers to streamline the web development process and create consistent and visually appealing user interfaces. History of Bootstrap Mark Otto and Jacob Thornton developed the Bootstrap, at Twitter. In August 2011, Bootstrap was released as an open source product, on GitHub. Key points in Bootstrap 5 and later versions There are several new features and changes in Bootstrap 5 compared to Bootstrap 4. Some of the notable ones include: Smaller file size: Bootstrap 5.* is designed to be more lightweight, with the removal of jQuery and other dependencies. It has switched to Vanilla JavaScript. This leads to faster load times. Improved grid system: The grid system in Bootstrap 5.* comes with a new, more flexible layout. It introduces a new gap utility and no longer relies on floats. Updated default colors and theming: Bootstrap 5.* introduces a new default color palette and theme. The new colors are more modern and visually appealing. Improved form controls: The form controls in Bootstrap 5.* have been enhanced with new styles and options. There are new styles for checkboxes and radio buttons, as well as improved custom select menus. New helpers and utilities: Bootstrap 5.* introduces new utility classes and helpers, such as vertical centering, stretched link utility, and more. Improved documentation and accessibility: The documentation for Bootstrap 5 has been updated and improved, making it easier to use and understand. Additionally, Bootstrap 5 focuses more on accessibility, with better ARIA support and improved keyboard navigation. Bootstrap – advantages There are several benefits of using Bootstrap: Responsive design: Bootstrap is built with a mobile-first approach, meaning it is designed to be responsive and adapt to different screen sizes. This ensures that your mobile application looks good and functions well on various devices, including smartphones and tablets. Time-saving: Bootstrap provides a wide range of predefined and customizable CSS and JavaScript components, such as grids, buttons, navigation bars, and modals. These ready-to-use components help developers save time and effort by eliminating the need to code everything from scratch. Consistent appearance: With Bootstrap, you can achieve a consistent and professional-looking design across your mobile application. It offers a set of predefined styles and themes that can be easily customized to match your brand”s identity. Cross-browser compatibility: Bootstrap is designed to work well across different web browsers, ensuring that your mobile application functions consistently for users, regardless of the browser they prefer to use. Community and support: Bootstrap has a large and active community of developers who contribute to its improvement and provide support through forums and online resources. This can be helpful if you encounter any challenges or have questions during the development of your mobile application. Accessibility: Bootstrap follows modern web development standards and best practices, including accessibility guidelines. This ensures that your mobile application is accessible to users with disabilities, enhancing its usability and reach. Continuous updates and enhancements: Bootstrap is regularly updated and improved with new features, bug fixes, and performance enhancements. By using Bootstrap, you can take advantage of these updates to keep your mobile application up-to-date and optimized. Bootstrap – important globals Let”s examine how Bootstrap utilizes a limited number of crucial global styles and settings that are primarily focused on normalizing cross-browser styles. HTML5 doctype HTML5 doctype is crucial to be used, without which the styling will be incomplete and inappropriate. For LTR direction: <!DOCTYPE html> <html lang=”en”> … </html> For RTL direction: <!DOCTYPE html> <html lang=”ar” dir=”rtl”> … </html> Viewport meta Bootstrap follows a “mobile-first” development approach, where the code is initially optimized for mobile devices, and then components are scaled up as needed through CSS media queries. To ensure accurate rendering and touch zooming on all devices, it”s essential to include the responsive viewport meta tag in the <head> section of your webpage. <meta name=”viewport” content=”width=device-width, initial-scale=1″> Box-sizing The global box-sizing value is switched from content-box to border-box, for extensive sizing in CSS. It ensures that the final width of an element is not affected by the padding. The following code will let all the nested elements, including the ones with generated content via ::before and ::after, inherit the specified box-sizing for that .selector-for-some-widget: .selector-for-some-widget { box-sizing: content-box; } Reboot In order to correct the inconsistencies across various browsers and devices, use reboot. This will improve the cross-browser rendering. Use of CDN CDN, Content Delivery Network, is a network of servers that speeds up the loading of webpages for data-heavy applications. How to use Bootstrap CDN? Follow the steps given below: Build a basic HTML file – Use your preferred code editor to create the file Convert the file to a Bootstrap template – Include the Bootstrap CSS CDN and Bootstrap JS CDN files, along with Popper and Bootstrap jQuery through their CDN links Save and view the file – Save the file with extension .html and as a template. Print Page Previous Next
Bootstrap – Home
Bootstrap Tutorial PDF Version Quick Guide Resources Job Search Discussion Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap 5 Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap Layout, Bootstrap Content, Bootstrap Components, Bootstrap Forms, Bootstrap Grids, Bootstrap Helpers, Bootstrap Utilities and Bootstrap Examples. Each of these sections contain related topics with simple and useful examples. Why to Learn Bootstrap? Responsive design: Bootstrap is built with a mobile-first approach, meaning it is designed to be responsive and adapt to different screen sizes. This ensures that your mobile application looks good and functions well on various devices, including smartphones and tablets. Time-saving: Bootstrap provides a wide range of predefined and customizable CSS and JavaScript components, such as grids, buttons, navigation bars, and modals. These ready-to-use components help developers save time and effort by eliminating the need to code everything from scratch. Consistent appearance: With Bootstrap, you can achieve a consistent and professional-looking design across your mobile application. It offers a set of predefined styles and themes that can be easily customized to match your brand”s identity. Cross-browser compatibility: Bootstrap is designed to work well across different web browsers, ensuring that your mobile application functions consistently for users, regardless of the browser they prefer to use. Community and support: Bootstrap has a large and active community of developers who contribute to its improvement and provide support through forums and online resources. This can be helpful if you encounter any challenges or have questions during the development of your mobile application. Accessibility: Bootstrap follows modern web development standards and best practices, including accessibility guidelines. This ensures that your mobile application is accessible to users with disabilities, enhancing its usability and reach. Continuous updates and enhancements: Bootstrap is regularly updated and improved with new features, bug fixes, and performance enhancements. By using Bootstrap, you can take advantage of these updates to keep your mobile application up-to-date and optimized. First program using Bootstrap. Just to give you a little excitement about Bootstrap, I”m going to give you a small Bootstrap Program. You can edit and try running this code using Edit & Run option. <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <title>Bootstrap demo</title> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM” crossorigin=”anonymous”> </head> <body> <h1>Welcome to Tutorialspoint!</h1> <script src=”https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js” integrity=”sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r” crossorigin=”anonymous”></script> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz” crossorigin=”anonymous”></script> </body> </html> Audience This tutorial has been prepared for anyone who has a basic knowledge of HTML and CSS and has an urge to develop websites. After completing this tutorial you will find yourself at a moderate level of expertise in developing web projects using Twitter Bootstrap. Prerequisites Before you start proceeding with this tutorial, we are assuming that you are already aware about the basics of HTML and CSS. If you are not well aware of these concepts then we will suggest you to go through our short tutorials on HTML and CSS. Print Page Previous Next Advertisements ”;
Bootstrap – CSS Grid
Bootstrap – CSS Grid ”; Previous Next This chapter will discuss about Bootstrap CSS grid. Bootstrap”s default grid system, developed over a decade, has been widely used and proven effective. It was created without modern CSS features and techniques like the new CSS Grid we see in current browsers. How it works Bootstrap 5 introduces the ability to use a CSS Grid-based grid system with additional Bootstrap features for creating responsive layouts using different methods. Recompile your Sass after disabling the default grid system by setting $enable-grid-classes to false and enabling CSS Grid with $enable-cssgrid set to true. Replace instance of .row with .grid. The class .grid creates a grid-template by setting display: grid. Instead of using .col-* classes, use .g-col-* classes because CSS Grid columns use the grid-column property instead of width. Customize the column and gutter sizes of the parent .grid using CSS variables –bs-columns and –bs-gap. Key differences Let us see differences of CSS grid system when compared to the standard grid system as below: The impact of Flex utilities on CSS Grid columns is different. Instead of using gutters, use gap that act like margins and replace the horizontal padding in grid system. Grid gaps are automatically applied horizontally and vertically in. unlike .rows, .grids do not have negative margins and cannot use margin utilities to adjust the gutters. Refer to the customizing section. Modifier classes should be replaced with inline and custom styles (e.g., style=”–bs-columns: 3;” vs class=”row-cols-3″). Nesting requires resetting column counts for each nested .grid instance. Three columns Use .g-col-4 to create three equal-width columns for all devices. Modify the layout based on viewport size using responsive classes based on viewport size. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – CSS Grid</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> <h2 class=”text-center”>Three Columns</h2> <div class=”container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid”> <div class=”row”> <div class=”grid text-center”> <div class=”g-col-4 bg-info p-2″>First Column</div> <div class=”g-col-4 bg-light p-2″>Second Column</div> <div class=”g-col-4 bg-warning p-2″>Third Column</div> </div> </div> </div> </body> </html> Responsive To adjust your layout for different screen sizes, use responsive classes. For example, start with two columns on smaller screens and then expand to three columns on larger screens. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – CSS Grid</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> <h2 class=”text-center”>Responsive</h2> <div class=”container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid”> <div class=”row”> <div class=”grid text-center”> <div class=”g-col-6 g-col-md-4 bg-info”>First Column</div> <div class=”g-col-6 g-col-md-4 bg-light”>Second Column</div> <div class=”g-col-6 g-col-md-4 bg-warning”>Third Column</div> </div> </div> </div> </body> </html> Compare the two-column layout across at all screen sizes. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – CSS Grid</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> <h2 class=”text-center”>Two Column Layout</h2> <div class=”container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid”> <div class=”row”> <div class=”grid text-center”> <div class=”g-col-6 bg-info”>First Column</div> <div class=”g-col-6 bg-warning”>Second Column</div> </div> </div> </div> </body> </html> Wrapping Grid items wrap to the next line when there”s no more horizontal space, with gaps applying to both horizontal and vertical spacing. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – CSS Grid</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> <h2 class=”text-center”>Wrapping</h2> <div class=”container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid”> <div class=”row”> <div class=”grid text-center”> <div class=”g-col-6 bg-info”>First Column</div> <div class=”g-col-6 bg-warning”>Second Column</div> <div class=”g-col-6 bg-info”>Third Column</div> <div class=”g-col-6 bg-warning”>Fourth Column</div> </div> </div> </div> </body> </html> Starts Start classes are a shorthand version of CSS Grid”s grid-column-start and grid-column-end properties, used to create grid templates by specifying column starting and ending points. They are used in combination with column classes for column sizing and alignment, starting from 1 as 0 is not a valid value for these properties. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – CSS Grid</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> <h2 class=”text-center”>Starts</h2> <div class=”container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid”> <div class=”row”> <div class=”grid text-center”> <div class=”g-col-3 g-start-2 bg-info”>First Column</div> <div class=”g-col-4 g-start-6 bg-warning”>Second Column</div> </div> </div> </div> </div> </body> </html> Auto columns Without any classes on grid items, they will automatically be sized to one column within a .grid. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – CSS Grid</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> <h2 class=”text-center”>Auto Column</h2> <div class=”container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid”> <div class=”row”> <div class=”grid text-center”> <div class=”bg-info”>First</div> <div class=”bg-warning”>Second</div> <div class=”bg-info”>Third</div> <div class=”bg-warning”>Four</div> <div class=”bg-info”>Five</div> <div class=”bg-warning”>Six</div> <div class=”bg-info”>Seven</div> <div class=”bg-warning”>Eight</div> <div class=”bg-info”>Nine</div> <div class=”bg-warning”>Ten</div> </div> </div> </div> </body> </html> Grid column classes can be combined with this behaviour. Example You can edit and try running this code using Edit
Bootstrap – Environment Setup ”; Previous Next It is very easy to setup and start using Bootstrap. This chapter will explain how to download and setup Bootstrap 5.3. We will also discuss the Bootstrap file structure, and demonstrate its usage with an example. There are two ways to do the environment Setup in Bootstrap 5.3. Compiled CSS and JS Source Files Following sections will discuss about these two steps. Compiled CSS and JS You can download ready to use compiled code of Bootstrap v5.3.0 here Once downloaded, unzip the compressed folder and we see the following folder structure: bootstrap/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-grid.rtl.css │ ├── bootstrap-grid.rtl.css.map │ ├── bootstrap-grid.rtl.min.css │ ├── bootstrap-grid.rtl.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap-reboot.rtl.css │ ├── bootstrap-reboot.rtl.css.map │ ├── bootstrap-reboot.rtl.min.css │ ├── bootstrap-reboot.rtl.min.css.map │ ├── bootstrap-utilities.css │ ├── bootstrap-utilities.css.map │ ├── bootstrap-utilities.min.css │ ├── bootstrap-utilities.min.css.map │ ├── bootstrap-utilities.rtl.css │ ├── bootstrap-utilities.rtl.css.map │ ├── bootstrap-utilities.rtl.min.css │ ├── bootstrap-utilities.rtl.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap.rtl.css │ ├── bootstrap.rtl.css.map │ ├── bootstrap.rtl.min.css │ └── bootstrap.rtl.min.css.map └── js/ ├── bootstrap.bundle.js ├── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.esm.js ├── bootstrap.esm.js.map ├── bootstrap.esm.min.js ├── bootstrap.esm.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap.min.js └── bootstrap.min.js.map This compressed folder contains: Compiled and minified CSS bundles: Bundles of compiled and minified CSS (view a comparison of CSS files) Compiled and minified JavaScript plugins: JavaScript plugins that have been minified and compiled (view a JS files comparison) Documentation, source code, and any extra JavaScript dependencies like Popper are not included. Source files You can download Bootstrap source files by clicking on the download link on official site here, or you can also use the GitHub link to start downloading . You will get the Bootstrap v5.3.0 after this download. Download Sass, JavaScript, and documentation files to customize Bootstrap using your asset pipeline. Extra tools are needed for this option. For converting Sass source files into CSS files, use the Saas compiler. Autoprefixer for CSS vendor prefixing CDN via jsDelivr CDN (Content Delivery Network) is a free content delivery platform offered by Bootstrap. Predefined files of CSS and JS can be used without installing them in your local system using the Bootstrap CDN. You can use available Bootstrap codes by copying the link and adding them to your project. The only condition to use the CDN is to have internet connectivity in your local system. Developers can access the complete CSS for Bootstrap CDN via jsDelivr by copying the below link:. <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM” crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz” crossorigin=”anonymous”></script> It is advised to add Popper before JS, preferably via CDN: <script src=”https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js” integrity=”sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r” crossorigin=”anonymous”></script> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js” integrity=”sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS” crossorigin=”anonymous”></script> Package managers We can also install Bootstrap into the local system using Package Manager. Let”s see the commands to install Bootstrap. Package Manager Description Commands to install npm Install Bootstrap in your Node.js powered apps with the npm package: $ npm install [email protected] yarn Install Bootstrap in your Node.js powered apps with the yarn package: $ yarn add [email protected] RubyGems Install Bootstrap in your Ruby apps using Bundler (recommended) and RubyGems by adding the following line to your Gemfile: gem ”bootstrap”, ”~> 5.3.0”OR$ gem install bootstrap -v 5.3.0 Composer You can also install and manage Bootstrap’s Sass and JavaScript using Composer: $ composer require twbs/bootstrap:5.3.0 NuGet If you develop in .NET Framework, you can also install and manage Bootstrap’s CSS or Sass and JavaScript using NuGet. Step1: PM> Install-Package bootstrapStep2: PM> Install-Package bootstrap.sass HTML Template A basic HTML template using Bootstrap 5.3 would look like this − You can edit and try running this code using Edit & Run option. <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <title>Bootstrap demo</title> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM” crossorigin=”anonymous”> </head> <body> <h1>Welcome to Tutorialspoint!</h1> <script src=”https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js” integrity=”sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r” crossorigin=”anonymous”></script> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz” crossorigin=”anonymous”></script> </body> </html> Here you can see the popper.min.js, bootstrap.bundle.min.js and bootstrap.min.css files that are included to make a normal HTM file to the Bootstrapped Template. In all the subsequent chapters we have used dummy text from the site https://www.lipsum.com/. Print Page Previous Next Advertisements ”;