Bootstrap | Spinners Set-2 Last Updated : 28 Apr, 2022 Comments Improve Suggest changes Like Article Like Report Bootstrap provides us with various classes for creating different styles of the spinner to indicate the loading state. We can also modify the appearance, size, and placement of the spinners with the classes provided by Bootstrap. Buttons with border spinner: We can place the border spinner within the button by using the spinner-border class within a <span> tag which is in turn nested inside a <button> tag having Bootstrap Button classes as given below. HTML <!DOCTYPE html> <html> <head> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity= "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <title>Bootstrap | Spinner</title> <style> h1 { color: green; text-align: center; } div { margin-top: 10px; } </style> </head> <body> <div class="container"> <h1>GeeksForGeeks</h1> <button type="button" class="btn btn-secondary" disabled> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="sr-only">Loading</span> </button> <button type="button" class="btn btn-primary" disabled> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Processing... </button> </div> </body> </html> Note: We have placed "disabled" attribute within the <button> tag to deactivate it and used "role" and "aria-hidden" attributes within <span> tag for accessibility purposes. Output: Buttons with growing spinner: We can place the growing spinner within the button by using the spinner-grow class within a <span> tag which is in turn nested inside a <button> tag having Bootstrap Button classes as given below. Changing the size: Using class: We can make the spinner smaller using the classes spinner-border-sm and spinner-grow-sm along with the spinner-border and spinner-grow classes, respectively, as given below. HTML <!DOCTYPE html> <html> <head> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity= "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <title>Bootstrap | Spinner</title> <style> h1 { color: green; text-align: center; } div { margin-top: 10px; } </style> </head> <body> <div class="container"> <h1>GeeksForGeeks</h1> <!-- spinner-border-sm --> <div class="spinner-border text-primary spinner-border-sm" role="status"> <span class="sr-only">Loading</span> </div> <!-- spinner-grow-sm --> <div class="spinner-grow text-primary spinner-grow-sm" role="status"> <span class="sr-only">Loading</span> </div> </div> </body> </html> Output: Using CSS: We can also change the size of the spinner using CSS styling as given below. HTML <!DOCTYPE html> <html> <head> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity= "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <title>Bootstrap | Spinner</title> <style> h1 { color: green; text-align: center; } div { margin-top: 10px; } </style> </head> <body> <div class="container"> <h1>GeeksForGeeks</h1> <div class="spinner-border text-primary" role="status" style="height:5rem; width:5rem;"> <span class="sr-only">Loading</span> </div> <div class="spinner-grow text-primary" role="status" style="height:5rem; width:5rem;"> <span class="sr-only">Loading</span> </div> </div> </body> </html> Output: Changing the alignment: Using text alignment utilities: We can change the alignment of the spinner by placing it inside the <div> tag which uses the text alignment utility class to control the alignment of children elements as given below. HTML <!DOCTYPE html> <html> <head> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity= "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <title>Bootstrap | Spinner</title> <style> h1 { color: green; text-align: center; } div { margin-top: 10px; } </style> </head> <body> <div class="container"> <h1>GeeksForGeeks</h1> <!-- Changing alignment using text utilities class --> <div class="text-center"> <div class="spinner-border text-primary" role="status"> <span class="sr-only">Loading</span> </div> </div> </div> </body> </html> Output: Using float utilities: We can change the alignment of the spinner by placing it inside the <div> tag which uses the float utility class to control the alignment of children elements or use the float utility class directly within the <div> tag through which spinner is created as given below. HTML <!DOCTYPE html> <html> <head> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity= "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <title>Bootstrap | Spinner</title> <style> h1 { color: green; text-align: center; } div { margin-top: 10px; } </style> </head> <body> <div class="container"> <h1>GeeksForGeeks</h1> <!-- Changing alignment using text utilities class --> <div class="clearfix float-right"> <div class="spinner-border text-primary" role="status"> <span class="sr-only">Loading</span> </div> </div> </div> </body> </html> Output: Using flexbox utilities: We can change the alignment of the spinner by placing it inside the <div> tag which uses the flexbox utility class to control the alignment of children elements as given below. HTML <!DOCTYPE html> <html> <head> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity= "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <title>Bootstrap | Spinner</title> <style> h1 { color: green; text-align: center; } div { margin-top: 10px; } </style> </head> <body> <div class="container"> <h1>GeeksForGeeks</h1> <!-- Changing alignment using text utilities class --> <div class="d-flex justify-content-center"> <div class="spinner-border text-primary" role="status"> <span class="sr-only">Loading</span> </div> </div> </div> </body> </html> Output: Supported Browser: Google ChromeMicrosoft EdgeFirefoxOperaSafari Comment More infoAdvertise with us H Husban Follow Improve Article Tags : Web Technologies Bootstrap Similar Reads Bootstrap DropDowns and Responsive Tabs Introduction and InstallationGrid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsProgress Bar and Jumbotron Dropdown Menu Using Bootstrap: In bootstrap, dropdowns are created using the class="dropdown". What we will do is create a button and then convert the button in 3 min read Bootstrap Progress Bar and Jumbotron BootStrap articles : Introduction and Installation Grid System Buttons, Glyphicons, Tables Vertical Forms, Horizontal Forms, Inline Forms DropDowns and Responsive Tabs Progress Bar We all have seen a progress bar while executing some process in our computer. A progress bar shows how much of the proc 2 min read Bootstrap Alerts , Wells, Pagination and Pager Introduction and InstallationGrid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and Jumbotron Alerts: We often see certain alerts on some websites before or after completing an action. These alert messages are highlighted tex 4 min read Bootstrap Badges, Labels, Page Headers Introduction and InstallationButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and Jumbotron Badges: We all have seen some numerical indicators beside some links on various websites. These are called badges. These badges tell how many 3 min read Bootstrap Tooltips In this article, we would be discussing the tooltip plugin provided by bootstrap. Tooltip is quite useful for showing the description of different elements in the webpage. Tooltip can be invoked on any element in a webpage. Tooltips on bootstrap depends on the 3rd party library Tether for positionin 4 min read Bootstrap Navigation Bar Bootstrap Navigation Bar provides a responsive, customizable, and pre-styled navigation component for web applications. It incorporates features like branding, navigation links, dropdowns, and responsiveness, enabling developers to create effective and visually appealing navigation menus effortlessl 6 min read Bootstrap Carousel Bootstrap Carousel enables slideshow functionality for images or content. Easily customizable with CSS and JavaScript. Supports responsive design and touch gestures, enhancing user experience in web development projects. It can be included in your webpage using "bootstrap.js" or "bootstrap.min.js". 4 min read Bootstrap Cards A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. It replaces the use of panels, wells and thumbnails. All of it can be used in a single container called card . Ba 2 min read Bootstrap | Badges and Breadcrumbs Badges: Badges are numbers associated with the link to indicate the number of items associated with the link. The notification number is seen when logged in to a particular website and tells the numbers of news or notifications to see by clicking it. Example: HTML <!DOCTYPE html> <html> 4 min read Clearfix in Bootstrap One of the major problems with the structure of HTML is that if you have a child div inside parent div, the child div automatically flows around the parent div. The solution to this problem is using clear property of CSS. Bootstrap allows us to use a class named clearfix which is used to clear the f 2 min read Like