css Question posted in
Some basic documentation can be found here.

Css – How to align JSX component to the left on a webpage using React and Bootstrap?

I’m currently working on a React project where I’m using Bootstrap to style my components. I have a JSX component that I want to align to the left on my webpage, but for some reason, it doesn’t work. Here’s my current 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;

In my Formular.css file, I’ve added the following code:

Form {
  text-align: left;
}

Despite this, the component doesn’t appear left-aligned on the webpage. Can anyone provide guidance on how I can modify this JSX component to achieve left alignment?

Thank you in advance!

Tags:

2

Answers


  1. 0

    simply do this

    Form {
  margin-right: auto;
}
    Login or Signup to reply.
  2. 0

    when using form override you still get the inherited CSS. to fix this simply wrap the content you want to align in a div with styling for example.

    <div style={{display:'flex', alignItems:'start', textAlign:'left', width:'100%'}}>
  <MyFormContent/>
</div>

    The solution you posted works by overriding all of the inherited CSS from Formular. Wrapping should solve this as well, or by adding !important;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search