I am trying to get to grips with React-Bootstrap and was attempting to replicate a navbar similar to that in their documentation, but my Form ponent is not displaying as shown in the documentation with the inline attribute. My button appears under my form, not sure what the issue is.

Here is the code for my ponent:

import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import Form from 'react-bootstrap/Form';
import FormControl from 'react-bootstrap/FormControl';
import Button from 'react-bootstrap/Button';

const MyNav = () => (
  <Navbar bg='dark' variant='dark' expand='sm'>
    <Navbar.Brand href='/'>Maths Tips</Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="mr-auto">
        <Nav.Link href='/'>Home</Nav.Link>
        <Nav.Link href='/rules'>Rules</Nav.Link>
      </Nav>
      <Form inline>
        <FormControl type='text' placeholder='Search' className='mr-sm-2' />
        <Button type='submit'>Search</Button>
      </Form>
    </Navbar.Collapse>
  </Navbar>
);

export default MyNav;

I am trying to get to grips with React-Bootstrap and was attempting to replicate a navbar similar to that in their documentation, but my Form ponent is not displaying as shown in the documentation with the inline attribute. My button appears under my form, not sure what the issue is.

Here is the code for my ponent:

import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import Form from 'react-bootstrap/Form';
import FormControl from 'react-bootstrap/FormControl';
import Button from 'react-bootstrap/Button';

const MyNav = () => (
  <Navbar bg='dark' variant='dark' expand='sm'>
    <Navbar.Brand href='/'>Maths Tips</Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="mr-auto">
        <Nav.Link href='/'>Home</Nav.Link>
        <Nav.Link href='/rules'>Rules</Nav.Link>
      </Nav>
      <Form inline>
        <FormControl type='text' placeholder='Search' className='mr-sm-2' />
        <Button type='submit'>Search</Button>
      </Form>
    </Navbar.Collapse>
  </Navbar>
);

export default MyNav;

I have bootstrap imported into my App.scss file, which is then imported into my App.js file where the MyNav ponent is being rendered.

These are the package versions I'm using that might be relevant:

"bootstrap": "^5.0.1"

"react": "^17.0.2"

"react-bootstrap": "^1.6.0"

• javascript
• reactjs
• react-bootstrap

• If you have the bootstrap CDN in your application, try and test directly <Form className="form-check-inline"> instead of <Form inline> – AlyaKra Commented May 24, 2021 at 14:59
• @AlyaKra that did not seem to change anything, would this suggest that bootstrap isn't installed properly? – Daniel Collins Commented May 24, 2021 at 15:00
• I just tried your code and had the same problem. Weird. Try this instead of your Form inline <Form className='d-flex'>. You can add style={{position:'absolute',right:'0'}} if you want it on the right. – AlyaKra Commented May 24, 2021 at 15:03

4 Answers 4

To fix the issue I suggest replacing <Form inline> with <Form className='d-flex'> as it will set the display of that section to flex.

In addition, if you want to set the search to the far right, add style={{position:'absolute',right:'0'}}.

A quick workaround for this, as shared in the ments by @AlyaKra is to change the <Form inline to <Form className='d-flex'>

After playing around a bit, I found the issue to be that your Bootstrap package is v5.0.1

React Bootstrap is only meant to be used with Bootstrap V4, unfortunately. Therefore, you may encounter more visual bugs like these. I've found that margins are also slightly bugged when using Bootstrap 5 and React-Bootstrap.

To switch to bootstrap v4.6.0, the latest Bootstrap v4 version, execute

npm i [email protected] or yarn add [email protected]

I had the exact same problem. The way I was able to solve it was using the latest styles from the CDN by including the link below in my index.html template (React Bootstrap documentation):

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css"
  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
  crossorigin="anonymous"
/>