bootstrap Archives - Page 6 of 10 - Donotsad where can learn any thing work project and make money

Aug 10

Bootstrap – Vertical Rule

Bootstrap – Vertical rule ”; Previous Next This chapter discusses about vertical rule. The custom vertical rule helper creates vertical dividers in common layouts, like the <hr> element. The vertical rule class is denoted as .vr It is 1px wide It has minimum-height of 1em Its color is set using currentColor and opacity You can customize the verical rules with additional styles as per your requirement. The example given below shows the usage of .vr class: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Helper – Vertical rule</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> <h4>Vertical rule example</h4> <div class=”container”> <div class=”row”> <div class=”col-md-3 text-bg-light”> <p>Text on the left side of vertical divider.</p> </div> <div class=”col-md-1″> <hr class=”vr”> </div> <div class=”col-md-3 text-bg-light”> <p>Text on the right side of vertical divider.</p> </div> </div> </div> </body> </html> In flex layouts, the height of vertical rule adjusts automatically based on the size of its container. Let”s see an example where the height of vertical rule is based on the flex layout: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Helper – Vertical rule</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> <h4>Vertical rule with flex</h4> <div class=”d-flex flex-row”> <div class=”flex-grow-1″> <p>Content on the left</p> </div> <div class=”d-flex flex-grow-1″ style=”height: 200px;”> <div class=”vr”></div> </div> <div class=”flex-grow-1″> <p>Content on the right</p> </div> </div> </body> </html> Vertical rule with stacks Vertical rule can also be used in stacks, to separate the different values. Let”s see an example where the vertical rule is used in stacks: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Helper – Vertical rule</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> <h4>Vertical rule with stacks</h4> <div class=”hstack gap-1″> <div class=”p-3 text-bg-info”>First item</div> <div class=”vr”></div> <div class=”p-3 text-bg-primary”>Second item</div> <div class=”vr”></div> <div class=”p-3 text-bg-warning”>Third item</div> </div> </body> </html> Print Page Previous Next Advertisements ”;

Aug 10

Bootstrap – Slider Demo

Bootstrap – Slider Demo ”; Previous Next Bootstrap provides a few different options for styling Navigation slider. Some of examples are as shown below − Example Description Download link Slide menu on over This example indicates about Slider Menu structure in Bootstrap Download Sub Menu This example indicates about Slider Sub Menu structure in Bootstrap Download Sidebar With Tabs This example indicates about Slider With Tabs structure in Bootstrap Download Tabs This example indicates about Tabs structure in Bootstrap Download Print Page Previous Next Advertisements ”;

Aug 10

Bootstrap – Backgrounds

