React-Bootstrap Close Button Variants

import { CloseButton }
    from 'react-bootstrap';

const App = () => {

    return (

        <div className="App">
            <h1 style={
                { color: 'green', textAlign: 'center' }
            }> GeeksforGeeks
            </h1>
            <h5 style={
                { textAlign: 'center' }
            }>React-Bootstrap Close Button Variants
            </h5>
            <br></br>
            <div style={{ textAlign: 'center' }}>
                <CloseButton variant="dark" />
                <div style={{ backgroundColor: 'black' }}>
                    <CloseButton variant="white" />
                </div>
            </div>
        </div>
    );
};

export default App;

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'; // Import Bootstrap CSS
import { CloseButton, Container }
    from 'react-bootstrap';

const App = () => {
    const [
        showWelcomeBox,
        setShowWelcomeBoxVisible
    ] = useState(true);

    const handleClose = () => {
        setShowWelcomeBoxVisible(false);
    };

    return (
        <Container className="App text-center">
            <div className='mt-0'>
                <h1 style={{ color: 'green' }}>
                    GeeksforGeeks
                </h1>
                <h5>
                    React-Bootstrap Close Button Variants
                </h5>
            </div>
            <div>
                {showWelcomeBox && (
                    <div className="mx-auto d-flex justify-content-center 
                                    align-items-center fixed-top bg-success"
                        style={{ marginTop: "100px" }}>
                        <CloseButton variant="white" onClick={handleClose} />
                        <p className="text-white">
                            Hi Geeks ! Welcome to GeeksforGeeks
                        </p>
                    </div>
                )}
            </div>
        </Container>
    );
};

export default App;