Bootstrap Spinners

Bootstrap is a free and open source front end development framework for the creation of websites and web apps.
Site Admin
Posts: 159
Joined: Sun Jun 26, 2022 10:46 pm

Bootstrap Spinners

Post by C0D3D »

Creating border spinners with Bootstrap

Example 1

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Border Spinner</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="spinner-border">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>
</body>
</html>

Creating colored spinners with Bootstrap

Example 2

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Colored Spinners</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="spinner-border text-primary">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-border text-secondary">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-border text-success">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-border text-danger">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-border text-warning">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-border text-info">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-border text-dark">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-border text-light">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>
</body>
</html>
Creating growing spinners with Bootstrap

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Growing Spinners</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="spinner-grow">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>
</body>
</html>

Creating colored growing spinners with Bootstrap

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Colored Growing Spinners</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="spinner-grow text-primary">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-grow text-secondary">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-grow text-success">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-grow text-danger">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-grow text-warning">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-grow text-info">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-grow text-light">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-grow text-dark">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>
</body>
</html>


Creating small size spinners with Bootstrap

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Small Spinners</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="spinner-border spinner-border-sm">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-grow spinner-grow-sm">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>
</body>
</html>


Customizing the size of Bootstrap spinners with CSS

Example 6

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Custom Sizing of Bootstrap Spinners</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="spinner-border" style="width: 40px; height: 40px;">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-grow" style="width: 40px; height: 40px;">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>
</body>
</html>


Placing spinners inside buttons in Bootstrap

Example 7

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Placing Bootstrap Spinners inside Buttons</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <!-- Border spinners inside buttons -->
    <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-border spinner-border-sm"></span>
        <span class="visually-hidden">Loading...</span>
    </button>
    <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-border spinner-border-sm"></span>
        Loading...
    </button>

    <!-- Growing spinners inside buttons -->
    <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-grow spinner-grow-sm"></span>
        <span class="visually-hidden">Loading...</span>
    </button>
    <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-grow spinner-grow-sm"></span>
        Loading...
    </button>
</div>
</body>
</html>




Changing the alignment of spinners in Bootstrap

Example 8

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Left, Right and Center Alignment of Bootstrap Spinners</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
	<!-- Default alignment left -->
    <div>
        <div class="spinner-border">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

    <hr>

    <!-- Center alignment using flex utilities -->
    <div class="d-flex justify-content-center">
        <div class="spinner-border">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

    <hr>

    <!-- Center alignment using text alignment utilities -->
    <div class="text-center">
        <div class="spinner-border">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

    <hr>
    
    <!-- Right alignment using flex utilities -->
    <div class="d-flex justify-content-end">
        <div class="spinner-border">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

  	<hr>
  
  	<!-- Right alignment using text alignment utilities -->
    <div class="text-end">
        <div class="spinner-border">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

  	<hr>
  
  	<!-- Right alignment using float utilities -->
    <div class="clearfix">
        <div class="spinner-border float-end">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
</div>
</body>
</html>
----------------------------------------------------------------------
Together we are one! One we are many... Much Love from one brother to another...
Working together to achieve amazing things!
Teamwork is key.
Knowledge is Power!

4 Basic datatypes.
Strings: Which store a series of characters.
Int: Which store a full integer or number.
Float: A numeric value with a decimal.
Boolean: Only stores True or False and are very useful with if statements

----------------------------------------------------------------------
ImgBB Image upload

Who is online

Users browsing this forum: No registered users and 0 guests