Bootstrap – Background ”; Previous Next This chapter discusses about the background color utility classes and the gradients that can be used with these classes. Accessibility tip: Use of color to the background just provides a visual indication, and this will not be helpful to users of assistive technologies like screen readers. Make sure that the meaning is clear from the content itself. Use alternative means to add clarity to the content using the .visually-hidden class. Background color Like the contextual color classes for text, you can apply any contextual class to set the background of an element. Keep in mind that background utilities do not affect color, therefore, certain situations may require the use of .text-* color utilities. 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 Background</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>Background color utilities</h4> <!–success color–> <div class=”p-3 mb-2 bg-success text-white”>background utility –> .bg-success</div> <div class=”p-3 mb-2 bg-success-subtle text-emphasis-success”>background utility subtle–> .bg-success-subtle</div> <!–warning color–> <div class=”p-3 mb-2 bg-warning text-dark”>background utility –> .bg-warning</div> <div class=”p-3 mb-2 bg-warning-subtle text-emphasis-warning”>background utility subtle –> .bg-warning-subtle</div> <!–info color–> <div class=”p-3 mb-2 bg-info text-dark”>background utility –> .bg-info</div> <div class=”p-3 mb-2 bg-info-subtle text-emphasis-info”>background utility subtle–> .bg-info-subtle</div> <!–dark color–> <div class=”p-3 mb-2 bg-dark text-white”>background utility –> .bg-dark</div> <div class=”p-3 mb-2 bg-dark-subtle text-emphasis-dark”>background utility subtle–> .bg-dark-subtle</div> <!–primary color–> <div class=”p-2 mb-2 bg-primary text-white”>background utility –> .bg-primary</div> <div class=”p-3 mb-2 bg-primary-subtle text-emphasis-primary”>background utility subtle–> .bg-primary-subtle</div> <!–light color–> <div class=”p-3 mb-2 bg-light text-dark”>background utility –> .bg-light</div> <div class=”p-3 mb-2 bg-light-subtle text-emphasis-light”>background utility subtle–> .bg-light-subtle</div> <!–secondary color–> <div class=”p-3 mb-2 bg-secondary text-white”>background utility –> .bg-secondary</div> <div class=”p-3 mb-2 bg-secondary-subtle text-emphasis-secondary”>background utility subtle–> .bg-secondary-subtle</div> <!–body color–> <div class=”p-3 mb-2 bg-body text-body”>background utility –> .bg-body</div> <div class=”p-3 mb-2 bg-black text-white”>background utility subtle–> .bg-black</div> <!–danger color–> <div class=”p-3 mb-2 bg-danger text-white”>background utility –> .bg-danger</div> <div class=”p-3 mb-2 bg-danger-subtle text-emphasis-danger”>background utility subtle–> .bg-danger-subtle</div> <!–white color–> <div class=”p-3 mb-2 bg-white text-dark”>background utility –> .bg-white</div> <div class=”p-3 mb-2 bg-transparent text-body”>background utility subtle–> .bg-transparent</div> <!–secondary and tertiary color–> <p class=”p-3 mb-2 bg-body-secondary”>background utility –> .bg-body-secondary</p> <p class=”p-3 mb-2 bg-body-tertiary”>background utility –> .bg-body-tertiary</p> </body> </html> Background gradient The addition of a .bg-gradient class results in a linear gradient being applied to the backgrounds, commencing with a partially transparent white hue that gradually fades towards the bottom. In order to add a gradient in your custom CSS, just add background-image: var(–bs-gradient);. Let us see an example of .bg-gradient class: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Background</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>Background color utilities</h4> <!–success color–> <div class=”p-3 mb-2 bg-success text-white”>background utility –> .bg-success</div> <div class=”p-3 mb-2 bg-success bg-gradient text-white”>background gradient utility –> .bg-success bg-gradient</div> <!–warning color–> <div class=”p-3 mb-2 bg-warning text-dark”>background utility –> .bg-warning</div> <div class=”p-3 mb-2 bg-warning bg-gradient text-emphasis-warning”>background gradient utility –> .bg-warning bg-gradient</div> <!–info color–> <div class=”p-3 mb-2 bg-info text-dark”>background utility –> .bg-info</div> <div class=”p-3 mb-2 bg-info bg-gradient text-emphasis-info”>background gradient utility–> .bg-info bg-gradient</div> <!–dark color–> <div class=”p-3 mb-2 bg-dark text-white”>background utility –> .bg-dark</div> <div class=”p-3 mb-2 bg-dark bg-gradient text-white”>background gradient utility –> .bg-dark bg-gradient</div> <!–primary color–> <div class=”p-2 mb-2 bg-primary text-white”>background utility –> .bg-primary</div> <div class=”p-3 mb-2 bg-primary bg-gradient text-white”>background gradient utility–> .bg-primary bg-gradient</div> <!–light color–> <div class=”p-3 mb-2 bg-light text-dark”>background utility –> .bg-light</div> <div class=”p-3 mb-2 bg-light bg-gradient text-emphasis-light”>background gradient utility–> .bg-light bg-gradient</div> <!–secondary color–> <div class=”p-3 mb-2 bg-secondary text-white”>background utility –> .bg-secondary</div> <div class=”p-3 mb-2 bg-secondary bg-gradient text-white”>background gradient utility–> .bg-secondary bg-gradient</div> <!–body color–> <div class=”p-3 mb-2 bg-body text-body”>background utility –> .bg-body</div> <div class=”p-3 mb-2 bg-black bg-gradient text-white”>background gradient utility–> .bg-black bg-gradient</div> <!–danger color–> <div class=”p-3 mb-2 bg-danger text-white”>background utility –> .bg-danger</div> <div class=”p-3 mb-2 bg-danger bg-gradient text-white”>background gradient utility–> .bg-danger bg-gradient</div> </div> </body> </html> Opacity To change the opacity of the background color, either override –bs-bg-opacity via custom styles or inline styles or choose from the available utility .bg-opacity. Let us see an example where the CSS variable is overriden: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Background</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>Background opacity – override CSS variable</h4> <div class=”bg-danger p-2 text-white”>Default danger background</div> <div class=”bg-danger p-2″ style=”–bs-bg-opacity: .5;”>50% opacity of danger background</div> </div> </body> </html> Let us see an example where .bg-opacity is used: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Background</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>Background opacity utility</h4> <div class=”bg-primary p-2 text-white”>Primary default background</div> <div class=”bg-primary p-2 text-dark bg-opacity-10″>10% opacity on primary background</div> <div class=”bg-primary p-2 text-dark bg-opacity-25″>25% opacity on primary background</div> <div class=”bg-primary p-2 text-dark bg-opacity-50″>50% opacity on primary background</div> <div class=”bg-primary p-2 text-dark bg-opacity-75″>75% opacity primary background</div> </div> </body> </html> Print Page Previous Next Advertisements ”;

