I am trying to align a button (And eventually 2 buttons) to the right in a Card.footer in React Bootstrap. i have tried style=={{display: 'flex', display: 'flex', alignItems: 'flex-end', float: 'right'}} and className='btn btn-success btn-lg float-right' and many combinations of these without anything changing.
my card is as follows:
<Card style={{ marginBottom: "15px", marginTop: "15px", cursor: 'pointer' }}>
<ListGroup>
<ListGroup.Item>
<Container>
Card Content
</Container>
</ListGroup.Item>
</ListGroup>
<Card.Footer>
<Row>
<Button className='btn btn-success btn-lg float-right' style={{ display: 'flex', alignItems: 'flex-end', float: 'right' }}>Like</Button>
</Row>
</Card.Footer>
</Card>
Use ml-auto class (margin-left: auto)
<Button className="btn btn-success btn-lg ml-auto">
https://getbootstrap.com/docs/4.5/utilities/spacing/#notation
For subsequent buttons to the right, apply ml-x e.g., ml-2
<Row>
<Button className="btn btn-success btn-lg ml-auto">Like</Button>
<Button className="btn btn-success btn-lg ml-2">Another Btn</Button>
</Row>
Related
I am creating a form and have the following so far:
I need the inputs Name to be on top and then Start Date and End Date to be in the rows below which is fine. However I want the text for "Start Date" and "End Date" to be on top of the input fields rather than within the row. I am not sure how to achieve this and have tried using flexDirection as follows:
<span>Name </span>
<Input
type="text"
onChange={(e) => setName(e.target.value)}
value={name}
/>
<div style={{ flexDirection: "row", display: "flex" }}>
<span
style={{
flexDirection: "column",
display: "flex",
}}
>
Start Date
</span>
<Input
style={{ flexDirection: "row", width: "45%", flexWrap: "wrap" }}
type="text"
onChange={(e) => setStartDate(e.target.value)}
value={startDate}
/>
<span>End Date</span>
<Input
style={{ flexDirection: "row", width: "45%", flexWrap: "wrap" }}
type="text"
onChange={(e) => setEndDate(e.target.value)}
value={endDate}
/>
</div>
One solution is wrap each span and input into a div and give each span display: block
It would be better to use classes instead of using inline style.
<span>Name </span>
<Input
type="text"
onChange={(e) => setName(e.target.value)}
value={name}
/>
<div style={{ flexDirection: "row", display: "flex" }}>
<div>
<span
style={{ display: 'block' }}
>
Start Date
</span>
<Input
style={{ flexDirection: "row", width: "45%", flexWrap: "wrap" }}
type="text"
onChange={(e) => setStartDate(e.target.value)}
value={startDate}
/>
</div>
<div>
<span style={{ display: 'block' }}>End Date</span>
<Input
style={{ flexDirection: "row", width: "45%", flexWrap: "wrap" }}
type="text"
onChange={(e) => setEndDate(e.target.value)}
value={endDate}
/>
</div>
</div>
I am facing an issue of adding the slide animation on the question and answer. I want on click of the radio button the slide effect comes and next question comes with Slideup animation.
<Grid item xs={12} sm={8} md={8}>
<Slide direction="up"
in={checked}
appear={true}
mountOnEnter
unmountOnExit
timeout={{ enter: 1000 , exit: checked ? 1 : 900}}
>
<Card variant="outlined" sx={{ bgcolor: "#bea"}} elevation={0}>
<CardContent>
<form onSubmit= {handleSubmit}>
<CardActions>
<Button type="submit" color="warning" variant="outlined" disabled={currentQuestion===0} className={classes.button} onClick={previousQuestion}>
Previous</Button>
</CardActions>
<FormControl component='fieldset' className={classes.formControl}
data-hidden={questions[currentQuestion].number !==
currentQuestion[questions[currentQuestion] .number]} >
<FormLabel component='legend'>
{questions[currentQuestion].question}
</FormLabel>
<FormLabel component='legend'>
{questions[currentQuestion].description}
</FormLabel>
<RadioGroup
aria-label='quiz'
name='quiz'
value={questions[currentQuestion].value}
checked={checked}
onChange={(e)=> handleRadioChange(questions[currentQuestion].number, e)}
sx={{
color: pink[800],
'&.Mui-checked': {
color: blue[600],
},
}}>
{options.map((option) => (
<FormControlLabel
key={option.score}
value={option.score}
control={<Radio sx={{
color: pink[800],
'&.Mui-checked': {
color: blue[600],
},
}}/>}
label={option.label}
/>
))}
</RadioGroup>
</FormControl>
<CardActions>
<Button type="submit" variant="contained" color="primary" className={classes.button} disabled={currentQuestion != 5} onClick={handleSubmit}>
Submit
</Button>
</CardActions>
</form>
</CardContent>
</Card>
</Slide>
This is not working smoothly. So please help. The problem is on click of previous button the value disappeared. The slide effect is not flawless.
I have a weird issue where I can't center a Row vertically in my screen.
The Card I have is perfectally centered horizontally but not vertically. How can I do that ?
I used the Row component which has align='middle' to align vertically but it isn't working
Here is my implementation:
<Row align='middle' justify='center'>
<Col span={18}>
<Card>
{/* <img className='login-logo' src={logo} alt='logo' /> */}
<Text size='30px' type='BOLD'>
QIFF DASHBOARD
</Text>
<Form name='login' onFinish={formik.handleSubmit}>
<Form.Item>
<Input
id='email'
name='email'
label='Email'
placeholder='Email'
type='email'
autoComplete='new-email'
onBlur={formik.handleBlur}
onChange={formik.handleChange}
value={formik.values.email}
/>
{formik.errors.email ? <Text>{formik.errors.email}</Text> : null}
</Form.Item>
<Form.Item>
<Input
id='password'
name='password'
placeholder='Password'
type='password'
autoComplete='new-password'
onBlur={formik.handleBlur}
onChange={formik.handleChange}
value={formik.values.password}
/>
{formik.errors.password ? <Text>{formik.errors.password}</Text> : null}
</Form.Item>
<div className='submit-button'>
<Button
htmlType='submit'
onClick={formik.handleSubmit}
style={{ width: '100%', backgroundColor: '#f85940', color: 'white' }}
>
Sign in
</Button>
</div>
</Form>
</Card>
</Col>
</Row>
<Row align='middle' justify='center'></Row>
Presumably, the Row tag does not set the attribute display:flex
So justify='center' is invalid
The following solutions can be used：
1、Child element (Need to be centered vertically)
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
2、 <Row style="display:flex"></Row>
Hello, I am using react-bootstrap library. I want to center the search bar and button on the navbar. But while centering, it's also taking into account the sibling element (logo) and leaning towards the right of the page. I don't want to solve this by applying brute force minus margin-left if possible. I'm confused with these justify-content stuff. Thanks in advance.
<Navbar style={{ backgroundColor: "#D3D3D3" }}>
<Nav className="d-flex justify-content-start">
<NavbarBrand href="/">
<img src={logo} alt="pokedex-logo" style={{ width: 250, marginLeft: 20 }} />
</NavbarBrand>
</Nav>
<Nav className="d-flex flex-grow-1 justify-content-center">
<Form className="d-inline-flex">
<FormControl
type="search"
placeholder="Type pokemon name"
value={search}
onChange={e => setSearch(e.target.value)}
/>
<Button
style={{ backgroundColor: "#ffe031", color: "#396bba" }}
onClick={() => history.push(`/pokemon/${search}`)}
>
<strong>Search</strong>
</Button>
</Form>
</Nav>
</Navbar>
Try it like this:
<Navbar style={{ backgroundColor: "#D3D3D3", display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'start' }}>
<NavbarBrand href="/">
<img src={logo} alt="pokedex-logo" style={{ width: 250 }} />
</NavbarBrand>
<Form className="" style={{ margin: 'auto' }}>
<FormControl type="search" placeholder="Type pokemon name" value={search} onChange={e => setSearch(e.target.value)}/>
<Button style={{ backgroundColor: "#ffe031", color: "#396bba" }} onClick={() => history.push(`/pokemon/${search}`)}>
<strong>Search</strong>
</Button>
</Form>
</Navbar>
Here, the Navbar has display flex and the flex direction is row so the logo along with the 2 search elements (text field and search button) will be shown in a row. Then alignItems:'center' centers these 3 elements vertically in the Navbar and the justifyContent: 'start' moves the 3 elements to the start of the Navbar horizontally.
After this, to make the 2 elements of search come in the center, margin:'auto' is used in the Form.
And here's another way: (if the above code doesn't correctly align the search elements in center)
<Navbar style={{ position: 'relative', display: 'flex', backgroundColor: "#D3D3D3" }}>
<NavbarBrand href="/" style={{float: 'left'}}>
<img src={logo} alt="pokedex-logo" style={{ width: 250 }} />
</NavbarBrand>
<Form style={{ float: 'none', position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}>
<FormControl type="search" placeholder="Type pokemon name" value={search} onChange={e => setSearch(e.target.value)} />
<Button style={{ backgroundColor: "#ffe031", color: "#396bba" }} onClick={() => history.push(`/pokemon/${search}`)}>
<strong>Search</strong>
</Button>
</Form>
</Navbar>
In this code, the CSS properties of position and float are used. float: 'left' moves the logo to the left and the search elements have float: 'none'. The search elements use the position property to align to the center of the Navbar which has position: 'relative'.
I'm trying to align two buttons at the right corner of a row but no matter what method I use it shows the same result every time here's the code for your reference:
import React from "react";
import bootstrap from "bootstrap";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
const AdminPanel = () => {
const users = [{ name: "Talha" }, { name: "Ali" }];
return (
<Container className="pt-5">
<Row className="d-flex" style={{ height: "70vh" }}>
<Col className="shadow-lg bg-white rounded mx-5">
{users.map((user) => (
<Row
className="shadow my-3 mx-2 py-2 px-2 rounded font-weight-bold"
style={{ height: "7vh" }}
>
{user.name}
<div className="btn-group">
<a href="#">
<button className="btn btn-primary">Edit</button>
</a>
<a href="#">
<button className="btn btn-danger">Delete</button>
</a>
</div>
</Row>
))}
</Col>
<Col className="shadow-lg bg-white rounded mx-5">
<h1>
list
</h1>
</Col>
</Row>
</Container>
);
};
export default AdminPanel;
the result I'm getting is this:
Any help would be appreciated!!!!!
Add class: ml-auto (= margin-left:auto !important) into:
<div className="btn-group ml-auto">
As this div is in a div.row that has the property display:flex; applied, it should push it to the right automaticly
Add
className="float-right"
to the div wrapping the buttons
You can add each block of child Element of your Row in a Col Component and add the justify-content-between class to the Row Component like this
<Col className="shadow-lg bg-white rounded mx-5">
{users.map((user) => (
<Row
className="justify-content-between shadow my-3 mx-2 py-2 px-2 rounded font-weight-bold"
style={{ height: "7vh" }}
>
<Col>
{user.name}
</Col>
<Col>
<div className="btn-group">
<a href="#">
<button className="btn btn-primary">Edit</button>
</a>
<a href="#">
<button className="btn btn-danger">Delete</button>
</a>
</div>
</Col>
</Row>
))}
</Col>