React Bootstrap - How to use Rows and Cols to align Search box in Navbar with the center card of the body?

Question

My current page looks like this: Page screenshot

I want the search box in the Navbar to be in aligned with the center Card column in the body (where you see create post).

Here is the snippet for my Navbar:

<NavbarBs fixed="top" className="bg-white shadow-sm mb-3">
      <Container fluid>
        <NavbarBs.Brand href="#home">Logo</NavbarBs.Brand>
        <NavbarBs.Toggle aria-controls="basic-navbar-nav" />
        <NavbarBs.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">  
            <Nav.Link to="/" as={NavLink}>
              Home
            </Nav.Link>
            <Nav.Link to="/profile" as={NavLink}>
              Profile
            </Nav.Link>
          </Nav>
          <Nav>
            <Form>
              <Form.Group controlId="formBasicSearch" style={{width:"700px"}}>
                <Form.Control type="text" placeholder="Search" />       
              </Form.Group>
            </Form>
          </Nav>
          <Nav className="ms-auto">
            <Button variant="link">
              <BsFillBellFill
                size="1.4em"
                color="black"
              />
            </Button>
            <Button variant="link">
              <BsFillChatLeftDotsFill
                size="1.4em"
                color="black"
              />
            </Button>
            <Button variant="link">
              <BsFillGearFill
                size="1.4em"
                color="black"
              />
            </Button>
          </Nav>
          
        </NavbarBs.Collapse>
      </Container>
    </NavbarBs>

My body container Grid looks something like this:

export const Home: React.FC<{}> = () => {
  return(
    <Container>
      <Row>
        <Col>
          <LeftCard />
        </Col>
        <Col className="col-sm-6">
          <CenterCard />
        </Col>
        <Col>
          <RightCard />
        </Col>
      </Row>
    </Container >
  )
}

I want my Navbar to have similar 3 columns

First column for Logo and Nav items
Second (middle column) for Search
And last column in the end for other icons

I tried adding the Rows and Columns, but they stack towards left and don't expand the way I want it to be in 3 different columns. Could somebody tell me what I am doing wrong and how to achieve this?

score 0 · Answer 1 · answered May 03 '23 at 08:40

Difficult to know exactly what to use as I am unfamiliar with the semantic components you are using, but if you want your elements to line up with the body, just make sure that the navbar uses the exact same Row/Col layout;

<Nav className="me-auto"> 
    <Row>
      <Col>
        <Nav.Link to="/" as={NavLink}>
          Home
        </Nav.Link>
        <Nav.Link to="/profile" as={NavLink}>
          Profile
        </Nav.Link>   
      </Col>
      <Col>
        <Form>
          <Form.Group controlId="formBasicSearch" style={{width:"700px"}}>
            <Form.Control type="text" placeholder="Search" />       
          </Form.Group>
        </Form>
      </Col>
      <Col className="ms-auto">
        <Button variant="link">
          <BsFillBellFill
            size="1.4em"
            color="black"
          />
        </Button>
        <Button variant="link">
          <BsFillChatLeftDotsFill
            size="1.4em"
            color="black"
          />
        </Button>
        <Button variant="link">
          <BsFillGearFill
            size="1.4em"
            color="black"
          />
        </Button>
    </Col>
</Nav>

React Bootstrap - How to use Rows and Cols to align Search box in Navbar with the center card of the body?

1 Answers1