Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • BS5 Tutorial
  • BS5 Interview Questions
  • BS5 Layout
  • BS5 Content
  • BS5 Components
  • BS5 Helpers
  • BS5 Utilities
  • BS4 Tutorial
  • BS Tutorial
  • Bootstrap Cheatsheet
  • Tailwind
  • CSS Frameworks
  • HTML Formatter
Open In App
Next Article:
Bootstrap 5 Progress Background
Next article icon

Bootstrap 5 Offcanvas Usage Methods

Last Updated : 31 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Bootstrap 5 Offcanvas methods are used to control the visibility of the offcanvas element, manually. For example, they can be used to show, hide, or toggle the Offcanvas element manually.

Bootstrap 5 Offcanvas Usage Methods:

  • toggle: It is used to toggle an offcanvas element’s visibility. 
  • show: It is used to manually show an offcanvas element.
  • hide: It is used to manually hide an offcanvas element.
  • getInstance: It is used to get the instance of an offcanvas element.
  • getOrCreateInstance: It is used to get the instance of an offcanvas element, if an offcanvas element existed, or create one if it wasn’t initialized. 

Syntax:

offcanvas.offcanvas_method()

Example 1: In this example, we will use “show” and “hide” offcanvas methods to show and hide the offcanvas element manually, with the click of buttons.

HTML 
<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"            rel="stylesheet"            integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"            crossorigin="anonymous">     <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"              integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"              crossorigin="anonymous">     </script> </head>  <body class="m-2">     <h1 class="text-success">GeeksforGeeks</h1>     <strong>Bootstrap 5 Offcanvas Usage Methods</strong>     <br>     <button id="show" class="btn btn-success" type="button">         Show offcanvas     </button>      <div class="offcanvas offcanvas-start"           tabindex="-1"           id="myOffcanvas"           aria-labelledby="offcanvasExampleLabel">         <div class="offcanvas-header">             <h5 class="offcanvas-title"                 id="offcanvasExampleLabel">                 GFG Offcanvas             </h5>             <button id="hide" class="btn btn-success"                      type="button">                 Hide offcanvas             </button>         </div>         <div class="offcanvas-body">             Welcome to offcanvas GFG!!         </div>          <script>             const myOffcanvas = document.getElementById('myOffcanvas')             const bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)             const showBtn = document.getElementById('show')             const hideBtn = document.getElementById('hide')                          showBtn.addEventListener('click', () => {                 bsOffcanvas.show()             })                          hideBtn.addEventListener('click', () => {                 bsOffcanvas.hide()             })         </script>     </div> </body>  </html>

Output:

https://media.geeksforgeeks.org/wp-content/uploads/20240726143531/video27.webm

Example 2: In this example, we will use the “toggle” Offcanvas method to toggle (show/hide) the offcanvas element’s visibility, manually, with the click of buttons.

HTML 
<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"            rel="stylesheet"            integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"            crossorigin="anonymous">     <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"              integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"              crossorigin="anonymous">     </script> </head>  <body class="m-2">     <h1 class="text-success">         GeeksforGeeks     </h1>     <br>     <strong>Bootstrap 5 Offcanvas Usage Methods</strong>     <button id="toggle1" class="btn btn-success" type="button">         Toggle offcanvas     </button>      <div class="offcanvas offcanvas-start"           tabindex="-1"           id="myOffcanvas"           aria-labelledby="offcanvasExampleLabel">         <div class="offcanvas-header">             <h5 class="offcanvas-title"                 id="offcanvasExampleLabel">                 GFG Offcanvas             </h5>             <button id="toggle2" class="btn btn-success"                     type="button">                 Toggle offcanvas             </button>         </div>         <div class="offcanvas-body">             Welcome to offcanvas GFG!!         </div>          <script>             const myOffcanvas = document.getElementById('myOffcanvas')             const bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)             const toggleBtn1 = document.getElementById('toggle1')             const toggleBtn2 = document.getElementById('toggle2')                          toggleBtn1.addEventListener('click', () => {                 bsOffcanvas.toggle()             })                          toggleBtn2.addEventListener('click', () => {                 bsOffcanvas.toggle()             })         </script>     </div> </body>  </html>

Output:

https://media.geeksforgeeks.org/wp-content/uploads/20240726143644/video28.webm

Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#methods



Next Article
Bootstrap 5 Progress Background

D
dishebhbhayana
Improve
Article Tags :
  • Bootstrap
  • Technical Scripter
  • Web Technologies
  • Bootstrap-5
  • Technical Scripter 2022

