Bootstrap
₹2,000.00
₹300.00
- 23 students
- 13 lessons
- 0 quizzes
- 10 week duration
-
Basics
- Starting Bootstrap
- The Bootstrap Grid System
- Bootstrap Colors
- Bootstrap Tables
- Bootstrap Spinners
- Bootstrap Buttons — Spinners
- Bootstrap Button Groups
- How to design a Dropdown Menu in Bootstrap
- Bootstrap Forms
- Simple Bootstrap Validation
- Bootstrap Carousel-1
- Creating a Navigation Bar with Bootstrap
- How to create a Bootstrap Theme?
Bootstrap Buttons — Spinners
Spinners are created by by using the .spinner-border class. The .spinner-grow class zooms up.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Spinner</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-sm-4" > <div class="spinner-border"></div> </div> <div class="col-sm-4" > <h1 class="spinner-border"></h1> </div> <div class="col-sm-4" > <img src="champak.jpg" alt="" class="spinner-border"/> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-sm-4" > <div class="spinner-grow"></div> </div> <div class="col-sm-4" > <h1 class="spinner-grow"></h1> </div> <div class="col-sm-4" > <img src="champak.jpg" alt="" class="spinner-grow"/> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-sm-3" > <button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> </button> </div> <div class="col-sm-3" > <button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> Loading.. </button> </div> <div class="col-sm-3" > <button class="btn btn-primary" disabled> <span class="spinner-border spinner-border-sm"></span> Loading.. </button> </div> <div class="col-sm-3" > <button class="btn btn-primary" disabled> <span class="spinner-grow spinner-grow-md"></span> Loading.. </button> </div> </div> </div> </body> </html>
The page can be viewed here.
http://hypatiasoftwaresolutions.in/bootstrap/spinners.html
Prev
Bootstrap Spinners