Aug 10

Bootstrap – Buttons Demo

Bootstrap – Buttons Demo ”; Previous Next Bootstrap provides some options to style buttons. Use utilities to design unique buttons for any application, which are summarized in the following table − Sr.No. Class & Description 1 btn Default/ Standard button. 2 btn-primary Provides extra visual weight and identifies the primary action in a set of buttons. 3 btn-success Indicates a successful or positive action. 4 btn-info Contextual button for informational alert messages. 5 btn-warning Indicates caution should be taken with this action. 6 btn-danger Indicates a dangerous or potentially negative action. 7 btn-link Deemphasize a button by making it look like a link while maintaining button behavior. Example Description Download link IOS Buttons This example indicates about button structure in Bootstrap Download Block Buttons This example indicates about block button structure in Bootstrap Download Icon Buttons This example indicates about icon button structure in Bootstrap Download Spinner Buttons This example indicates about spinner button structure in Bootstrap Download Close Buttons This example indicates about close button structure in Bootstrap Download Print Page Previous Next Advertisements ”;

Aug 10

Bootstrap – Position

Bootstrap – Position ”; Previous Next This chapter discusses about configuration of position of an element. Bootstrap provides a set of helper classes to set the position of an element on a page. Some of the classes provided by Bootstrap are as follows:. .fixed-top .fixed-bottom .sticky-top .sticky-bottom Let us see examples for each set of classes. Fixed top The class .fixed-top sets the position of an element at the top of the viewport, from edge to edge. This is useful for creating navigation bars or headers that remain visible at the top of the screen even as the user scrolls down. Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Position – Fixed top</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 style=”height:1500px”> <nav class=”navbar navbar-expand-lg text-bg-success navbar-dark fixed-top”> <div class=”container-fluid”> <a class=”navbar-brand” href=”#”>Use of .fixed-top class</a> </div> </nav> <div class=”container-fluid” style=”margin-top:80px”> <h4>Position fixed at top</h4> <p>The class .fixed-top of Bootstrap sets the position of the element at top of the screen.</p> <h1>Scroll down the page to see the position</h1> </div> </body> </html> Fixed bottom The class .fixed-bottom sets the position of an element at the bottom of the viewport, from edge to edge. Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Position – Fixed bottom</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 style=”height:1500px”> <nav class=”navbar navbar-expand-lg text-bg-primary navbar-dark fixed-bottom”> <div class=”container-fluid”> <a class=”navbar-brand” href=”#”>Use of .fixed-bottom class</a> </div> </nav> <div class=”container-fluid” style=”margin-top:80px”> <h4>Position fixed at bottom</h4> <p>The class .fixed-bottom of Bootstrap sets the position of the element at the bottom of the page.</p> <h1>Scroll down the page to see the position</h1> </div> </body> </html> Sticky top The class .sticky-top is used to create a sticky element that remains at the top of the screen, from edge to edge, but only after you scroll past it. Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Position – Sticky top</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 style=”height:1500px”> <div class=”container-fluid mt-3″> <h3>Sticky Navbar</h3> <p>The class <b>.sticky-top</b> is used to create a sticky element that remains at the top of the screen, from edge to edge, but only after you scroll past it.</p> <p>Scroll down the page to see the effect.</p> </div> <nav class=”navbar navbar-expand-lg bg-dark navbar-dark sticky-top”> <div class=”container-fluid”> <a class=”navbar-brand” href=”#”>Sticky top</a> </div> </nav> <div class=”container-fluid”> <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p> <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p> <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p> <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p> <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p> <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p> <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p> </div> </body> </html> Responsive sticky top Responsive sticky top classes are used in web design to create a navigation menu or header that sticks to the top of the screen as the user scrolls down the page. This ensures that the navigation menu is always visible and easily accessible, even as the user moves further down the page. Some of the responsive sticky top classes provided by Bootstrap are as follows: .sticky-sm-top sticks the position of element(s) to top on small sized viewports .sticky-md-top sticks the position of element(s) to top on medium sized viewports .sticky-lg-top sticks the position of element(s) to top on large sized viewports .sticky-xl-top sticks the position of element(s) to top on extra large sized viewports .sticky-xxl-top sticks the position of element(s) to top on extra extra large sized viewports Let us see an example: Note: Resize your browser to see the change. Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Position – Responsive Sticky top</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 style=”height:1500px”> <div class=”container-fluid mt-3″> <h3>Sticky Navbar</h3> <p>The class <b>.sticky-lg-top</b> is a responsive class, used to create a sticky element that remains at the top of the screen, from edge to edge, but only after you scroll past it.</p> <p>Scroll down the page to see the effect.</p> </div> <nav class=”navbar navbar-expand-lg bg-dark navbar-dark sticky-lg-top”> <div class=”container-fluid”> <a class=”navbar-brand” href=”#”>Responsive Sticky top</a> </div> </nav> <div class=”container-fluid”> <p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p> <p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p> <p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p> <p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the

