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>
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 building a vertical menu bar in Semantic UI React. I have a number of Menu.Item components in my Menu. The first Menu.Item contains an Icon component with no Menu text. The issue I am having is that the Icon is overflowing into the Menu.Item below it. I can't figure out why this is? I have tried adjusting margin, padding, line-height but nothing seems to work. Any ideas? Would be greatly appreciated. Thank you.
Here is my code for the first couple Menu.Items. Adding text to Menu.Item increases the size correctly but I don't want any Menu text with the Icon.
<Menu.Item link><Icon name='x' size='large'/></Menu.Item>
<Menu.Item as={Link} to='/' onClick={this.handleSidebarHide}>
Home
</Menu.Item>
<Menu.Item as={Link} to='/about' onClick={this.handleSidebarHide}>About Us</Menu.Item>
Try This one it will help you
<Menu.Item> link style={{ display: "inline-block" }} ><Icon name='x' size='large'/></Menu.Item>
I am trying to make some icons appear like in the documentation here: https://react-bootstrap.netlify.com/components/navbar/ however I can not seem to get the same result:
<Nav.Item>
<Nav.Link className="text-white" target="_blank" href="#">
<OverlayTrigger
placement="bottom"
overlay={
<Tooltip id={"tooltip-bottom"}>
GitHub
</Tooltip>
}
>
<FontAwesomeIcon icon={faGithub} />
</OverlayTrigger>
</Nav.Link>
</Nav.Item>
Does anyone know how to make the icons appear like in the documentation?
Make sure you have added the packages #fortawesome/react-fontawesome and #fortawesome/free-solid-svg-icons.
Then you can import them in your component like so.
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faDatabase } from '#fortawesome/free-solid-svg-icons'
You can use them in your project like this:
<FontAwesomeIcon icon={faDatabase} />
If you go in your node_modules/#fortawesome/free-solid-svg-icons directory you will see a bunch of Typescript (.ts) files. These files represent the icons.
I could not find the Git icon in there so that might be the reason it's not showing up. However, the Git icon is available in the #fortawesome/fontawesome-free package as an SVG. The downside is that I don't think you can use the SVG icon with the component. This means that you may need to find another workaround for that.
Using Semantic ui React's Reveal with two different Cards. The visible one and then the hidden one. But the hidden one has a form and button that I need to interact with. Is there an easy way to make the form accessible? Or is the really only way to do so find the item with JS and then remove the attribute to interact with? Please someone give me some advice. Here is my current code for the Reveal.And yes I know code is sloppy right now. It's temporary.
<Reveal animated='fade' instant key={i}>
<Reveal.Content visible>
<Card
centered={true}
key={i}
raised={true}
style={{'backgroundColor':'blue', color:'white'}}
>
<Card.Header textAlign='center' as='h1'>
{Object.keys(each).toString()}
</Card.Header>
<Card.Header textAlign='center' as='h3'>
No peeking on other players wagers!
</Card.Header>
<Card.Header as='h1'></Card.Header>
<Card.Header as='h1'></Card.Header>
<Card.Header as='h2'></Card.Header>
</Card>
</Reveal.Content>
<Reveal.Content hidden>
<Card
centered={true}
key={i}
raised={true}
>
<Card.Header textAlign='center' as='h1'>
{Object.keys(each).toString()}
</Card.Header>
<Card.Header textAlign='center' as='h3'>
Please make your wager!
</Card.Header>
<Card.Content>
<Form
as='form'
>
<Form.Field>
<Label>Place your Wager</Label>
<Input icon='money' iconPosition='right' focus placeholder='Wager' />
</Form.Field>
<Button
type='submit'
size='large'
color='blue'
>
Submit
</Button>
</Form>
</Card.Content>
</Card>
</Reveal.Content>
</Reveal>
Technically your top content in your Reveal is covering the form below. Only the opacity is changing. It's still in the DOM with a higher z-index.
There are a number of ways you could solve this.
1) When the animation ends, set a display: none on the top "visible" Reveal. That means you'd have to listen to the animation end. And when the mouse leaves you would need to add display: block back so you can see the animation. Probably more work than you need.
2) Change the z-index to a lower value when the animation ends. Same issue as above.
3) Set pointer-events: none on the top "visible" reveal. This effectively makes the user's click events pass through the transparent Reveal and hit the form below instead. This is important to know, in case you intend to use the Reveal at some point to actually block the form. <Reveal.Content visible style={{pointerEvents: 'none'}}>