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 start.
- .text-center: It is used to set the alignment of the spinner element to the center.
- .text-end: It is used to set the alignment of the spinner element to the end.
Syntax:
<div class="text-*">
<div class="spinner-border" role="status">
<span class="visually-hidden">...</span>
</div>
</div>
Example 1: In this example, we will set the text alignment of the spinner elements to start, center, and end.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bootstrap 5 Spinners Text align Placements</title>
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
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 Text align Placements</h2>
<div class="text-center 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="text-start 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="text-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 set the text alignment of the button spinner elements to start, center, and end.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bootstrap 5 Spinners Text align Placements</title>
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
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 Text align Placements</h2>
<div class="text-center">
<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="text-start">
<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="text-end">
<div class="btn btn-danger" type="button">
<span class="spinner-border" style="width: 2rem; height: 2rem;" role="status"></span>
<span class="visually-hidden">Loading...</span>
</div>
<div class="btn btn-danger" type="button">
<div class="spinner-grow" style="width: 2rem; height: 2rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/spinners/#text-align