Search code examples
reactjsbootstrap-4react-bootstrap

React Bootstrap input group button cannot align

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: enter image description here

Solution

  • 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.