What could be the reason for the react-bootstrap text-center not functioning properly? And why is my HR element automatically centering itself when I adjust the width?

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')
);

Answer №1

<Col className="aboutusright mx-auto" lg="4">
    <img src="./img/Group4.png"></img>
</Col>

Kindly replace "text-center" with "mx-auto".

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update the class name of an element depending on the URL

Hey there! I'm working on customizing the style of some elements (specifically tds within a table) based on the current URL. Here are the pages I'm targeting: http:\\domain\site\welcome.html http:\\domain\site& ...

Updating a Div on your webpage using a JQuery UI dialog: A step-by-step guide

I am currently trying to update my webpage from a JQuery UI dialog, but the code I have so far does not seem to be working. Any assistance or guidance would be greatly appreciated. function submit_new_site() { // These are the input text IDs on the ...

Guide on implementing Observables in Angular 2+ to update a single entry in a table in real-time

I'm facing a challenge with my Angular4 and Node.js application. I have a table that displays data with 7 columns using *ngFor. The issue arises when I need to update the last column dynamically and in real-time. Specifically, I want to show a green c ...

Modify the background color of an R chunk in a bookdown gitbook

Is there a method to eliminate the grey background color in order to display the colorful class? https://i.sstatic.net/l1Hhi.png https://i.sstatic.net/4aHMF.png ...

ng-grid defines different cellClass based on the value of the field

I am currently using the ng-grid and I want the column to display in a different color based on different values. I have tried, but not succeeded so far... $scope.gridOptions = { ........ columnDefs: [ { field: "status", displayName: "St ...

Tips for creating responsive images when using two images stacked on top of each other:

One of my challenges with using Bootstrap is trying to place an image on top of another image. Here's the HTML code I currently have: <section id="test"> <div class="row"> <div class="imgbg"><img src="img/bg_pres.png ...

What are the benefits of using "this.props.dispatch" instead of directly using "store.dispatch" in Redux?

Is there a downside to using store.dispatch directly? I find it more convenient to call (as it's accessible to all child components) and in my experimentation, I haven't noticed any difference yet. Appreciate your insights! ...

What are some effective methods for concealing API request payloads in a web browser?

Struggling to hide the request payload when using Express with React on the front end? Check out the image below for reference: https://i.stack.imgur.com/ZT7T7.png Here's a snippet of backend code for you to review: router.post('/fit_spend ...

Remove the 'name' attribute from the input tag within the URL

Is there a way to make the server update the URL format to localhost:3000/userinput instead of localhost:3000/?name=userinput when submitting a name? Any suggestions would be greatly appreciated. Thank you in advance. ExpressJs FILE <!DOCTYPE html> ...

Choose Your Preferences When the Page Loads

I have a dropdown menu where I can select multiple options at once without checkboxes. When the page loads, I want all of the options to be pre-selected by default. I am aware that I can use $(document).ready() to trigger actions after the page has load ...

Updating a slider based on the values of two other sliders can be achieved by implementing a

I am working on a project that involves three input sliders. I need the third slider to display the product of the values from the first two sliders. Additionally, I want the value of the third slider to update dynamically whenever the values of the first ...

The method used in Redux does not function properly with my sessionStorage

I am currently in the process of learning about Redux. One of my goals is to implement a favorites feature using Redux. To achieve this, I have created actions such as addFavoriteSPORTSs, SPORTSReducer reducers, and have dispatched them in tab-demo.js whil ...

What is the limit for table size in HTML5 Web SQL DB?

Currently, I am in the process of developing a rather intricate HTML5 web app that obtains its data from a Web Service to populate the Web SQL database. Initially, everything was running smoothly with test data. However, when I attempted to use actual dat ...

What is the process for creating a parent container in which clicking anywhere inside will cause a child container (built with jQuery UI draggable) to immediately move to that location?

This is a rundown of tasks that I am struggling to code more effectively: When the bar is clicked anywhere, I want the black dot button to instantly move there and automatically update the displayed percentage below it. Additionally, when I drag the butt ...

Issue with react-native: borderRadius not properly framing component dimensions

The issue with the borderRadius style attribute not displaying correctly on a component. Ideally, one would expect to see a green circle on the red background seamlessly without any white space. Unfortunately, this is what is currently being displayed: h ...

What is the best way to update MockProvider prior to triggering a "fireEvent" in @testing-library/react?

I need assistance with a test I'm running that should trigger an action after clicking a button using mocked data from graphQL. <MockedProvider mocks={mocks}> <button data-testid="my-button">Execute Actions using mock ...

Ways to retrieve parameters using $_GET

I am having trouble retrieving the parameter $_GET with a value that contains the character: '#'. Here is the code I am using: <iframe src="http://localhost/wp352/wp-content/plugins/heloworld/templates/options-rte.php?text_content=<span s ...

Tips for retrieving JSON data from an AJAX call and displaying it pre-filled in an input field

Here is the code snippet I used to receive a response in JSON format, but when I try to display the response using alert(response.Subject);, it shows as "undefined". HTML: <input type="text" id="subject" value='Subject'> Javascript: $.a ...

Achieve the effect of making the Bootstrap JS Collapse text bold after it has been

Is there a way to make Bootstrap JS Collapse text Bold after it has been clicked on? <tr data-toggle="collapse" data-target="#demo8" class="accordion-toggle"> <td> <div class="fa ...

Creating square elements using only HTML and CSS

This is just a longer text to demonstrate multiple lines being centered. ...