I am developing a single page in react and when I saw it on mobile version the menu organization was all messed up.
How can I put the menu responsive as I change from a pc version to a mobile version?
Bootstrap is typically used to build responsive, mobile-first projects on the web. You can use bootstrap within a React project by downloading it with an: npm i --save bootstrap. Then downloading Bootstrap's dependencies: popper.js, and JQuery. After everything has been downloaded, within your React components, you could assign the appropriate Bootstrap classes to the semantic elements making up your components by using the className attribute.
However with that being said, perhaps an easier approach would be to utilize React-Bootstrap since it's a "React friendly version of bootstrap". Directly from React-Bootstrap's documentation:
"React bootstrap replaces the Bootstrap javascript. Each component has been built from scratch as true React components, without uneeded dependencies like jQuery. It's built with compatibility in mind, we embrace our bootstrap core and strive to be compatible with the world's largest UI ecosystem."
Here is an example navbar, directly from their documentation, which would stack, as desired, when the device's screen size changes:
<Navbar bg="light" 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="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<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>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>;
Test it out on your end by enlarging and minimizing your browser window to see how the menu stacks and changes with different screen sizes.
Hopefully that helps!
You can use React semantic ui. There are lots of Ui components and all are responsive. Very easy to implement.
Related
I am making my first ever website in React. I want to use Bootstrap's grid system, but I don't really know when I should use this or rather how extensively.
Is the grid system best in places like App.js and in each individual component? Just in each individual component? Just in App.js?
I use React-Bootstrap. I've found it very simple to get going with, and the intellisense you get in VS Code is great.
To get started, just:
npm install react-bootstrap
You can see a list of all of the components here.
Then you just add the components that you want to use to your import.
import {
Navbar,
Container,
Nav,
NavbarBrand,
Row,
Col,
{...}
} from "react-bootstrap";
Then in your rendered output, for example:
return (
<Container>
<Navbar>
<NavbarBrand>Brand</NavbarBrand>
<Navbar.Collapse>
<Nav>
<NavItem>Item 1</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
<Row>
<Col md={4}>
</Col>
<Col md={4}>
</Col>
<Col md={4}>
</Col>
</Row>
</Container>
);
We can use plain bootstrap to use grid system. We have to use it inside most of the component according to the requirement to make is responsive.
Easy Option:
There are other options to use bootstrap inside react like component libraries. You can use either Reactstrap or React-Bootstrap. These libraries provide components by which you can easily create website with react and power of bootstrap.
I have a website mostly done with React-Bootstrap and I am kind of a beginner in this field. I want my background to be black in all the pages so I set it with background-color:black !important; in every page. I did a Navigation Bar with React-Bootstrap and now when I move through the pages, there is a white glitch before turning it to black.
I tried to put the style in html, to load it faster, changed the color in body with !important, even overridden the bootstrap variable for background-color but neither of these worked.
I know that the glitch between the pages would dissappear if I would use just React NavBar not Bootstrap one and I've tried it, but there is also a glitch when you reload the page and it bothers me.
Has anyone any idea what could cause it?
My navigation bar is pretty simple:
<Navbar className="navbar" expand="sm">
<Navbar.Brand className="logo" href="#home" >React-Bootstrap</Navbar.Brand>
<Navbar.Toggle className="toggle" aria-controls="responsive-navbar-nav" />
<Navbar.Collapse className="navbar-links" id="responsive-navbar-nav" >
<Nav className="ms-auto">
<Nav.Link className="navlink" href="home">Home</Nav.Link>
<Nav.Link className="navlink" href="documents">Documents</Nav.Link>
<Nav.Link className="navlink" href="about">About</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar >
Later edit :
I tried in Google Chrome and it shows only sometimes ( 2-3 reloads), but still appears.
I'm using React-bootstrap package on my react project.
I tried to use simple navbar with dropdown example from react-bootsrap offical demo page.
Here is the example. Dropdown opening when click to 'dropdown' link but it's not closing when trying to click anywhere outside of dropdown. So it's not behave like on example on demo. What can be problem with that?
<Navbar bg="light" 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="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<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>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
It's probably a little late for this but I had the same issue. What I finally ended up doing was adding this:
componentDidUpdate() {
document.getElementById("root").click();
}
This forced a closure as soon as the page was loaded. This was put into my main component, or app.js if you so choose.
HTH
I am using react-bootstrap Cards on my project. I have great view with that. I have horizontal search button on it. I would like to use this button for routing.
I set my settings on my app.js class. Actually, I can change route with <Link> but my search button looks bad with it. I would like to use Search button while keeping visual design.
Sorry for my explanation, It's hard to explain without any visual support. if it is not clear please leave comment and I would try to clarify with onether way.
Here is my codes;
<Card bg="dark" text="white" style={{ width: "18rem" }}>
<Card.Header>SWITCH</Card.Header>
<Card.Body>
<Card.Title>Dark 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>
</Card.Body>
<Button variant="secondary">SEARCH</Button>
</Card>
I can do routing with wit this code;
<Card bg="dark" text="white" style={{ width: "18rem" }}>
<Card.Header>SWITCH</Card.Header>
<Card.Body>
<Card.Title>Dark 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>
</Card.Body>
<Link to={"/route which I defined in app.js"}>
<Button variant="secondary">SEARCH</Button></Link>
</Card>
But this time, search button's size decrease. Are there any way to stretch it? Or should I change usage of <Link> ?
You can use a package called react-router-bootstrap from npm and use it. It's very simple and for your use case find the below snippet.
<Link to={"/route which I defined in app.js"}><Button]>Foo</Button></Link>
becomes
import { LinkContainer } from 'react-router-bootstrap'
<LinkContainer to={"/route which I defined in app.js"}>
<Button>Foo</Button>
</LinkContainer>
find more on react-router-bootstrap
You probably will need to do some custom css styling still. You can open up your elements browser by clicking inspect in chrome and find the class of the link, then you can overwrite that class to match your styling needs.
Also try wrapping the link with the button
<Button variant="secondary"><Link>SEARCH</Link></Button>
NOTE: Even though it's not recommended and you should normally avoid it, you might need to use !important in your css when overwriting bootstrap.
you can try,
<Button as={Link} to="/your_destination">Foo</Button>
I am building a react web application. I am using material ui for it. I am looking to have an appbar like google inbox has (screenshot attached below). Currently I have Appbar imported from material ui module, but it just contains title , navigation icon. I want to have a search bar, profile photo etc in my app bar, just like google inbox. How can I customize it to get a design like that. Do I have to tweak with material ui's appbar (if yes then how exactly) or do I have to do something else?
const rightButtons = (
<div>
<FlatButton key={1} label="Btn1"/>
<FlatButton key={2} label="Btn2" />
<div>
) //Style as per your requirement, Also implement search textfield component
// Drawer with list items
<Drawer/>
<AppBar
title="Inbox"
iconElementLeft={<SearchComponent/>}
iconElementRight={rightButtons}
onLeftIconButtonTouchTap={this.handleLeftDrawerToggle}
/>
make use of iconElementLeft and iconElementRight.
Docs of AppBar
As second option, You can use alternate framework react-materialize as well, as it has what your requirement is exactly.
<Navbar brand='logo' right>
<NavItem href='get-started.html'><Icon>search</Icon></NavItem>
<NavItem href='get-started.html'><Icon>view_module</Icon></NavItem>
<NavItem href='get-started.html'><Icon>refresh</Icon></NavItem>
<NavItem href='get-started.html'><Icon>more_vert</Icon></NavItem>
</Navbar>