Open In App

Bootstrap 5 Spinners Floats Placements

Last Updated : 09 Nov, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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.
  • .float-end: It is used to set the position of spinner elements to the end.
  • .float-none: It is used to set the position of spinner elements to none.

Syntax:

<div class="clearfix">
      <div class="spinner-border float-end" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
</div>

 

Example 1: In this example, we will create the spinner and set its position using the float placements.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Spinners Floats Placements</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Spinners Floats Placements</h2>
  
        <div class="clearfix float-start text-success">
            <div class="spinner-border spinner-border-sm" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <div class="spinner-grow spinner-grow-sm" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
  
        <div class="clearfix float-none text-success">
            <div class="spinner-border spinner-border-md" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <div class="spinner-grow spinner-grow-md" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
  
        <div class="clearfix float-end text-success">
            <div class="spinner-border" 
                style="width: 2rem; height: 2rem;" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <div class="spinner-grow" 
                style="width: 2rem; height: 2rem;" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    </div>
</body>
  
</html>
 






                        










Output:


 


Example 2: In this example, we will create the button spinner and set its position using the float placements.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <title>Bootstrap 5 Spinners Floats Placements</title> 


    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"


        rel="stylesheet"


        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 


        crossorigin="anonymous"> 


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"


        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 


        crossorigin="anonymous"> 


    </script> 


</head> 


  


<body> 


    <div class="container text-center"> 


        <h1 class="text-success"> 


            GeeksforGeeks 


        </h1> 


  


        <h2>Bootstrap 5 Spinners Floats Placements</h2> 


  


        <div class="float-start"> 


            <div class="btn btn-secondary" type="button"> 


                <span class="spinner-border spinner-border-sm" 


                    role="status"></span> 


                <span class="visually-hidden">Loading...</span> 


            </div> 


  


            <div class="btn btn-secondary" type="button"> 


                <span class="spinner-grow spinner-grow-sm" 


                    role="status"></span> 


                <span class="visually-hidden">Loading...</span> 


            </div> 


        </div> 


  


        <div class="float-end"> 


            <div class="btn btn-success" type="button"> 


                <span class="spinner-border spinner-border-md" 


                    role="status"></span> 


                <span class="visually-hidden">Loading...</span> 


            </div> 


  


            <div class="btn btn-success" type="button"> 


                <span class="spinner-grow spinner-grow-md" 


                    role="status"></span> 


                <span class="visually-hidden">Loading...</span> 


            </div> 


        </div> 


  


        <div class="float-none"> 


            <div class="btn btn-danger" type="button"> 


                <span class="spinner-border" 


                    style="width: 3rem; height: 3rem;" 


                    role="status"></span> 


                <span class="visually-hidden">Loading...</span> 


            </div> 


  


            <div class="btn btn-danger" type="button"> 


                <div class="spinner-grow" 


                    style="width: 3rem; height: 3rem;" role="status"> 


                    <span class="visually-hidden">Loading...</span> 


                </div> 


            </div> 


        </div> 


    </div> 


</body> 


  


</html>



















                        







                        










Output:


 


Reference: https://getbootstrap.com/docs/5.0/components/spinners/#floats


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bootstrap 5 Spinners SASS
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Spinners Text align Placements
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bootstrap 5 Spinners Text align Placements
            

        
    
        
            

                Bootstrap 5 Spinners Flex Placements
            

        
    
        
            

                Adding spinners using react-spinners-kit package in React JS
            

        
    
        
            

                Bootstrap 5 Spinners Border
            

        
    
        
            

                Bootstrap | Spinners Set-1
            

        
    
        
            

                Bootstrap | Spinners Set-2
            

        
    
        
            

                Bootstrap 4 | Spinners
            

        
    
        
            

                Bootstrap 5 Spinners
            

        
    
        
            

                Bootstrap 5 Spinners Alignment
            

        
    
        
            

                Bootstrap 5 Spinners Placement
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
P

        

            
        

        

                                    


                                    

                                        ppatelkap                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        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