'How can I increase the size of react bootstrap spinner?

I'm using react for a project where I'm using a React-Bootstrap Snipper. but Its very tiny and now I want to change its size now. How can I change it?

<div
  style={{ width: "200px", height: "200px" }}
  className="w-100 d-flex text-[#DC2626] justify-content-center align-items-center">
  {/* bootstrap spinner */}
  <Spinner animation="border" role="status">
    <span className="visually-hidden">Loading...</span>
  </Spinner>
</div>

Solution 1:^[1]

You can pass the width and height to the spinner component.

codesandbox link - https://codesandbox.io/s/broken-surf-vids1x?file=/src/App.js

<Spinner animation="border" role="status"  style={{ width: "4rem", height: "4rem" }}>
   <span className="visually-hidden">Loading...</span>
</Spinner>

Solution 2:^[2]

You can also directly use the size tag to change the size

<Spinner animation='border' size='sm' className='mr-2' />

xs (extra small), sm (small), md (medium), lg (large), and xl (extra large)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Mohit Kushwaha
Solution 2	Roshan Shrestha

'How can I increase the size of react bootstrap spinner?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]