React Bootstrap input group button cannot align

Question

I am simply trying to create a input group with:

Description | text | button

But when I add the button the alignment goes crazy. I simply copied from the React Bootstrap documentation: https://react-bootstrap.github.io/components/input-group/.

This is my code:

import React, {useContext} from "react";
import Header from "../../layout/Header";
import UserContext from "../../../context/UserContext";
import "./Profile.css";
import {InputGroup, FormControl, Button} from 'react-bootstrap'


export default function Profile() {
  const { userData } = useContext(UserContext);
  console.log(userData.user)

  return (
    <>
      <Header/>
      <div className="ProfilePage">
        <h1>Profile Settings</h1>
        <InputGroup className="mb-3">
          <InputGroup.Prepend>
            <InputGroup.Text>Display name</InputGroup.Text>
          </InputGroup.Prepend>
          <FormControl
            placeholder="Recipient's username"
          />
          <InputGroup.Append>
            <Button variant="outline-secondary">Button</Button>
          </InputGroup.Append>
        </InputGroup>
      </div>
    </>
  );
}

This is the result:

you used css in other files and you can see the effect here.see inspect element and find it. — A.R.SEIF
– A.R.SEIF, Commented Sep 30, 2020 at 13:43

mSenad · Accepted Answer · 2020-09-30 13:44:15Z

2

There is no much information or provided example that I could inspect but try removing your "import "./Profile.css";" or some other CSS import that you possibly have that it's causing this issue.

answered Sep 30, 2020 at 13:44

mSenad

1331 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Bootstrap input group button cannot align

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related