Aug 10

Bootstrap – Carousel Demo

Bootstrap – Carousel demo ”; Previous Next What is a carousel? A carousel in bootstrap is a slideshow component that allows users to display multiple images, videos, or other types of content in a looping sequence. It is a responsive and dynamic component that can be easily customized. Bootstrap provides a set of classes that can be used to create a carousel component and customize it. Two main classes for adding carousel are: class description .carousel This class sets up the basic structure of the carousel .carousel-item This class is used to define the individual slides within the carousel Optional classes to customize the slides in a carousel are: class description .slide Adds a sliding animation to the carousel .active Defines the initial active slide .carousel-indicators Adds navigation indicators to the bottom of the carousel .carousel-control-prev and carousel-control-next Adds left and right arrow buttons to the carousel for manual navigation .carousel-caption Adds a caption or description to each slide in the carousel Some of the examples of the carousels are as follows: Example Description Download link Basic carousel This example shows a basic carousel. Download Carousel with indicators This example shows a carousel with indicators. Download Carousel with captions This example shows a carousel with captions. Download Animated carousel This example shows a carousel with animation. Download Carousel with time interval This example shows a carousel with time interval. Download Autoplay carousel This example shows an autoplay carousel. Download Print Page Previous Next Advertisements ”;

Aug 10

Bootstrap – Colors