Similar Reads

    Accordion Component

    • Bootstrap 5 Accordion
      Bootstrap 5 Accordion organizes content into collapsible panels, enabling space-efficient presentation of information. It allows users to toggle between panel visibility, enhancing user experience, and content organization within web applications. iframe { width: 100%; height: 500px;} @media (max-wi
      3 min read
    • Bootstrap 5 Accordion Flush
      Bootstrap 5 Accordion Flush is a type of accordion who are more edge-to-edge with the parent container. Also, it reduces the rounding of the corners and removes the borders & background color. This setting makes the accordion blend into its parent container. Bootstrap 5 Accordion Flush Class: accord
      3 min read
    • Bootstrap 5 Accordion Always Open
      Bootstrap 5 Accordion Always open is used to change the default value of Accordion and change it to always-open accordion where if a tab of it is open then it will stay open until it is toggled to close by eliminating the data-bs-parent attribute with each accordion tab with the .accordion-collapse
      4 min read
    • Bootstrap 5 Accordion SASS
      Bootstrap 5 Accordion SASS can be used to change the default values provided for the accordion by customizing scss file of bootstrap5. SASS variables of Accordion:$accordion-padding-y: This variable provides the top padding and bottom padding of the accordion body and accordion button. By default, i
      7 min read

    Badges Component

    • Bootstrap 5 Badges
      Bootstrap 5 Badges are small components used to highlight specific information, typically in lists or inline with other content. They provide visual cues through colored backgrounds and customizable text, helping to draw attention to key details or status indicators within a webpage or application.
      2 min read
    • Bootstrap 5 Badge Headings
      Badge headings can be used to label the latest information about the headings. The size of badges scales in accordance with the heading size. It just matches the size of the parent element (uses relative units). So, you can directly use the badge class inside any tag (like span) whose parent is the
      2 min read
    • Bootstrap 5 Badges Buttons
      Bootstrap 5 comes with a Badges component which shows the additional, latest information and labels to any element. Along with the normal sentences, Badges can be implemented inside the button element also, to show any link or notification counter. In this article, we will see the use of Badges on B
      2 min read
    • Bootstrap 5 Badges Background colors
      Bootstrap 5 Badges Background colors provide different utility classes for backgrounds that help to enhance the appearance of a badge. The default background of any badge is ".bg-light", which can be used with text color utility, like .text-dark class, which helps to enhance its styling. Badges Back
      3 min read
    • Bootstrap 5 Badges Pill Badges
      Bootstrap 5 Badges Pill badges can be made by using the rounded-pill class on the badge component. This is used to give the badges a rounded corner shape. Bootstrap 5 Badges Pill badge Class: rounded-pill: This class is used with the badge class to make badges pill-shaped. Syntax: <span class="ro
      2 min read
    • Bootstrap 5 Badges SASS
      Bootstrap5 Badges SASS is used to change the default value of badge's font size, font color, padding, border radius, and font-weight. SASS variables of Badge:$badge-font-size: This variable provides the font size of the badge. By default, it is 0.75em.$badge-font-weight: The variable provides the fo
      3 min read

    Breadcrumb Component

    • Bootstrap Breadcrumb
      Bootstrap 5 Breadcrumb simplifies website navigation by displaying a sequential path to the current page. It enhances user experience by visually indicating the hierarchical structure of the site, facilitating easy navigation as per Bootstrap 5 documentation. Bootstrap 5 Breadcrumb TermDescriptionBr
      2 min read
    • Bootstrap 5 Breadcrumb Dividers
      Bootstrap 5 Breadcrumb Dividers are created using the content property of the "::before" element. To customize the bootstrap 5 breadcrumb divider, the --bs-breadcrumb-divider custom CSS property or the $breadcrumb-divider and $breadcrumb-divider-flipped Sass variables can be used. A custom SVG can a
      2 min read
    • Bootstrap 5 Breadcrumb Variables
      Bootstrap 5 Breadcrumb SASS variables can be used to change the default values provided for the breadcrumb by customizing scss file of Bootstrap5. SASS variables of Breadcrumb: $breadcrumb-font-size: This variable provides the font size of the breadcrumb item. By default, it is null.$breadcrumb-padd
      4 min read

    Button group Component

    • Bootstrap 5 Button group Mixed styles
      Bootstrap 5 Button group is a component that helps to combine the buttons in a series in a single line. In button group mixed styles, we can create a button group with different background colors. Button group Mixed styles used Classes: .btn-group: This class is used to group a series of buttons tog
      2 min read
    • Bootstrap 5 Button group Outlined styles
      Button group is a component provided by Bootstrap 5 which helps to combine the buttons in a series in a single line. For the Button group outlined style, we will create a div element with class .btn-group and inside the div element, we will create button elements. Bootstrap 5 provides a series of cl
      3 min read
    • Bootstrap 5 Checkbox and radio button groups
      Bootstrap5 checkbox and radio button group provide to combine the button, such as checkbox and radio toggle buttons in a button group, by implementing the .btn-group class. Checkbox and Radio Button Group Classes: .btn-group: This class is used to combine buttons..btn-check: This class is used to cr
      2 min read
    • Bootstrap 5 Button Group Buttons toolbar
      Button Group Buttons toolbar components are used to create a toolbar of Button groups. It combines the sets of buttons in a group of button toolbars for complex components. Pre-requisite: Bootstrap 5 Button Group to create a group of buttons. Button Group Buttons toolbar Class: btn-toolbar: This cla
      2 min read
    • Bootstrap 5 Button Group Sizing
      Bootstrap 5 provides different classes that allow changing button group sizes. Instead of using button sizing classes to every button element in a group, we can just add .btn-group-* class to set the button size in a button group. Button Group Sizing Classes: .btn-group-lg: This class is used to cre
      4 min read
    • Bootstrap 5 Button group Nesting
      Bootstrap 5 Button group nesting is used to create a dropdown menu mixed with a series of buttons. To make the button group nesting, we will use .btn-group class. Button group nesting used Class: .btn-group: This class is used to create a button group nesting in a dropdown menu. Syntax: <div clas
      2 min read
    • Bootstrap 5 Button group Vertical variation
      The vertical group variation is used to stack the button group vertically rather than horizontally. To make the vertical variation of the button group, we will use .btn-group-vertical class. Vertical variation Class: .btn-group-vertical: This class is used to create a button group vertically. Syntax
      3 min read

    Close button Component

    • Bootstrap 5 Close button Disabled state
      Bootstrap 5 Close button Disabled state is used to disable the close button for dismissing content like modals and alerts. The disabled close button changes the opacity and removes the pointer cursor on hovering. Close Button Disabled State used Attribute: disabled: The disabled attribute is used to
      2 min read
    • Bootstrap 5 Close button White variant
      Bootstrap 5 Close button is used to add more user access and enhance user experience to a website and its components. Generally, the default version of this button is dark/black and it goes universally with all the colors except the dark/black colored background or component which goes well and look
      2 min read
    • Bootstrap 5 Close Button SASS
      Bootstrap 5 Close button SASS can be used to change the default values provided for the close button by customizing scss file of bootstrap 5. SASS variables of Close button:$btn-close-width: This variable provides the width of the close button. By default, it is 1em.$btn-close-height: This variable
      5 min read

    Collapse Component

    • Bootstrap 5 Collapse Multiple Targets
      Bootstrap 5 Collapse multiple targets can be used to show or hide multiple elements by assigning them a common group and using a single <button> or <a> tag to hide/show them. We can achieve this by assigning the common class in the data-bs-target attribute of the button or link. Bootstra
      3 min read
    • Bootstrap 5 Collapse SASS
      Bootstrap5 Collapse SASS can be used to change the default value of transition duration and transition timing of the height property collapsible component. SASS variables of Collapse:$transition-collapse: This variable provides the transition duration and the transition timing function in which the
      3 min read
    • Bootstrap 5 Collapse Usage
      Bootstrap 5 Collapse is a component used to create collapsible content panels. It allows you to hide and show content on demand. Collapse is useful when you have a lot of content on a page and need to display it in a more organized manner. You can refer here for further details about Bootstrap 5 Col
      3 min read
    • Bootstrap 5 Collapse Via data Attributes
      Bootstrap 5 Collapse can also be controlled by using the data attributes. Set the data-bs-toggle attribute of the element to "collapse" and the data-bs-target to the selector of the collapsible element(s). The collapse class must be added to the collapsible element and if you want to keep the collap
      3 min read
    • Bootstrap 5 Collapse Via JavaScript
      Bootstrap 5 Collapse can be triggered using two ways using data attributes and using JavaScript. For using it with JavaScript, a new Bootstrap collapse object needs to be created. The show() and hide() predefined methods to attain basic handling of the collapse element via JavaScript. Prerequisite:
      3 min read
    • Bootstrap 5 Collapse Options
      Bootstrap5 collapse options are used to group the collapsible elements under a single parent. It can be done by extending the data attributes with the option name along with "data-" for example data-bs-parent="". Bootstrap 5 Collapse Options Attributes: data-bs-parent : If we have a multiple collaps
      2 min read
    • Bootstrap 5 Collapse Methods
      Bootstrap 5 Collapse Methods are used to control the visibility of a Bootstrap 5 Collapse element, manually. Bootstrap 5 Collapse Methods: toggle: It is used to toggle the visibility of a collapsible element. show: It is used to show a collapsible element. hide: It is used to hide a collapsible elem
      3 min read
    • Bootstrap 5 Collapse Events
      In this article, we will learn about the Bootstrap 5 Collapse Events fired when interacting with the Bootstrap 5 Collapse element. Bootstrap 5 Collapse component is useful for toggling the visibility of a particular content on a webpage. Bootstrap 5 Collapse Eventsshow.bs.collapse: It is fired as so
      2 min read

    Offcanvas Component

    • Bootstrap 5 Offcanvas Components
      Bootstrap 5 Offcanvas components are the different parts that merge to create an offcanvas sidebar. The components which constitute an offcanvas are a header with a close button and a body section which is optional and we can also add some action buttons on the footer section which are optional too.
      3 min read
    • Bootstrap 5 Offcanvas Live Demo
      Bootstrap 5 Offcanvas live demo of Offcanvas can be implemented using a link with href attribute or button with data-bs-target attribute by applying javascript to the element. JavaScript that toggles the .show class on an element with the .offcanvas class. offcanvas hides the content (default)offcan
      3 min read
    • Bootstrap 5 Offcanvas Placement
      Bootstrap 5 Offcanvas Placement has four directions from which the carousel can pop out which are left(default), top, bottom, and right. There are helper classes provided that can help us set the direction of the offcanvas. Bootstrap 5 Offcanvas Placement Classes: offcanvas-[start/top/right/bottom]:
      3 min read
    • Bootstrap 5 Offcanvas Backdrop
      Bootstrap 5 Offcanvas Backdrop is the greyish translucent cover that is all over the background which is shown when the off-canvas opens. There are three settings in which we can use an offcanvas, the default one is the offcanvas with the backdrop and no body scrolling. The two others are the one wi
      3 min read
    • Bootstrap 5 Offcanvas SASS
      Bootstrap 5 Offcanvas SASS can be used to change the default values provided for the Offcanvas by customizing scss file of bootstrap5. SASS variables of Offcanvas: $offcanvas-color: This variable provides the color of the text on the offcanvas. By default, it is null.$offcanvas-bg-color: This variab
      4 min read
    • Bootstrap 5 Offcanvas Usage Options
      Bootstrap 5 Offcanvas Usage Options are employed to manually regulate the off-canvas element's display. Bootstrap 5 Offcanvas can be triggered using data attributes and JavaScript. Bootstrap 5 Offcanvas Usage Options Attribute: data-bs-*: Options should be passed as data attributes in the off-canvas
      4 min read
    • Bootstrap 5 Offcanvas Usage Via Data Attributes
      An Offcanvas can be triggered or used using two ways using data attributes and using JavaScript. The data-attributes approach needs two attributes. These data attributes are added to the anchor link or button which is used to trigger the off-canvas. Offcanvas class is added to the div which is the o
      2 min read
    • Bootstrap 5 Offcanvas Usage Via JavaScript
      Bootstrap 5 Offcanvas can be triggered or used using two ways using data attributes and using JavaScript. For using it with JavaScript we need to add a function and use the predefined show() method to trigger the off-canvas from a button or link. PrerequisiteBootstrap 5 Offcanvas UsageBootstrap 5 of
      3 min read
    • Bootstrap 5 Offcanvas Usage Methods
      Bootstrap 5 Offcanvas methods are used to control the visibility of the offcanvas element, manually. For example, they can be used to show, hide, or toggle the Offcanvas element manually. Bootstrap 5 Offcanvas Usage Methods: toggle: It is used to toggle an offcanvas element's visibility. show: It is
      2 min read
    • Bootstrap 5 Offcanvas Usage Events
      Bootstrap 5 Offcanvas Events fired when interacting with the Bootstrap 5 offcanvas. For example, these events are fired when an off-canvas element is toggled to be visible or hidden. Bootstrap 5 Offcanvas Usage Events: show.bs.offcanvas: It is fired when the show instance method of the dropdown is c
      2 min read

    Progress Component

    • Bootstrap 5 Progress Height
      Bootstrap 5 Progress Height is used to set the height of the progress bar. To set the height of the progress bar, we will set the height property value of .progress class. Progress Height Used Class: .progress: It is the wrapper that indicates the max value of the progress bar..progress-bar: It is u
      2 min read
    • Bootstrap 5 Progress Background
      The Bootstrap 5 Progress is used to show the progress of a task to the user. A progress bar displays how much your process progressed or is completed and left. We can use background utility classes to change the appearance of progress bars. Prerequisite: Bootstrap 5 Progress component to create, sta
      2 min read
    • Bootstrap 5 Progress Multiple bars
      Bootstrap 5 Progress Multiple bars is used to put multiple bars in a single progress bar you can include multiple progress bars in a progress component giving them different colors and styling using bootstrap 5 classes. Bootstrap 5 Progress Multiple bars Class: There is no class to create multiple p
      2 min read
    • Bootstrap 5 Progress Striped
      The Bootstrap 5 progress bar is used to show the progress of a task to the user. A progress bar displays how much your process progressed or is completed and left. The Progress Striped is used to change the appearance of the progress bar to striped. Progress Striped Class: .progress-bar-striped: Thi
      2 min read
    • Bootstrap 5 Progress Animated stripes
      Bootstrap 5 Progress Animated stripes are used to make the stripes progress bar animated. To make a progress bar you need to use the Progress bar classes and to make it striped use the Progress Bar Striped classes. Pre-requisite: Bootstrap 5 Progress and Bootstrap 5 Striped Progress Bars. Bootstrap
      2 min read
    • Bootstrap 5 Progress SASS
      Bootstrap 5 Progress SASS has a set of variables with default values and keyframes which are used to create CSS animations for the progress bars. Bootstrap 5 Progress Sass: Variables: $progress-height, $progress-bg, $progress-border-radius, etc variables are used to customize the progress bars. You
      3 min read

    Scrollspy Component

    • Bootstrap 5 Scrollspy with nested nav
      Bootstrap 5 Scrollspy is one of the features which targets the navigation bar contents automatically on scrolling the area. The navigation highlights the navbar links as the user scrolls the page. Only nav or list groups may be utilized with Scrollspy. Scrollspy can work with a simple navbar and als
      4 min read
    • Bootstrap 5 Scrollspy with list-group
      Bootstrap 5, Bootstrap Scrollspy is a feature that automatically updates navigation links based on scroll position. It's particularly useful for long content-heavy pages where we want to keep the user informed about their current section in the document. Bootstrap 5 Scrollspy with list-group classes
      4 min read
    • Bootstrap 5 Scrollspy Via data Attributes
      Bootstrap 5 Scrollspy Via data attributes facilitate adding the scrollspy behavior in the navigation. This will only work if we add the data-bs-spy attribute to the element that is to spy, along with including the data-bs-target attribute, specifying the id or class name of the parent element of the
      6 min read
    • How to use Scrollspy in Bootstrap 5 via JavaScript ?
      In this article, we will see how to use Scrollspy in Bootstrap 5 via Javascript. Using Scrollspy in Bootstrap 5, the navigation or list group components of Bootstrap update automatically based on where the user is scrolling to indicate which link is currently active in the viewport. There are 2 ways
      6 min read
    • Bootstrap 5 Scrollspy Methods
      Bootstrap5 Scrollspy Methods are used to control the Scrollspy element with the help of Javascript and perform operations like disposing, getting or creating the Scrollspy instance, refreshing the element, etc along with finding out useful data about the widget within Javascript. It is used in autom
      7 min read
    • Bootstrap 5 Scrollspy refresh() Method
      Bootstrap 5 Scrollspy provides a refresh() method that is invoked while including or discarding the elements in the DOM tree, i.e., it can be manually called to recalculate the active link based on the current scroll position. This method can be used to update the active link whenever the page conte
      6 min read
    • Bootstrap 5 Scrollspy dispose() Method
      Bootstrap 5 Scrollspy dispose() method is used to remove the ScrollSpy functionality from an element. To use the dispose() method, you will need to select the element that the scrollspy is applied to and call the method on it. For example, if you have applied the scrollspy to a navbar with an ID of
      4 min read
    • Bootstrap 5 Scrollspy getInstance() Method
      Bootstrap5 Scrollspy Methods are used to control the Scrollspy element with the help of Javascript and perform operations like disposing of, getting or creating the Scrollspy instance, refreshing the element, etc along with finding out useful data about the widget within Javascript. Bootstrap 5 Scro
      5 min read
    • Bootstrap 5 Scrollspy getOrCreateInstance() Method
      Bootstrap 5 Scrollspy getOrCreateInstance() method is used to obtain the instance of a particular tab of the list group. This method can work even when the instance is not pre-initialized and this method creates an instance. Syntax: var scrollspy-element = document.getElementById("scrollspy-id");var
      6 min read
    • Bootstrap 5 Scrollspy Options
      Bootstrap 5 Scrollspy is an automatic navigation mechanism that automatically updates the scroll position. When we click on the link it automatically scrolls down to the currently active element. Bootstrap 5 Scrollspy Options: Scrollspy options can be through data attributes or via JavaScript code.
      3 min read

    Spinners Component

    • Bootstrap 5 Spinners Border Colors
      Bootstrap 5 Spinner is used to show the loading stage of the component, these spinners are built only with HTML and CSS. The Border Spinner is used for a lightweight loading indicator. There are various colors of spinners provided by Bootstrap 5 spinners. Spinner Border Colors Classes: spinner-borde
      2 min read
    • Bootstrap 5 Spinners Growing
      Bootstrap 5 Spinner is used to show the loading stage of the component, these spinners are built only with HTML and CSS. The Growing Spinner does not technically spin like regular spinners, it repeatedly grows. You can easily change its appearance with color utilities. Bootstrap 5 Spinners Growing C
      2 min read
    • Bootstrap 5 Spinners Alignment
      Bootstrap 5 Spinners Alignment is used to set the alignment of the spinner element. The spinner element can easily be resized, recolored, and quickly aligned. Spinners Alignment: Margin Alignment: Spinner margin is used to create spinners in different margins.Spinners Placement: Spinners Placement i
      2 min read
    • Bootstrap 5 Spinners Margin
      Bootstrap 5 Spinners Margin is used to create spinners in different margins. For margin spinners, we will use .m class with five different sizes from 0 to 5. Also, auto is used for margin auto. For different sides of the margin, we will use t (for top), b (for bottom), s (for start), e (for end), x
      2 min read
    • Bootstrap 5 Spinners Placement
      Bootstrap 5 Spinners Placement is used to set the position of spinners where you want to place them according to the need. It uses three utilities flexbox utilities, float utilities, or text alignment to place the items. Placement Utilities: Flex: It is used to set the position of spinners using fle
      3 min read
    • Bootstrap 5 Spinners Flex Placements
      Bootstrap5 Spinner Flex Placements is a display utility that is used to place the spinner in a flexbox, where the spinner is placed inside the flexbox container using the .d-flex class. Spinners Flex Placements Class: d-flex: This is a flexbox helper class and it is used to have the Flex Placement.S
      2 min read
    • Bootstrap 5 Spinners Floats Placements
      Bootstrap 5 Spinners Float Placements are used to set the position of spinner elements to left, right, or none depending on the requirements. It is mostly used for responsive design. Spinners Floats Placements used Classes: .float-start: It is used to set the position of spinner elements to start..f
      2 min read
    • Bootstrap 5 Spinners Text align Placements
      Bootstrap 5 Spinners Text align placements are used to set the alignment of the spinner component. To set the text alignment of the spinner element, we will use text alignment classes. Spinners Text Align Placements used Classes: .text-start: It is used to set the alignment of the spinner element to
      2 min read
    • Bootstrap 5 Spinners Size
      Bootstrap 5 Spinners Size is used to create spinners in different sizes. For small-size spinners, we will use .spinner-border-sm class, and for small-size grow to shrink spinners, we will use .spinner-grow-sm class. Spinners Size used Classes: .spinner-border-sm: It is used to create small-size spin
      2 min read
    • Bootstrap 5 Spinners Buttons
      Bootstrap 5 Spinners are used to display the loading state of a component or a page. The spinners within buttons are used to represent an action that is currently processing. Spinners Buttons used Classes: .btn: It is used to create a button..spinner-border: It is used to create a spinner with the b
      2 min read
    • Bootstrap 5 Spinners SASS
      Bootstrap 5 Spinners SASS has a set of variables with default values and keyframes which are used to create CSS animations for the spinners. Bootstrap 5 Spinners Sass: Variables: $spinner-height, $spinner-width, $spinner-border-width, etc variables are used to customize the spinners. You can find th
      3 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences