Category: bootstrap

Aug 10

Bootstrap – Borders

Bootstrap – Borders ”; Previous Next This chapter discusses about the borders that can be applied to elements. Utilize border utilities to promptly apply styling to an element”s border and border-radius, making it suitable for images, buttons, or any other element. Borders can be either added or removed from an element. Bootstrap provides a range of border styles that can be chosen all at a time or one by one. Add a border Borders can be added to a custom element. Let us see an example: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Borders</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> <style> span { display: inline-block; width: 100px; height: 100px; margin: 10px; background-color: #f1f1f1 } </style> </head> <body> <div class=”container mt-3″> <h4>Borders</h4> <p>Use the border classes to add borders to an element:</p><br> <span class=”border border-2″></span> <span class=”border-top border-2″></span> <span class=”border-end border-2″></span> <span class=”border-bottom border-2″></span> <span class=”border-start border-2″></span> </div> </body> </html> Remove a border Borders can be removed from a custom element. Let us see an example: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Borders</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> <style> span { display: inline-block; width: 100px; height: 100px; margin: 10px; background-color: #f1f1f1; } </style> </head> <body> <div class=”container mt-3″> <h4>Borders</h4> <p>Use the border classes to remove borders from an element:</p><br> <span class=”border border-2″></span> <span class=”border border-0 border-2″></span> <span class=”border border-top-0 border-2″></span> <span class=”border border-end-0 border-2″></span> <span class=”border border-bottom-0 border-2″></span> <span class=”border border-start-0 border-2″></span> </div> </body> </html> Border colors The border utilities, such as .border-* generated from the original $theme-colors Sass map, currently do not adapt to color modes. However, any .border-*-subtle utility will respond accordingly. This issue will be addressed in version 6. The border color can be modified using the utilities built on theme colors. Let us see an example: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Borders</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> <style> span { display: inline-block; width: 100px; height: 100px; margin: 10px; background-color: #faf8f8; } </style> </head> <body> <div class=”container mt-3″> <h4>Borders color</h4><br> <p>Use the .border-* classes to add colors to the borders:</p><br> <span class=”border border-success”></span> <span class=”border border-success-subtle”></span> <span class=”border border-danger”></span> <span class=”border border-danger-subtle”></span> <span class=”border border-light”></span> <span class=”border border-light-subtle”></span> <span class=”border border-secondary”></span> <span class=”border border-secondary-subtle”></span> <span class=”border border-primary”></span> <span class=”border border-primary-subtle”></span> <span class=”border border-black”></span> <span class=”border border-white”></span> <span class=”border border-info”></span> <span class=”border border-info-subtle”></span> <span class=”border border-warning”></span> <span class=”border border-warning-subtle”></span> <span class=”border border-dark”></span> <span class=”border border-dark-subtle”></span> </div> </body> </html> The default border of an element can also be modified using the .border-* classes. Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Borders</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>Border colors of elements</h4><br> <p>Use the .border-* classes to add colors to the borders of different elements:</p><br> <div class=”h4 pb-4 mb-2 text-center text-success border border-success”> Border for success </div> <div class=”p-2 bg-warning bg-opacity-25 border border-warning border-start-0″> Adding color to a warning text, with warning border. </div><br> <button class=”btn btn-light text-dark border”>Click</button> </div> </body> </html> Border opacity In order to change the opacity of the border, you need to override the –bs-border-opacity through the custom styles or inline styles. Let us see an example: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Borders</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>Border opacity of borders</h4><br> <p>Use the .border-* classes to change the opacity of the borders of different elements:</p><br> <div class=”border border-primary p-2 mb-2″>Primary border default</div> <div class=”border border-danger p-2 mb-2 border-opacity-75″>75% opacity of danger border</div> <div class=”border border-warning p-2 mb-2 border-opacity-50″>50% opacity of warning border</div> <div class=”border border-success p-2 mb-2 border-opacity-25″>25% opacity of success border</div> <div class=”border border-secondary p-2 border-opacity-10″>10% opacity of secondary border</div> </body> </html> Border width In order to change the width of the border of an element, use the classes such as .border-1, .border-2, .border-3, .border-4 and .border-5 Let us see an example: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Borders</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> <style> span { display: inline-block; width: 100px; height: 100px; margin: 10px; background-color: #f9f6f6; } </style> </head> <body> <div class=”container mt-3″> <h4>Borders – width</h4><br> <p>Set the border width with .border-* classes:</p><br> <span class=”border border-5″></span> <span class=”border border-4″></span> <span class=”border border-3″></span> <span class=”border border-2″></span> <span class=”border border-1″></span> </div> </body> </html> Border radius In order to add rounded corners to any element, use the .rounded-* classes. Let us see an example: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Borders</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> <style> span { display: inline-block; width: 100px; height: 100px; margin: 10px; background-color: #440d0d; } </style> </head> <body> <div class=”container mt-3″> <h4>Borders – Radius</h4> <p>Set the radius of the border with .rounded-* classes:</p><br> <span class=”rounded”></span> <span class=”rounded-top”></span> <span class=”rounded-bottom”></span> <span class=”rounded-start”></span> <span

Aug 10

Bootstrap – Focus Ring

Bootstrap – Focus ring ”; Previous Next This chapter discusses about adding and modifying custom focus ring styles to various elements and components. In Bootstrap 5, the focus ring is a visual indicator that appears around an element when it receives focus. The focus ring is a circular outline that appears around the element, typically in a contrasting color, to indicate that the element is currently active and ready to receive input from the user. Bootstrap 5 provides a built-in focus ring that is applied to interactive elements such as buttons, links, and form controls by default. The default outline on :focus is removed by the helper class .focus-ring, thus replacing it with a box-shadow. Let”s see an example showing the usage of .focus-ring: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Helper</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-fluid flex-grow-1″> <h4>Focus ring</h4> <a href=”#” class=”d-inline-flex focus-ring py-1 px-2 text-bg-light border rounded-2″> Example focus ring </a> <button class=”button focus-ring py-1 px-2 text-bg-light border rounded-2″>Click Me</button> </div> </body> </html> Customize focus ring Focus ring can be customized using the CSS variables, Sass variables, utilities, or custom styles. CSS variables In order to change the default appearance of a focus ring, modify the CSS variables –bs-focus-ring-* Let”s see an example of customizing the CSS variables –bs-focus-ring-*: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Helper</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-fluid flex-grow-1″> <h4>Focus ring – Customize CSS variable</h4> <a href=”#” class=”d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2″ style=”–bs-focus-ring-color: rgba(var(–bs-danger-rgb), .25)”> Red focus ring </a> <div> </body> </html> Let”s see an example of customizing the CSS variables –bs-focus-ring-* in order to make the focus ring blurry: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Helper</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-fluid flex-grow-1″> <h4>Focus ring – Customize CSS variable</h4> <a href=”#” class=”d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2″ style=”–bs-focus-ring-x: 20px; –bs-focus-ring-y: 20px; –bs-focus-ring-blur: 6px”> Blur focus ring </a> </div> </body> </html> Utilities Bootstrap provides several utilities .focus-ring-* to modify the default settings. For example, modify the color of the focus ring with any of the theme colors. Let”s see an example of customizing the utility .focus-ring-*: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Helper</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-fluid flex-grow-1″> <h4>Focus ring – Customize utilities</h4> <p><a href=”#” class=”d-inline-flex focus-ring focus-ring-success py-1 px-2″>Success focus ring</a></p> <p><a href=”#” class=”d-inline-flex focus-ring focus-ring-info py-1 px-2″>Info focus ring</a></p> <p><a href=”#” class=”d-inline-flex focus-ring focus-ring-warning py-1 px-2″>Warning focus ring</a></p> <p><a href=”#” class=”d-inline-flex focus-ring focus-ring-danger py-1 px-2″>Danger focus ring</a></p> <p><a href=”#” class=”d-inline-flex focus-ring focus-ring-secondary py-1 px-2″>Secondary focus ring</a></p> <p><a href=”#” class=”d-inline-flex focus-ring focus-ring-primary py-1 px-2″>Primary focus ring</a></p> <p><a href=”#” class=”d-inline-flex focus-ring focus-ring-dark py-1 px-2″>Dark focus ring</a></p> <p><a href=”#” class=”d-inline-flex focus-ring focus-ring-light py-1 px-2″>Light focus ring</a></p> </div> </body> </html> Print Page Previous Next Advertisements ”;

Aug 10

Bootstrap-Sticky footer Demo

Bootstrap – Sticky Footer Demo ”; Previous Next What is a sticky footer? A sticky footer sticks to the bottom of the page, regardless of the page”s content length or viewport height. It ensures that the footer remains visible at the bottom of the browser window. The footer itself contains some text and copyright information. The provided link shows an example of sticky footer: Example Description Download link Sticky footer This example shows a web page with a sticky footer at the bottom of the viewport. Download Print Page Previous Next Advertisements ”;

Aug 10

Bootstrap – Sidebars Demo

Bootstrap – Sidebar Demo ”; Previous Next What is a sidebar? A sidebar is a vertical column placed alongside the main content area and used to display navigation information. Bootstrap sidebar represents a custom sidebar component built using Bootstrap”s classes and utilities. In Bootstrap, a sidebar is often created using a combination of the grid system, flexbox, and CSS classes such as .col and .d-flex. Some of the examples of the headers are as follows. Example Description Download link Dark sidebar menu structure This example shows a dark sidebar menu contains different sections and dropdown menu for user account Download Light sidebar menu structure This example shows a light sidebar with links to different sections and dropdown menu for user account. Download Sidebar with icons This example shows the sidebar menu which is represented by using icons. Download Collapsible sidebar This example shows a sidebar menu contains a list of links that collapsed to show or hide their respective submenus. Download sidebar with list Group This example shows sidebar menu represents a list group. Download Print Page Previous Next Advertisements ”;

Aug 10

Bootstrap – Dropdowns Demo

Bootstrap – Dropdown Demo ”; Previous Next What is a dropdown? The dropdown menu is a UI component that allows users to select an option from a list of choices. Dropdowns are commonly used for navigation, forms, and other interactive elements on a website. Bootstrap provides built-in CSS classes, that can be used to create a dropdown menu: .dropdown-menu – This class is usually defined in CSS to style the appearance and behavior of the dropdown menu. .dropdown-item – This class might be used to control the appearance of each item within the dropdown list. Some of the examples of the dropdown menu are as follows. Example Description Download link Basic dropdown This example demonstrates a basic dropdown menu with various menu items. Download Dropdown with searchbar This example demonstrates a dropdown menu including a search bar and various clickable items Download Dropdown with icons This example demonstrates a dropdown menu with associated icons and a title. Download Dropdown calendar This example demonstrates a basic calendar UI with the ability to navigate between months. Download Dropdown with links This example demonstrates a dropdown menu with icons and links. Download Print Page Previous Next Advertisements ”;

Aug 10

Bootstrap – Text

Bootstrap – Text ”; Previous Next This chapter will discuss about common Bootstrap text utilities. You can customize text alignment, weight, line height, wrapping, font size, and other formatting options using Bootstrap utility classes. Text alignment Text alignment classes provide convenient ways to align text to different components. These classes include responsive options that align the text to the start, end, or center positions, using the same viewport width breakpoints as the grid system. Note: Kindly resize the browser to see the alignment of text relative to the specific viewport. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Text</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </head> <body> <p class=”text-start text-info”>Text aligned at starting position across all viewports sizes.</p> <p class=”text-center text-danger”>Text aligned at center position across all viewports sizes.</p> <p class=”text-end text-warning”>Text aligned at end position across all viewports sizes.</p> <p class=”text-sm-start text-primary”>Text aligned at start on viewports sized SM (small) or wider.</p> <p class=”text-md-start text-primary”>Text aligned at start on viewports sized MD (medium) or wider.</p> <p class=”text-lg-start text-primary”>Text aligned at start on viewports sized LG (large) or wider.</p> <p class=”text-xl-start text-primary”>Text aligned at start on viewports sized XL (extra-large) or wider.</p> </body> </html> Bootstrap does not provide utility classes for justified text, which means that while justified text may appear more visually appealing, it can make word spacing more random and consequently more difficult to read. Text wrapping and overflow To achieve text wrapping, apply the .text-wrap class to the text. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Text</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=”badge bg-warning text-wrap” style=”width: 8rem;”> This sentence should be wrapped. </div> </body> </html> You can stop text from wrapping by using the .text-nowrap class. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Text</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=”text-nowrap bg-body-secondary border” style=”width: 8rem;”> This sentence should overflow the parent. </div> </body> </html> Word break To avoid breaking your components layout with long strings of text, use .text-break to apply word-wrap: break-word and word-break: break-word. To enhance browser compatibility, use word-wrap instead of overflow-wrap. Additionally, include the deprecated word-break: break-word to prevent problems with flex containers. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Text</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </head> <body> <p class=”text-break text-primary”>TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</p> </body> </html> Word breaking is not possible in Arabic, this is the most commonly used RTL language. The .text-break feature has been eliminated from our RTL compiled CSS Text transform Text capitalization classes can be used to convert text case in components. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Text</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </head> <body> <p class=”text-lowercase text-danger”>This is a lower case text.</p> <p class=”text-uppercase text-info”> This is a upper case text.</p> <p class=”text-capitalize text-warning”>This is a capitalized text.</p> </body> </html> Note how does the .text-capitalize class modifies the initial letter of every word, without changing the case of other letters. Font size You can easily modify the font-size of text. Unlike heading classes (such as .h1–.h6) that include font-weight and line-height, these utilities focus only on font-size. The size of these utilities matches HTML”s heading elements, with a decrease in size as the number increases. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Text</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </head> <body> <p class=”fs-1 text-info”>This is a text of .fs-1 font size.</p> <p class=”fs-2 text-info”>This is a text of .fs-2 font size.</p> <p class=”fs-3 text-info”>This is a text of .fs-3 font size.</p> <p class=”fs-4 text-info”>This is a text of .fs-4 font size.</p> <p class=”fs-5 text-info”>This is a text of .fs-5 font size.</p> <p class=”fs-6 text-info”>This is a text of .fs-6 font size.</p> </body> </html> Modify the $font-sizes Sass map to customize the available font sizes. Font weight and italics Use the below utilities to change font-weight or font-style of text: font-weight utilities are abbreviated as .fw-* font-style utilities are abbreviated as .fst-* Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Text</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </head> <body> <p class=”fw-bold text-primary”>This is a bold text.</p> <p class=”fw-bolder text-primary”>This is a bolder weight text (relative to the parent element).</p> <p class=”fw-semibold text-primary”>This is a semibold weight text.</p> <p class=”fw-medium text-secodary”>This is a medium weight text.</p> <p class=”fw-normal text-secodary”>This is a normal weight text.</p> <p class=”fw-light text-secodary”>This is a light weight text.</p> <p class=”fw-lighter text-danger”>This is a lighter weight text (relative to the parent element).</p> <p class=”fst-italic text-danger”>This is a italic text.</p> <p class=”fst-normal text-danger”>This is a text with normal font style.</p>

Aug 10

Bootstrap – Position

Bootstrap – Position ”; Previous Next This chapter discusses about the .position utility classes for quick configuration of the position of an element. Position values The .position classes are available for quick positioning, but they are not responsive in nature. The various values for position class are as follows: .position-static .position-relative .position-absolute .position-fixed .position-sticky 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 – Position</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 class=”m-2″> <h4 class=”mb-4″>Position values</h4> <div class=”container mt-4 bg-light border border-dark”> Position: static states that the top, right, bottom, and left properties will be the same no matter <p class=”position-static bg-info top-50 start-50 text-light”>position: static</p> This part is out of the paragraph. </div> <div class=”container mt-4 bg-light border border-dark”> Position: relative sets its position to be relative with respect to the elements on top of it <p class=”position-relative bg-success top-50 start-50 text-light w-50″> position: relative; </p> This means that the top, right, bottom, and left properties will affect the position of the Paragraph. </div> <div class=”container mt-4 bg-light border border-dark”> Position: absolute sets its position relative to the closest parent and it set its position absolute with that. <p class=”position-absolute bg-warning bottom-0 end-50 text-light”> position: absolute; </p> This means that the top, right, bottom, and left properties will get adjusted with respect to the nearest ancestor and then the position is set. </div> </body> </html> Arrange elements Elements can be arranged easily with the edge positioning utility classes. The format for arranging the elements is {property}-{position}. where property can hold following values: property description top vertical top position start horizontal left position (LTR) bottom vertical bottom position end horizontal right position (LTR) where position can hold following values: position description 0 0 edge position 50 50% edge position 100 100% edge position Note: More position values can be added by making entries to the $position-values Sass map variable. Let us see an example of arrangement of elements using the .position-* class: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Position</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 class=”container p-3 m-5″> <div class=”position-absolute top-0 start-0 mb-2″> <button type=”button” class=”btn btn-primary”>top-0 start-0</button> </div> <div class=”position-absolute top-50 start-50 mb-2″> <button type=”button” class=”btn btn-secondary”>top-50 start-50</button> </div> <div class=”position-absolute top-0 end-0 mb-2″> <button type=”button” class=”btn btn-success”>top-0 end-0</button> </div> <div class=”position-absolute bottom-0 start-0 mb-2″> <button type=”button” class=”btn btn-warning”>bottom-0 start-0</button> </div> <div class=”position-absolute bottom-50 end-50 mb-2″> <button type=”button” class=”btn btn-danger”>bottom-50 end-50</button> </div> <div class=”position-absolute bottom-0 end-0 mb-2″> <button type=”button” class=”btn btn-info”>bottom-0 end-0</button> </div> </div> </body> </html> Center elements Using the transform utility class .translate-middle, you can arrange the elements in the center. The transform class applies the transformations translateX(-50%) and translateY(-50%) to an element. This element then combines with edge positioning utilities and thus centers the element. 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 – Position</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> <style> span { border: 2px solid rgb(26, 58, 241); padding: 30px; background:#1ae3f1; } </style> </head> <body> <div class=”container”> <div class=”position-absolute top-0 start-0 translate-middle”> <span></span> </div> <div class=”position-absolute top-0 start-50 translate-middle”> <span></span> </div> <div class=”position-absolute top-0 start-100 translate-middle”> <span></span> </div> <div class=”position-absolute top-50 start-0 translate-middle”> <span></span> </div> <div class=”position-absolute top-50 start-50 translate-middle”> <span></span> </div> <div class=”position-absolute top-50 start-100 translate-middle”> <span></span> </div> <div class=”position-absolute top-100 start-0 translate-middle”> <span></span> </div> <div class=”position-absolute top-100 start-50 translate-middle”> <span></span> </div> <div class=”position-absolute top-100 start-100 translate-middle”> <span></span> </div> </div> </body> </html> Use .translate-middle-x or .translate-middle-y classes, in order to position the elements only in horizontal or vertical direction. 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 – Position</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> <style> span { border: 2px solid rgb(26, 58, 241); padding: 30px; background:#dd1c8c; } </style> </head> <body> <div class=”position-static”> <div class=”position-absolute top-0 start-0″> <span></span> </div> <div class=”position-absolute top-0 start-50 translate-middle-x”> <span></span> </div> <div class=”position-absolute top-0 end-0″> <span></span> </div> <div class=”position-absolute top-50 start-0 translate-middle-y”> <span></span> </div> <div class=”position-absolute top-50 start-50 translate-middle”> <span></span> </div> <div class=”position-absolute top-50 end-0 translate-middle-y”> <span></span> </div> <div class=”position-absolute bottom-0 start-0″> <span></span> </div> <div class=”position-absolute bottom-0 start-50 translate-middle-x”> <span></span> </div> <div class=”position-absolute bottom-0 end-0″> <span></span> </div> </div> </body> </html> Few more examples Some more examples are shown below, where .position class is used along with other utility classes provided by Bootstrap: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Position</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 p-5 gap-5″> <button type=”button” class=”btn btn-success position-relative”> Notifications<span class=”position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle”><span class=”visually-hidden”>unread messages</span></span> </button> <button type=”button” class=”btn btn-primary position-relative”> Inbox <span class=”position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger”> 99+ <span class=”visually-hidden”>unread messages</span> </span> </button> <button type=”button” class=”btn btn-warning position-relative”> Messages <span class=”position-absolute top-0 start-100 translate-middle badge border border-light

Aug 10

Bootstrap – Validation

Bootstrap – Validation ”; Previous Next This chapter will discuss about Bootstrap validation. Bootstrap 5 Validation enhances HTML5 form validation by offering useful feedback to users, supporting default browser behavior, custom styles, and JavaScript. The client-side custom validation styles and tooltips are inaccessible because they are not visible to assistive technology. It is recommended to use either the server-side option or the default browser validation technique, while we work on the solution. How form validation works in Bootstrap The two pseudo-classes :invalid and :valid in CSS are used to provide HTML form validation. It applies to the <textarea>, <select>, and <input> elements. Bootstrap applies the :invalid and :valid styles to the parent .was-validated class. Fields without a value show as invalid when the page loads. You choose when to activate them (usually after a form submission). To restore the original appearance of the form after dynamic submissions using Ajax, the class .was-validated should be removed from the <form> to reset its appearance. The pseudo-classes can be replaced with the .is-invalid and .is-valid classes for server-side validation as a fallback, without the need for a .was-validated parent class. Currently, CSS limitations prevent us from directly applying styles to a <label> element that precedes a form control in the DOM without the help of custom JavaScript. The constraint validation API, which consists of various JavaScript methods for validating form controls, is supported by all contemporary web browsers. Use browser default styles or create custom feedback styles using HTML/CSS. Use setCustomValidity method in JavaScript for unique validity messages. Let”s look at some examples of custom form validation styles, optional server-side classes and browser defaults. Custom styles Add novalidate boolean attribute to the <form> to receive custom validation messages from Bootstrap. Browser default feedback tooltips are disabled with above boolean attribute but JavaScript validation APIs still work. Submitting this form will trigger JavaScript to provide feedback, displaying :invalid and :valid styles on form controls. Custom feedback styles improve feedback communication by adding colors, borders, focus styles, and backdrop icons. Backdrop icons for <select> are only available for .form-select, and not .form-control. This example demonstrates a Bootstrap form with validation features, to ensure that the required fields are filled out correctly before the form can be submitted. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Validation</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-3 needs-validation” novalidate> <div class=”col-md-4″> <label for=”validationCustomName” class=”form-label”>Full Name</label> <input type=”text” class=”form-control” id=”validationCustomName” value=”Jhon Miller” required> <div class=”invalid-feedback”> Correct input! </div> </div> <div class=”col-md-4″> <label for=”validationCustomEmail” class=”form-label”>Email Id</label> <div class=”input-group has-validation”> <input type=”text” class=”form-control” id=”validationCustomEmail” aria-describedby=”inputGroupPrepend” required> <span class=”input-group-text” id=”inputGroupPrepend”>@tutorialspoint.com</span> <div class=”invalid-feedback”> Please enter correct mail id. </div> </div> </div> <div class=”col-md-4″> <label for=”validationCustomPhone” class=”form-label”>Mobile no</label> <input type=”text” class=”form-control” id=”validationCustomPhone” required> <div class=”invalid-feedback”> please enter correct mobile no. </div> </div> <div class=”col-md-6″> <label for=”validationAddress” class=”form-label”>Address</label> <input type=”text” class=”form-control” id=”validationAddress” value=”XYZ – 123″ required> <div class=”valid-feedback”> Correct input! </div> </div> </div> <div class=”col-md-3″> <label for=”validationCustom” class=”form-label”>Gender</label> <select class=”form-select” id=”validationCustom” required> <option selected disabled value=””>Choose…</option> <option>Male</option> <option>Female</option> <option>Others</option> </select> <div class=”invalid-feedback”> Please select gender. </div> </div> <div class=”col-12″> <div class=”form-check”> <input class=”form-check-input” type=”checkbox” value=”” id=”invalidCheck” required> <label class=”form-check-label” for=”invalidCheck”> I have reviewed and agree to Terms of Services and Privacy Policy. </label> <div class=”invalid-feedback”> You must agree before submitting. </div> </div> </div> <div class=”col-12″> <button class=”btn btn-primary” type=”submit”>Submit</button> </div> </form> <script> (() => { ”use strict” // Fetch all the forms we want to apply custom Bootstrap validation styles to const forms = document.querySelectorAll(”.needs-validation”) // Loop over them and prevent submission Array.from(forms).forEach(form => { form.addEventListener(”submit”, event => { if (!form.checkValidity()) { event.preventDefault() event.stopPropagation() } form.classList.add(”was-validated”) }, false) }) })() </script> </body> </html> The following JavaScript code snippet disables form submissions if there are invalid fields. It achieves this by adding event listeners to the forms and preventing the default form submission behavior if the form is not valid. // Example JavaScript starter for disabling form submissions if there are invalid fields (() => { ”use strict” // Fetch all the forms we want to apply custom Bootstrap validation styles to const forms = document.querySelectorAll(”.needs-validation”) // Loop over them and prevent submission Array.from(forms).forEach(form => { form.addEventListener(”submit”, event => { if (!form.checkValidity()) { event.preventDefault() event.stopPropagation() } form.classList.add(”was-validated”) }, false) }) })() Browser defaults We can also use browser default messages instead of custom validation message. Depending on your browser and OS, feedback style varies slightly. Although CSS cannot be used to style these feedback styles, JavaScript can still be used to alter the feedback text. Try submitting the form in the following example to how default browser validation messages show up. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Form – Validation</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-3″> <div class=”col-md-4″> <label for=”validationDefaultName” class=”form-label”>Full Name</label> <input type=”text” class=”form-control” id=”validationDefaultName” value=”name” required> </div> <div class=”col-md-4″> <label for=”validationDefaultEmail” class=”form-label”>Email Id</label> <div class=”input-group”> <input type=”text” class=”form-control” id=”validationDefaultEmail” aria-describedby=”inputGroupPrepend” required> <span class=”input-group-text” id=”inputGroupPrepend”>@tutorialspoint.com</span> </div> </div> <div class=”col-md-4″> <label for=”validationDefaultMob” class=”form-label”>Mobile No</label> <input type=”text” class=”form-control” id=”validationDefaultMob” value=”” required> </div> <div class=”col-md-6″> <label for=”validationDefaultAddress” class=”form-label”>Address</label> <input type=”text” class=”form-control” id=”validationDefaultAddress” required> </div> <div class=”col-md-3″> <label for=”validationDefaultGender” class=”form-label”>Gender</label> <select class=”form-select” id=”validationDefaultGender” required> <option selected disabled value=””>Choose…</option> <option>Male</option> <option>Female</option> <option>Others</option> </select> </div> <div class=”form-check”> <input class=”form-check-input” type=”checkbox” value=”” id=”invalidCheck2″ required> <label class=”form-check-label” for=”invalidCheck2″> I have reviewed and agree to Terms of Services and Privacy Policy. </label> </div> </div> <div

Aug 10

Bootstrap-Sticky footer navbar Demo

Bootstrap – Sticky Footer Navbar Demo ”; Previous Next Sticky footer navbar A page can include a footer to the bootom of the viewport with a fixed top navbar. This can be useful for websites with long pages, as it allows users to quickly access navigation options, even when they scroll down to the bottom of the page. Bootstrap provides built-in CSS classes to create a sticky footer navbar. .navbar – This class is used to create the navigation bar at the top of the page. .footer – This class represents the sticky footer that will always appear at the bottom of the viewport. The provided link shows an example of sticky footer navbar: Example Description Download link Sticky footer navbar This example shows a fixed-top navigation bar and a sticky footer. Download Print Page Previous Next Advertisements ”;

Aug 10

Bootstrap – Clearfix

Bootstrap – Clearfix ”; Previous Next This chapter discusses the clearfix feature of helper classes. The clearfix feature in Bootstrap is used to clear floated elements within a container. When elements within a container are floated, the container”s height can sometimes be collapsed, causing issues with the layout. Here”s an example of how to use the .clearfix class in Bootstrap: Example The example below shows the usage of clearfix. Without the clearfix, the wrapping div would not span around the buttons which would cause a broken layout. You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Helper – Clearfix</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>Clearfix example</h4><br> <div class=”bg-success clearfix”> <button type=”button” class=”btn btn-secondary float-start”>Button floated left</button> <button type=”button” class=”btn btn-secondary float-end”>Button floated right</button> </div> </body> </html> Print Page Previous Next Advertisements ”;