Bootstrap – Colors ”; Previous Next This chapter will discuss about Bootstrap Colors classes. You can use Bootstrap’s custom classes to add color to the text or the background and hence adding some meaning to your content. Text Colors Add the color utilities like .text-* to colorize the text. The color utilities like .text-* that generated from Bootstrap”s original $theme-colors Sass map don’t yet respond to color modes. This will be resolved in version 6. Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Textual Colors</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>Contextual Colors</h4> <p>Use the contextual classes to provide “meaning through colors”:</p> <p class=”text-muted”>Text marked by this class is muted.</p> <p class=”text-primary”>Text marked by this class is important.</p> <p class=”text-primary-emphasis”>Text marked by this class is darker than that displayed by .text-primary class.</p> <p class=”text-success”>Text marked by this class indicates success.</p> <p class=”text-success-emphasis”>Text marked by this class is darker than that displayed by .text-success class.</p> <p class=”text-info”>Text marked by this class represents some information.</p> <p class=”text-info-emphasis”>Text marked by this class is darker than that displayed by .text-info class.</p> <p class=”text-warning”>Text marked by this class represents a warning.</p> <p class=”text-warning-emphasis”>Text marked by this class is darker than that displayed by .text-warning class.</p> <p class=”text-danger”>Text marked by this class represents danger.</p> <p class=”text-danger-emphasis”>Text marked by this class is darker than that displayed by .text-danger class.</p> <p class=”text-secondary”>Text marked by this class is secondary text.</p> <p class=”text-secondary-emphasis”>Text marked by this class is darker than that displayed by .text-secondary class.</p> <p class=”text-dark”>Text marked by this class is displayed dark grey in color.</p> <p class=”text-dark-emphasis”>Text marked by this class is darker than that displayed by .text-dark class.</p> <p class=”text-body”>This class marks the default body color i.e. black.</p> <p class=”text-body-emphasis”>Text marked by this class is darker than that displayed by .text-body class.</p> <p class=”text-body-secondary”>Text marked by this class is lighter than that displayed by .text-body class.</p> <p class=”text-body-tertiary”>Text marked by this class is lighter than that displayed by .text-body-secondary class.</p> <p class=”text-light”>This class represents the text in light grey color, on a white background.</p> <p class=”text-light-emphasis”>Text marked by this class is lighter than that displayed by .text-light class.</p> <p class=”text-white bg-dark”>This class represents the text in white. on white background. In order to make the white text look clear, <b>bg-dark</b> class is used.</p> <p class=”text-black bg-white”>This class represents the text in black color. In order to make the black text color clear, <b>bg-white</b> class is used.</p> </div> </body> </html> Deprecation: The text utilities like .text-black-50 and .text-white-50 are deprecated as of v5.1.0 and they will be removed from v6.0.0. New utilities like .text-opacity-* are added. Deprecation: The .text-muted has been deprecated as of v5.3.0, due to addition of new theme colors and variables. It will be removed from v6.0.0. Its default value is reassigned to a CSS variable –bs-secondary-color. Background Colors Bootstrap provides a set of predefined CSS classes for background colors that can be applied to HTML elements using the bg-* classes. These classes allow you to easily apply background colors to various components in your web page without having to write custom CSS. Here are the list of background color classes provided by Bootstrap: .bg-primary .bg-success .bg-info .bg-warning .bg-danger .bg-secondary .bg-dark .bg-light Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Background Colors</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>Background Colors</h4> <p>Use of background classes provided by Bootstrap to add meaning through colors.</p> <div class=”bg-primary p-3″>Sets the background color to the primary color defined in the Bootstrap theme.</div> <div class=”bg-success p-3″>Sets the background color to indicate success, typically green.</div> <div class=”bg-info p-3″>Sets the background color to indicate information, typically blue.</div> <div class=”bg-warning p-3″>Sets the background color to indicate a warning or caution, typically yellow.</div> <div class=”bg-danger p-3″>Sets the background color to indicate danger, typically red.</div> <div class=”bg-secondary p-3″>Sets the background color to the secondary color defined in the Bootstrap theme.</div> <div class=”bg-dark p-3″>Sets the background color to a dark color, typically a dark gray.</div> <div class=”bg-light p-3″>Sets the background color to a light color, typically a light gray.</div> </div> </body> </html> Background Text Colors Bootstrap provides a set of predefined CSS classes for text colors that can be applied to HTML elements to customize the color of the text. These classes are used in conjunction with background color classes such as .bg-* classes, to control the color of the text within elements that have a background color applied to them. Here are the list of background text color classes provided by Bootstrap: .text-bg-primary .text-bg-success .text-bg-info .text-bg-warning .text-bg-danger .text-bg-secondary .text-bg-dark .text-bg-light Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Colors – background text color</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link href=”https://cdn.jsdelivr.net/npm/[email 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>Contrasting text Color as per the background color</h4> <p class=”text-bg-primary”>Sets the text color to the primary color defined in the Bootstrap theme.</p> <p class=”text-bg-success”>Sets the text color to indicate success, typically green.</p> <p class=”text-bg-info”>Sets the text color to indicate information, typically blue.</p> <p class=”text-bg-warning”>Sets the text color to indicate a warning or caution, typically yellow.</p> <p class=”text-bg-danger”>Sets the text color to indicate danger, typically red.</p> <p class=”text-bg-secondary”>Sets the text color to the secondary color defined in the

Aug 10

Bootstrap – Range

Bootstrap – Range ”; Previous Next This chapter will discuss about Bootstrap form range. Range is an interactive component. The user can quickly scroll and slide through possible values spread across the required range. Basic example Use class .form-range to create unique controls for <input type=”range”>. Both track and thumb have the same appearance across all browsers. Bootstrap doesn”t support “filling” their range”s track from left to right of the thumb as a means to visually indicate progress. This is only supported on firefox. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Form – Range</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </head> <body> <label for=”basicRange” class=”form-label”>Range</label> <input type=”range” class=”form-range” id=”basicRange”> </body> </html> Disabled The disabled attribute is used to disable the Range. Disabled range cannot be focused, appears greyed out, and has no pointer events. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Form – Range</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </head> <body> <label for=”disabledRange” class=”form-label”>Range</label> <input type=”range” class=”form-range” id=”disabledRange” disabled> </body> </html> Min and max Default range input for min is 0 and max is 100. If you are using min and max attributes, new values can be specified. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Form – Range</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </head> <body> <label for=”minmaxrange” class=”form-label”>Range</label> <input type=”range” class=”form-range” min=”0″ max=”9″ id=”minmaxrange”> </body> </html> Steps Range step determines how much the range input value will increase or decrease in one step. Number of steps is doubled when step=”0.5″ is used. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Form – Range</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </head> <body> <label for=”stepRange” class=”form-label”>Range</label> <input type=”range” class=”form-range” min=”0″ max=”7″ step=”0.5″ id=”stepRange”> </html> Print Page Previous Next Advertisements ”;

