Form inline not working as expected with React-Bootstrap

user_10687509 0
Viewed 4411

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 component 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 component:

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 component 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"

react-bootstrap reactjs javascript
4 Answers

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'}}.

user_154371990

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 bootstrap@4.6.0 or yarn add bootstrap@4.6.0

user_144233370

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

user_106875090

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.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
  crossorigin="anonymous"
/>

user_161880150
Related