I've looked for the solution of my problem, but can't find a way to fix the situation without using a custom css class.
I'd like to know if it is possible to do what I'm looking for using only flex classes.
I've this simple navbar component:
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="#home">Navbar</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
</Nav>
<Nav className="mr-left">
<Nav.Item >
<Timer/>
</Nav.Item>
</Nav>
</Navbar>
Where TIMER is a simple <p>text</p>.
Is it possible to vertically align this text with align-self: center?
I can't fully get what it is happening.
I've found a way, but I do not like it so much because I've substituted Nav.Item with Nav.Link.. this is not so good:
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="#home">Navbar</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
<Nav.Link className="disabled ml-auto">
<Timer/>
</Nav.Link>
</Nav>
</Navbar>
Before I was using 2 nav inside navbar, honestly I do not know how much it is correct.. Instead now I'm using just one NAV but I can't set it as large as the NAVBAR to move the Timer on right
Related
How to change text color in css class styles.links?
If i write color: white inside css style sheet it doesnt work. Works when write style={{color:'white'}} in line only. Other styles works so it seems that color is overwritten by bootsrap.
Styles in next are very painfull. What is best way to work with css in your opinion?
<Navbar className={home ? styles.homeNavbar : styles.mainNavbar } collapseOnSelect expand="lg" variant={home?"dark":"light"}>
<Container>
<Link href="/"><Navbar.Brand>Brand text</Navbar.Brand></Link>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Link href="/contact" passHref>
<Nav.Link style={{color:'white'}} className={styles.links}>contact</Nav.Link>
</Link>
<Link href="/typesOfPages" passHref>
<Nav.Link style={{color:'white'}} className={styles.links}>portfolio</Nav.Link>
</Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
so I'm trying to create my app using react bootstrap and I want to change the backgroundColor to my desired ones + I want to move the link tag to the right side, I believe in normal HTML we can achieve it by typing class="justify-content-end" but I cant find the way to do it. Can anyone help me please ? Thanks before.
Here's my code:
import "../styles/Header.css"
import { Navbar, Nav} from "react-bootstrap"
function header() {
return (
<div>
<Navbar bsClass="custom-navbar" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="justify-content-end">
<Nav.Link href="#facilities">Facilities</Nav.Link>
<Nav.Link href="#room">Room</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
My Header.css:
.custom-navbar{
background-color: #10255A;
}
Currently, flex direction of the <Nav> is column which mean you have to use align-items-end to move link tags to the right
<Nav className="justify-content-end align-items-end">
Codesandbox
I am new to bootstrap but I am a bit fluent in React. I just want to ask how to change the :active background colour of the react-bootstrap tabs.
Here is the link:- https://react-bootstrap.github.io/components/tabs/ (It is the vertical tab menu)
I have used the code shown there.
<Tab.Container id="sidebar" defaultActiveKey="first">
<Row>
<Col sm={3}>
<Nav variant="pills" className="flex-column">
<Nav.Item>
<Nav.Link eventKey="first" className="tab">Tab 1</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="second" className="tab">Tab 2</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="third" className="tab">Tab 3</Nav.Link>
</Nav.Item>
</Nav>
</Col>
<Col sm={9}>
<Tab.Content>
<Tab.Pane eventKey="first">
<h1>One</h1>
</Tab.Pane>
<Tab.Pane eventKey="second">
<h1>Two</h1>
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
How can I change the background of the active tabs using CSS or bootstrap?
Please help.
Thank you.
as #Tim suggested its also 100% correct when you choose variant="pills" but default is variant="tabs"
For Tabs
.nav.nav-pills .nav-link.active {
background-color: <YOUR_COLOR>
}
For Pills
.nav.nav-tabs .nav-link.active {
background-color: <YOUR_COLOR>
}
I want to use NavLink instead of Nav.Link in my react-bootstrap navbar so I can use the activeClassName prop. However it seems that all the links lose their alignment, there is no longer any horizontal margin between them and they are not centered vertically in the navbar:
code as follows:
function NavbarDefault() {
return (
<Container>
<Navbar variant="custom" expand="md">
<Navbar.Brand as={NavLink} to="/">
<img
className="navbar-logo-image"
src={logo} alt="Brand Logo" />
<span className="navbar-logo-text">cool brand</span>
</Navbar.Brand>
<Navbar.Toggle
className="navbar-toggler-custom"
aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<NavLink className="nav-link-custom" activeClassName="nav-link-custom-active" to="/features">Features</NavLink>
<NavLink className="nav-link-custom" activeClassName="nav-link-custom-active" to="/pricing">Pricing</NavLink>
<NavLink className="nav-link-custom" activeClassName="nav-link-custom-active" to="/contact">Contact</NavLink>
<SecondaryButton
className="navbar-login-button">
Try now
</SecondaryButton>
</Nav>
</Navbar.Collapse>
</Navbar>
</Container>
);
}
and CSS:
.nav-link-custom {
color: #41a2fb;
}
.nav-link-custom:hover {
color: #0681EF;
text-decoration: none;
}
.nav-link-custom-active {
color: red;
}
Originally I tried to solve this problem by using something like <Nav.Link as={NavLink} ....... this worked for the navigation and alignment however the activeClassName prop doesn't work that way, so I had to revert to NavLink. How can I center these nav links vertically in the navbar?
I am trying to create a react-bootstrap navbar with a dropdown menu that stays shown when the navbar is collapsed. In other words, the basic-nav-dropdown does not hide like home and link below. I have accomplished this with the following, but there is an issue with the dropdown when the navbar is collapsed.
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Nav className="mr-auto">
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<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.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
Here is what it looks like when the drop down is opened and the navbar is expanded. The dropdown show results below navbar and the results do not affect the presentation of the navbar. This is expected.
Here is what happens when the drop down is opened and the navbar is collapsed. The dropdown does not fall below the navbar, and instead expands the navbar. I would like the dropdown the behave the same as when the navbar is expanded.
Is there a way to make the navbar dropdown expand below a collapsed navbar?
I've also tried removing the <Nav className="mr-auto/> surrounding <NavDropDown> and while that does fix the problem, it introduces new problems as the navdropdown links are not similarly formatted as home and link, and also aligned to the center, not to the left as before.
This is a default behavior of react-bootstrap that, when Navbar is collapsed and contains Dropdown it will expand in Navbar only with following CSS,
.navbar-nav .dropdown-menu {
position: static;
float: none;
}
You can just change the CSS to get desired output as,
.navbar-nav .dropdown-menu {
position: absolute;
}
Demo