I have been trying to remove the caret from the NavDropdown component with bootstrap 4 and react, however I have had no luck. This is my react and css, not sure what's going wrong. Thanks.
<Navbar expand="lg">
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<NavDropdown title="ENGAGEMENT" id="basic-nav-dropdown" show={false} className="noCaret">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
.caret {
display: none !important;
}
.navbar .dropdown-menu:after{
display:none !important;
}
.dropdown-toggle.noCaret:after {
display: none !important;
You can disable the caret by using id
as well
#dropdown-basic::after{
display: none;
}
This works for me, using default bootstrap classes.
.dropdown-toggle::after {
display: none;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.