CODEWITHSUNDEEP
reactjsnavbarreact-bootstrapreact-bootstrap-nav
Sami Ahmad Khan
Sami Ahmad Khan

Reputation: 1

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

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

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?

Upvotes: 0

Views: 266

Answers (1)

Mark Barton
Mark Barton

Reputation: 897

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>

Upvotes: 0

Related Questions