Currently, I am working on a React project where I am utilizing Bootstrap to style my components. The issue I am facing is with aligning a JSX component to the left on my webpage. Here is the code snippet of the component:
import React from 'react';
import Form from 'react-bootstrap/Form';
import './Formular.css';
function Formular() {
return (
<Form>
<Form.Group className="mb-3" controlId="First Name">
<Form.Control type="text" placeholder="First Name*" />
</Form.Group>
<Form.Group className="mb-3" controlId="Last Name">
<Form.Control type="text" placeholder="Last Name*" />
</Form.Group>
<Form.Group className="mb-3" controlId="University">
<Form.Control type="text" placeholder="University*" />
</Form.Group>
<Form.Group className="mb-3" controlId="Major">
<Form.Control type="text" placeholder="Major*" />
</Form.Group>
<Form.Group className="mb-3" controlId="Date of Birth">
<Form.Label>Please enter your date of birth:</Form.Label>
<Form.Control type="date" placeholder="Date of Birth (dd.mm.yyyy)*" />
</Form.Group>
</Form>
);
}
export default Formular;
I have tried to achieve left alignment by adding the following code to Formular.css:
Form {
text-align: left;
}
Despite this attempt, the component does not appear left-aligned on the webpage. Any suggestions or guidance on how I can modify this JSX component for proper left alignment would be greatly appreciated.
Thank you in advance!