Category: bootstrap

Bootstrap – List groups demo ”; Previous Next What is a list group? List group is a versatile component that allows you to display a list of items in a well-organized and visually appealing manner. List group is often used to present a collection of related content, such as a set of articles, comments, or user profiles. The Bootstrap provides a set of classes that can be used to add and customize the list groups: class description .list-group Applied to the <ul> element to create a list group container .list-group-item Applied to the <li> elements to style them as list group items .list-group-item-action This class makes list group items appear interactive and responsive to user interactions .active This class sets an item active in the list .disabled This class makes an item disabled in the list .list-group-item-{color} Customizes the background color of list group items .list-group-item-{color}-text Customizes the color of the text of list group items .list-group-item-{color}-active Highlights the selected item with the specified background color .list-group-flush Removes the border and border-radius of list group items Some of the examples of list groups is as follows: Example Description Download link List group basic This example shows the structure of a basic list group. Download List group active/disabled item This example shows the structure of a list group showing the active and disabled item. Download List group as link & button This example shows the structure of a list group with links and buttons. Download Numbered list group This example shows the structure of a numbered list group. Download List group with badges This example shows the structure of a list group with badges. Download Horizontal list group This example shows the structure of a horizontal list group. Download List group with radio buttons & checkboxes This example shows the structure of a list group with radio buttons and checkboxes. Download Print Page Previous Next Advertisements ”;

Bootstrap – Modal demo ”; Previous Next What is a modal? A modal in bootstrap is a dialog box/popup window that is displayed on top of the current page. It is used to display important information or ask the user for confirmation before taking a specific action. Modal is a core UI component of bootstrap and can be easily customized using built-in CSS classes and JavaScript methods. class description .modal This is used to define the basic structure of the modal .modal-header This is used to define the header section of the modal .modal-body This is used to define the body section of the modal .modal-footer This is used to define the footer section of the modal .fade This is used to add a fade effect to the modal .modal-dialog This is used to customize the size and position of the modal .modal-content This is used to customize the background color and border of the modal .modal-title This is used to customize the title of the modal .close This is used to add a close button to the modal Some of the examples of the modals are as follows: Example Description Download link Basic static modal This example shows a static modal. Download Scrollable modal This example shows a scrollable modal. Download Modal with static backdrop This example shows a modal with static backdrop. Download Modal with tooltip This example shows a modal with a tooltip. Download Modal with popover This example shows a modal with a popover. Download Modal with grid This example shows a modal with grid. Download Animated modal This example shows a modal with animation. Download Print Page Previous Next Advertisements ”;

Bootstrap – Stretched link ”; Previous Next This chapter discusses about the class .stretched-link provided by Bootstrap. The .stretched-link class in Bootstrap is used to create a link that stretches to fill the entire parent container. This class can be used on any element that can contain a link, such as a <div> or <a> element, to make the entire element clickable and act as a link. Any element with position:relative and contains a link with the .stretched-link class is clickable. The .stretched-link class cannot be mixed with most table elements. This class can be safely added to cards as they have position:relative by default in Bootstrap. Using stretched links with multiple links and tap targets is not advisable. Card with stretched link This is useful for cases where you want to make an entire section of content clickable, such as a card or a list item. Let”s see an example on the usage of the .stretched-link class in a card: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Card</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>Stretched link in a card</h4> <div class=”card” style=”width: 20rem;”> <img src=”/bootstrap/images/tutimg.png” class=”card-img-top” alt=”…”> <div class=”card-body”> <h5 class=”card-title”>Stretched link in a card</h5> <p class=”card-text”>Here is an example that shows the entire card as a link. This is because of the .stretched-link class of Bootstrap.</p> <a href=”#” class=”btn btn-primary stretched-link”>View</a> </div> </div> </body> </html> You need to add the .position-relative class to prevent the link from stretching outside the parent element, when custom components do not have position: relative by default. Let”s see an example on the usage of the .position-relative class: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Helper – Stretched link</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 component with stretched link</h4> <div class=”d-flex position-relative”> <img src=”/bootstrap/images/tutimg.png” class=”flex-shrink-0 me-3″ alt=”…”> <div> <h5 class=”mt-0″>Custom component with stretched link using .position-relative</h5> <p>Here is an example showing the use of .position-relative class in a component that shows a stretched link usage.</p> <a href=”#” class=”stretched-link”>View</a> </div> </div> </body> </html> Let”s see one more example of the usage of the .position-relative class: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Helper – Stretched link</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>Columns with stretched link</h4> <div class=”row g-0 bg-body-secondary position-relative”> <div class=”col-md-4 mb-md-0 p-md-4″> <img src=”/bootstrap/images/tutimg.png” class=”w-100″ alt=”…”> </div> <div class=”col-md-4 p-4 ps-md-0″> <h5 class=”mt-0″>Columns with stretched link</h5> <p>Another example of strecthed link with .position-relative on this other custom component. You can use it here to give the component a bit of body and size.</p> <a href=”#” class=”stretched-link”>View</a> </div> </div> </body> </html> Print Page Previous Next Advertisements ”;

