My problem is that justify-content: space-between seems doesnt work in my code.
import React from 'react';
import {Button, Navbar, Nav, NavDropdown} from 'react-bootstrap';
import '../styles/headerStyle.scss';
const Header = () => (
<React.Fragment>
<Navbar collapseOnSelect expand='lg' bg='dark' variant='dark'>
<Navbar.Brand href='#home'>React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls='responsive-navbar-nav' />
<Navbar.Collapse id='responsive-navbar-nav'>
<Nav>
<div className='container'>
<Nav.Link>Features</Nav.Link>
<Nav.Link>Pricing</Nav.Link>
<NavDropdown title='Dropdown' id='collasible-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.Link>More deets</Nav.Link>
<Nav.Link eventKey={2} href='#memes'>
Dank memes
</Nav.Link>
</div>
</Nav>
</Navbar.Collapse>
</Navbar>
</React.Fragment>
);
export default Header;
Here is stylesheet:
.container {
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
}
Here is my current result:
current header
Here is the tutorial I follow, I am not sure where do I make mistakes in my code. Thanks in advance for any help!
Related
Hi I'm trying to get scrollspy working on React using Bootstrap but I seem to struggle to make it work.
I have tried several ways to do this but I really have no idea how to make this work and it'll be much appreciate if you can help me with this...
This is the css
body {
margin: 0;
font-family: "Roboto", sans-serif !important;
scroll-behavior: smooth;
overflow-x: hidden;
position: relative;
height: 100%;
}
This is body in index.html
body
data-bs-spy="scroll"
data-bs-target="#navbar-menu"
data-bs-offset="0"
class="scrollspy-example"
tabindex="0"
This is in Navbar component and inside Menu component I'm assigning the hrefs
<Navbar
id="navbar-menu"
className="py-2 py-md-0 bg-white"
expand="lg"
sticky="top"
>
<Container>
<NavbarBrand classes="" />
<Navbar.Toggle aria-controls="basic-navbar-nav" className="border-0" />
<Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
<Menus classes="top-nav px-3 mx-2 px-md-2 py-md-4 mx-md-1 mb-3 mb-md-0" />
</Navbar.Collapse>
</Container>
</Navbar>
Inside Menu
<Nav className="flex-wrap flex-lg-nowrap me-3">
{navMenu.map((menu, index) => (
<Nav.Link
href={menu.href}
key={menu.href}
>
{menu.name}
</Nav.Link>
))}
</Nav>
I have Landing component that hold everything and inside each wrapper there's id name as same as the nav menu
const Landing = () => {
return (
<>
<NavbarMenu />
<HeroWrapper />
<AboutWrapper />
<EcosystemWrapper />
<TokenomicsWrapper />
<TeamWrapper />
<FooterNav />
</>
);
};
export default Landing;
i installed the react-bootstrap module using the pm command then imported it in my _app.js file now when i tried to change the bootstrap code i wasnt able to do so
my navbar component provided by bootstrap is this
import Image from 'next/image'
import {
Nav,
Navbar,
NavDropdown,
Form,
Button,
FormControl,
Container,
} from "react-bootstrap";
import headerStyles from '../styles/Header.module.css'
//${headerStyles.navLinks}
export default function NavBar() {
return (
<>
<Navbar bg="dark" expand="lg" variant="dark">
<Container fluid>
<Navbar.Brand href="#">
<Image src={'/logo.png'} height = "30px" width="190px"/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav
className={"me-auto my-2 my-lg-0 " + headerStyles.navLinks}
style={{ maxHeight: "100px" }}
navbarScroll
>
<Nav.Link className={headerStyles.navLinks_l} href="#action1">Home</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<Nav.Link href="#" disabled>
Link
</Nav.Link>
</Nav>
<Form className="d-flex">
<FormControl
type="search"
placeholder="Search"
className={"me-2"}
aria-label="Search"
/>
</Form>
</Navbar.Collapse>
</Container>
</Navbar>
</>
);
}
here I want to try to customize the CSS of bootstrap which I tried doing with CSS module but I failed. Then I used a global stylesheet to do so but failed
can someone please help me with this?
global css:
.navbar-collapse{
background-color: aqua;
color: black;
}
.navbar-dark .navbar-nav .nav-link {
color: rgb(0, 0, 0);
background-color: blue;
}
.navbar-expand-lg .navbar-nav{
justify-content: space-around;
margin: 0px;
}
.me-auto{
margin: 0 !important;
}
Import global.css after importing bootstrap in _app.js
import "bootstrap.min.js"
import "global.css"
using !important is not a good choice. explanation here
I'm having some problems lining up some React Bootstrap cards, the only way I could align them horizontally was by putting them both inside a div, but I need a component for each card, if I ran the code that way, it would end up going wrong
Basically, every time I add a card, it's aligned vertically, not horizontally.
HostingCard.tsx
import { Card, Button } from "react-bootstrap";
import "./App.css";
export default function HostingCard() {
return (
<div className="main">
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src="https://picsum.photos/200" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</div>
);
}
App.tsx
import React from "react";
import "./App.css";
import Header from "./Header";
import HostingCard from "./HostingCard";
function App() {
return (
<div className="App">
<Header />
<h1 style={{ padding: "1rem" }}>Hospedagens</h1>
<HostingCard />
<HostingCard />
</div>
);
}
App.css
.main {
display: flex;
flex-direction: row;
margin: 0.1rem;
padding: 1rem;
}
flexDirection: row applies to the children inside the row. You're creating a column of rows where each row contains only one item in each.
For the row to work as a row it needs to be a container for the cards, something like this:
function App() {
return (
<div className="App">
<Header />
<h1 style={{ padding: "1rem" }}>Hospedagens</h1>
<div style={{ flexDirection: 'row', /* ...more styles */ }}>
<HostingCard />
<HostingCard />
</div>
</div>
);
}
Since you're already using React Bootstrap, you can browse its Layout docs and choose something suitable that they already built instead of styling your own div.
Horizontal Stack looks like what you want:
function App() {
return (
<div className="App">
<Header />
<h1 style={{ padding: "1rem" }}>Hospedagens</h1>
<Stack direction="horizontal" gap={4}>
<HostingCard />
<HostingCard />
</Stack>
</div>
);
}
Look at its implementation and you'll see it's ultimately a div container with flexDirection: row plus a bunch of additional preset options and styles.
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?