Aug 10

Bootstrap – Object Fit

Bootstrap – Object fit ”; Previous Next This chapter discusses about the object fit utilities. These utility classes are used to resize the content of the replaced elements, such as <img> or <video> to fit its container. The object-fit property either preserves the aspect ratio or stretches to take up as much as space available of the content in the container. The format of this property is .object-fit-{value}. Following are the values that .object-fit class takes up: contain – The entire content will be scaled down or up to fit within the container, while maintaining its original aspect ratio. cover – The content will be scaled to cover the entire container, potentially cropping parts of it. The aspect ratio will be maintained. fill – This is the default value. The image or video will fill the entire container, possibly stretching or squishing its original aspect ratio. scale (for scale down) – The content will be scaled down to fit within the container, but only if it would be scaled up by using the contain value. Otherwise, it behaves as none. none – This does not bring any change in the display of the content. Let us see an example for .object-fit: none: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Object fit</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> img { width:200px; height:400px; } </style> </head> <body> <div class=”container mt-3″> <h4>Object fit value – none</h4> <img src=”/bootstrap/images/tutimg.png” width=”667″ height=”184″ class=”object-fit-none”> </div> </body> </html> Let us see an example for another value object-fit: contain: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Object fit</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> img { width:200px; height:400px; } </style> </head> <body> <div class=”container mt-3″> <h4>Object fit value – contain</h4> <img src=”/bootstrap/images/tutimg.png” width=”667″ height=”184″ class=”object-fit-contain”> </div> </body> </html> Responsive The utility class .object-fit includes responsive variations for various breakpoints, such as sm, md, lg, xl, xxl, using the format .object-fit-{breakpoint}-{value}. Let us see an example for breakpoint (md): Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Object fit</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> img { width:200px; height:400px; } </style> </head> <body> <div class=”container mt-3″> <h4>Object fit value (contain) – breakpoint (md)</h4> <img src=”/bootstrap/images/tutimg.png” width=”667″ height=”184″ class=”object-fit-md-contain”> </div> </body> </html> Let us see an example for breakpoint (xxl): Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Object fit</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> img { width:200px; height:400px; } </style> </head> <body> <div class=”container mt-3″> <h4>Object fit value (fill) – breakpoint (xxl)</h4> <img src=”/bootstrap/images/tutimg.png” width=”667″ height=”184″ class=”object-fit-xxl-fill”> </div> </body> </html> Video The .object-fit utility classes also work on <video> elements. 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 – Object fit</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> video { border: 5px groove darkblue; padding: 30px; width: auto; height: auto; } </style> </head> <body> <div class=”container mt-3″> <h4>Object fit value (cover) – video</h4> <video src=”/bootstrap/images/foo.mp4″ class=”object-fit-cover” autoplay> </video> </div> </body> </html> Print Page Previous Next Advertisements ”;

Aug 10

Bootstrap – Visually Hidden

Bootstrap – Visually hidden ”; Previous Next This chapter discusses about classes provided by Bootstrap to visually hide any element, such as .visually-hidden and .visually-hidden-focusable. The .visually-hidden class in Bootstrap 5 is used to visually hide an element while keeping it accessible to screen readers and other assistive technologies. The .visually-hidden-focusable class is used to visually hide an element by default, but to display it when it’s focused, for example, on using a keyboard. The .visually-hidden-focusable class can also be used within a container :focus-within. The container will be displayed when any child element of the container receives focus. Test focusability: Use keyboard navigation to test the focusability of elements. Press the Tab key to navigate through the focusable elements and Shift + Tab to move backward. Let”s see an example on the usage of the classes .visually-hidden and .visually-hidden-focusable: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Helper – Visually hidden</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> <h4>Visually hidden</h4><br><br> <h4 class=”visually-hidden”>Hidden title for screen readers</h4> <a class=”visually-hidden-focusable” href=”#content”>Skip to home page</a> <div class=”visually-hidden-focusable”>A container with an <a href=”#”>element that is focusable</a>.</div> </body> </html> Print Page Previous Next Advertisements ”;