Hello everyone, I am currently working on creating the front-end of my website using react-bootstrap. I am facing an issue where when I try to change the width of my hr element, it automatically centers itself. I also attempted to use the className "text-center" from Bootstrap to center elements within my column, but it didn't work. Can anyone provide assistance with this problem? I have already imported the Bootstrap CSS but the issue persists.
Below is the code snippet:
<Row className="aboutus regular">
<Col className="aboutusleft" lg ="6" >
<h1 className="semibold"> About Us</h1>
<hr style={{width:'20%'}}></hr>
<p>Diamond Hotel serves as an urban oasis for both discerning business and leisure travelers. Located in the heart of Samarinda and close to the most prominent culinary tourism object. The hotel itself possess a trendy design with attention to comfort, quality and value based accommodation. It features 75 modern rooms and suites with contemporary design environment to make you feel completely at home.</p>
<button className="aboutbutton">Learn More</button>
</Col>
<Col className="aboutusright text-center" lg ="4">
<img src="./img/Group4.png"></img>
</Col>
</Row>
My index.js (CSS bootstrap located):
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);