Bootstrap – Sign in Demo ”; Previous Next Overview The basic sign-in form layout provides a simple and user-friendly interface for users to log in to the website or application. This form includes inputs such as email and password. The <form> tag is used to create a sign-in page. The provided link shows an example of how to create a sign in form using Bootstrap features: Example Description Download link Sign in page This example indicates about sign in page in Bootstrap Download Print Page Previous Next Advertisements ”;

Bootstrap – Navigation Demo ”; Previous Next What is a navbar? The Bootstrap navbar is a responsive navigation header at the top of a webpage. It can expand or collapse based on the screen size, providing a user-friendly navigation experience for websites. Bootstrap provides built-in CSS classes to create a standard navigation bar. The .navbar class is used to create a navigation bar component. The .navbar-brand class represents the brand or logo of the website or application. The .navbar-collapse class makes the navigation menu collapse into a dropdown or toggle button. The .navbar-nav class is used to create a horizontal navigation menu with multiple navigation links or items. The .nav-item class should be applied to each list item (<li>) within the navigation bar. The .nav-link class is used to styled anchor tags (<a>) within a navigation component. Some of the examples of the navbars are as follows. Example Description Download link Basic navbar This example shows the basic structure of navbar in Bootstrap. Download Navbars offcanvas This example shows the use of offcanvas navbars within a responsive web design. Download Navbar static This example shows the implementation of a static navbar fixed in its position on a webpage. Download Navbar fixed This example shows the navigation bar fixed to the top of the viewport (fixed-top). Download Navbar bottom This example shows navigation bar has a fixed position at the bottom of the page. Download Offcanvas navbar This example shows a navbar that can be expanded into sliding offcanvas menu. Download Print Page Previous Next Advertisements ”;

Bootstrap – Checkout RTL Demo ”; Previous Next Overview RTL stands for “Right-to-Left,” and it refers to a writing direction. Some of the languages include Arabic, Hebrew, Persian, and Urdu. In RTL writing systems, text and content are read from right to left, opposite to the usual left-to-right direction used in languages like English. Refer the page RTL, to know more about it. Bootstrap provides checkout form with RTL, that displays form elements and its validation features. It is summarized in the following table − Example Description Download link Checkout RTL This example indicates about checkout with RTL in Bootstrap Download Print Page Previous Next Advertisements ”;

Bootstrap – Visibility ”; Previous Next This chapter discusses about the visibilty utilities provided by Bootstrap. These utiltiy classes control the visibility of elements, without altering the display of the element. Following are the visibility classes provided by Bootstrap: .visible – It is the default setting. The visible class shows data or visible data on the web page. .invisible – It is used to hide or disappear the content of the application. The .invisible class will hide the elements both visually and for the assistive technology or screen reader users. Let us see an example for the utility classes .visible and .invisible: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Visibility</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-2″> <h4 class=”display-5 text-success”> Visibility utility classes </h4> </div> <div class=”container mx-5 p-3″> <strong>The utility classes that controls the visibility of the content on the webpage.</strong> <p class=”visible text-bg-primary”> The text on the webpage is visible due to the use of visibility class “.visible”. </p> <p class=”invisible”> The text on the webpage is not visible due to the use of visibility class “.invisible”. </p> <p class=”text-bg-warning”>This is the text that is without a visibility class usage.</p> </div> </body> </html> Print Page Previous Next Advertisements ”;

