Iqra Technology

BS offCanvas

❮ Previous Next ❯ Bootstrap Off-canvas Off-canvas is a sliding panel that appears from any side of the screen (left, right, top, bottom). It is mainly used for:• Side menus• Notifications• Additional content in a small area Basic Setup <!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><title>Bootstrap Offcanvas Example</title><link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”></head><body> <!– OFFCANVAS EXAMPLES WILL GO HERE –> <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js”></script></body></html> […]

BS offCanvas Read More »

BS Scrollspy

❮ Previous Next ❯ Bootstrap Scrollspy Scrollspy is a Bootstrap plugin that automatically highlights navigation links as you scroll to different sections on a webpage.  It is beneficial for one-page websites or long pages with multiple sections.  How Scrollspy Works? • Scrollspy watches your scrolling. • When you scroll to a section (like #about or

BS Scrollspy Read More »

BS Toast

❮ Previous Next ❯ Bootstrap Toast A Toast is a small notification box in Bootstrap that pops up temporarily on the screen. It is used to show simple messages like “Task Completed” or “Settings Saved”. It does not block user interaction. It simply informs the user. It does not block user interaction. It simply informs the

BS Toast Read More »

BS Popover

❮ Previous Next ❯ Bootstrap Popover The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content. Tip: Plugins can be included individually (using Bootstrap’s individual “popover. 1. Basic Popover Example Example: <!DOCTYPE html><html lang=”en”><head><meta

BS Popover Read More »

BS Panels

❮ Previous Next ❯ Bootstrap Panels Bootstrap 5 Panels are content containers that are flexible and expandable, allowing a wide range of content, contextual backdrop colors, and elegant display choices. Panels are like cards, however, they don’t have any media. 1. Basic Panel Example Code: <!DOCTYPE html><html><head><title>Basic Panel</title><link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”></head><body> <div><div>Panel Heading</div><div>Panel content goes here.</div></div> </body></html>

BS Panels Read More »

BS Tooltip

❮ Previous Next ❯ Bootstrap Tooltip A tooltip is a small message that appears when you hover, focus, or tap on an element (like a button or link). It helps users understand more about something without showing extra text on the screen. 1. Basic Tooltip Example Code: <!DOCTYPE html><html lang=”en”><head><title>Basic Tooltip</title><link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css”><script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script><script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js”></script></head><body>

BS Tooltip Read More »