How can I increase the size of react bootstrap spinner?-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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)