Bootstrap – Text truncation ”; Previous Next This chapter discusses about the utility provided by Bootstrap that helps in truncating long strings of text. Text truncation is a feature that allows you to truncate long strings of text that overflow their container, and display an ellipsis (…) at the end of the truncated text to indicate that more text is available. This can be useful for situations where you have limited space to display text, such as in a table or card. To truncate text in Bootstrap 5, you can use the .text-truncate class. It requires display: inline-block or display: block. This class can be added to any element that contains text, such as a <div> or a <p> element. Here”s an example of how to use the .text-truncate class: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Helper – Text truncation</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>Text truncation example</h4> <!– Block level –> <div class=”row”> <div class=”col-3 text-truncate”> The string of text seems to be very long, thus truncating it. </div> </div> <!– Inline level –> <span class=”d-inline-block text-truncate” style=”max-width: 150px;”> The string of text seems to be very long, thus truncating it. </span> </body> </html> Print Page Previous Next Advertisements ”;

Bootstrap – Sizing ”; Previous Next This chapter discusses about Bootstrap sizing. Sizing allows you to adjust the height and width of an element through the utility classes. Relative to the parent The width and height utilities are created using the utility API found in _utilities.scss. They come with default support for values like 25%, 50%, 75%, 100%, and auto. You can customize these values to generate different utilities. Relative to the width The w-25, w-50, w-75, w-100, and w-auto classes define the width of each div element. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Sizing</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=”w-25 p-3 text-bg-primary”>25% width</div> <div class=”w-50 p-3 text-bg-secondary”>50% width</div> <div class=”w-75 p-3 text-bg-warning”>75% width</div> <div class=”w-100 p-3 text-bg-info”>Full width (100%)</div> <div class=”w-auto p-3 text-bg-danger”>Auto width</div> </body> </html> Relative to the height The classes h-25, h-50, h-75, h-100, and h-auto are responsible for setting the height of each div element. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Sizing</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-bg-light” style=”height: 100px;”> <div class=”h-25 d-inline-block text-bg-primary text-center” style=”width: 150px;”>25% Height</div> <div class=”h-50 d-inline-block text-bg-secondary text-center” style=”width: 150px;”>50% Height</div> <div class=”h-75 d-inline-block bg-warning text-center” style=”width: 150px;”>75% Height</div> <div class=”h-100 d-inline-block text-bg-info text-center” style=”width: 150px;”>100% Height </div> <div class=”h-auto d-inline-block text-bg-danger text-center” style=”width: 150px;”>Auto Height</div> </div> </body> </html> Use class mw-100 to set the max-width: 100%. In the following example, we demonstrate the use of this class: Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Sizing</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-bg-light” style=”width: 50%; height: 100px;”> <div class=”mw-100 text-bg-warning text-center” style=”width: 200%;”>Maximum width 100%</div> </div> </body> </html> Use class mh-100 to set the max-height: 100%. In the following example, we demonstrate the use of this class: Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Sizing</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-bg-light” style=”height: 100px;”> <div class=”mh-100 text-bg-warning” style=”width: 100px; height: 200px;”>Maximum height 100%</div> </div> </body> </html> Relative to the viewport It is possible to modify the width and height of elements relative to the viewport. min-vw-100 – sets a minimum width of 100 viewport width. min-vh-100 – sets a minimum height of 100 viewport height. vw-100 – sets the width of the element to be exactly 100 viewport width. vh-100 – sets the height of the element to be exactly 100 viewport height. Example You can edit and try running this code using Edit & Run option. <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap – Sizing</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 text-bg-light” > <div class=”min-vw-100 text-bg-primary p-3 my-2 d-inline-block”>Minimum width (min-vw-100)</div> <div class=”vw-100 text-bg-warning p-3 my-2 d-inline-block”>Width (vw-100)</div> <div class=”min-vh-100 text-bg-secondary p-3 mx-2 d-inline-block “>Minium height (min-vh-100)</div> <div class=”vh-100 text-bg-danger p-3 mx-2 d-inline-block”>Height (vh-100)</div> </div> </body> </html> Print Page Previous Next Advertisements ”;

Bootstrap – Shadows ”; Previous Next This chapter discusses about the box-shadow utilities. Bootstrap provides a set of CSS classes that allows you to apply different types of box shadows to elements. The predefined classes available are as follows: Class Description .shadow-none No shadow effect. .shadow-sm Adds a small and subtle shadow effect. .shadow Applies a medium strength shadow effect. .shadow-lg Applies a large and prominent shadow effect. 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 – Shadows</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>Shadow effect</h4> <div><button class=”btn shadow-none”>Button with no shadow</button></div> <div><button class=”btn shadow”>Button with a subtle shadow</button></div> <div><button class=”btn shadow-sm”>Button with a regular shadow</button></div> <div><button class=”btn shadow-lg”>Button with a larger shadow</button></div> </div> </body> </html> Print Page Previous Next Advertisements ”;