CODEWITHSUNDEEP
cssreactjsreact-bootstrap
VickTree
VickTree

Reputation: 909

React-bootstrap button animation will not work and button wont center

I have a react-bootstrap component and the loading animation will not play.

Also, the button wont center. I can use margin-left: 30px; to move it closer to the center but I dont want that as a solution because on bigger screens it goes off center. For the positioning, I am using an imported CSS file.

import Spinner from 'react-bootstrap/Spinner';
import { ButtonToolbar } from "react-bootstrap";
import  Button from 'react-bootstrap/Button'

class Button extends React.Component{

            ......rest of react component........

            return(
                <div>
                    <ButtonToolbar >
                    <Button variant="primary">
                        <Spinner
                        as="span"
                        animation="border"
                        size="sm"
                        role="status"
                        aria-hidden="true"
                        />
                        Loading
                    </Button>
                    </ButtonToolbar>
                </div>

Does anyone know what I am doing wrong or what I am not doing at all? Thank you for your time.

Upvotes: 0

Views: 1074

Answers (1)

gael
gael

Reputation: 1485

You can center align your bootstrap button by modifying its container, here the <ButtonToolbar>

Like so:

<ButtonToolbar className="text-center d-block">
                <Button variant="primary">
                    <Spinner
                    as="span"
                    animation="border"
                    size="sm"
                    role="status"
                    aria-hidden="true"
                    />
                    Loading
                </Button>
</ButtonToolbar>

For the spinner, do you have any React Error?

Upvotes: 1

Related Questions