<Form>
<Row>
<Col></Col>
<Col>
<h4>Demo Login</h4>
<Form.Group controlId="formGroupEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group controlId="formGroupPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Button variant="primary" type="submit">
Login In
</Button>
</Col>
<Col></Col>
</Row>
</Form>
How can I center this row on the screen?. The current items or columns are centered but I can't seem to find a way to center the row itself. I tried adding an inline style of 'align-items: enter' but that doesn't seem to work. Not even sure if I centered the columns correctly as well.
Try adding: className="align-items-end" to the row component and see if that works.
Related
i have used Reactjs with bootstrap to have forms, however i couldn't have the labels and the input fields side by side.
i only want them to be side by side not under each other.
here is my code:
const firstComponent = () => {
return (
<Form className="column justify-content-center page">
<Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
<Form.Label>Benzersiz Ad</Form.Label>
<Form.Control as="textarea" rows={3} />
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
<Form.Label>Görünen İsim</Form.Label>
<Form.Control as="textarea" rows={3} />
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
<Form.Label>Oyun Açıklaması</Form.Label>
<Form.Control as="textarea" rows={3} />
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
<Form.Label>Oyun Türü</Form.Label>
<Form.Control as="textarea" rows={3} />
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
<Form.Label>Bireysel</Form.Label>
<Form.Control as="textarea" rows={3} />
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
<Form.Label>Oyun Durumu</Form.Label>
<Form.Control as="textarea" rows={3} />
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
<Form.Label>Açık</Form.Label>
<Form.Control as="textarea" rows={3} />
</Form.Group>
</Form>
);
};
export default firstComponent
however, i have tried to style it in a different sheet but it couldn't be applied, also i tried the inline styling but it didn't work
any help is welcomed!
I am using reacts form.control, I want to reduce the size of the placeholder content :
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
I tried few approaches by placing fontsize attribute in style, yet its not workin.
Can anyone suggest me any solution/link for further analysis
You should use the ::placeholder CSS pseudo-element like the following:
.input::placeholder {
font-size: 13px;
}
I’m pretty new to front end development and am working with React currently. I’m trying to use a date input field which I currently have working. I want to format the box, the width etc of the input field.
I’m using React bootstrap formcontol with a type date. How would I go about formatting the input of the date field? I’m sure this question has been asked before, but with my little knowledge of how this is don’t I don’t know the correct question to look for. Are you formatting the FormControl or the input field? How do you distinguish the field. Etc
function renderForm() {
return (
<form onSubmit={handleSubmit}>
<FormGroup controlId="email" bsSize="large">
<ControlLabel>Email</ControlLabel>
<FormControl
autoFocus
type="email"
placeholder="Email Address"
value={fields.email}
onChange={handleFieldChange}
/>
</FormGroup>
<FormGroup controlId="date" bsSize="large">
<ControlLabel>Birthday</ControlLabel>
<FormControl
type="date"
/>
</FormGroup>
<FormGroup controlId="password" bsSize="large">
<ControlLabel>Password</ControlLabel>
<FormControl
type="password"
placeholder="Password"
value={fields.password}
onChange={handleFieldChange}
/>
</FormGroup>
<FormGroup controlId="confirmPassword" bsSize="large">
<ControlLabel>Confirm Password</ControlLabel>
<FormControl
type="password"
placeholder="Confirm Password"
onChange={handleFieldChange}
value={fields.confirmPassword}
/>
</FormGroup>
<LoaderButton
block
type="submit"
bsSize="large"
isLoading={isLoading}
disabled={!validateForm()}
>
Signup
</LoaderButton>
</form>
);
}
#radulle
I tried this which did not work. I’m not sure if this is what you meant or not
<FormGroup controlId="date" bsSize="large">
<ControlLabel>Birthday</ControlLabel>
<FormControl
type="date"
style={{width:'100%'}}
/>
</FormGroup>
I am creating a form in the front end In that I use texInput, radio button, Select component. All the texInput, radio button component are in one size as per alloted but the select component size is very small please help me to solve the select component in the same size as per textinput component
put your form in a container and override the css of the select component :
css----------------
.yourClassName{
width: 100%!important;
}
html-----------------------
<Container>
<Col md={{ span: 6, offset: 3 }}>
<Form onSubmit={this.onSubmitForm}>
<Form.Row>
<Col md={{ span: 3 }}>
<Form.Group as={Row} controlId="Email">
<Form.Label>Email Address</Form.Label>
<Form.Control type="email" placeholder="Enter Email" name="Email"
value={this.state.Email} onChange={this.handleChange} />
</Form.Group>
</Col>
<Col md={{ span: 3}}>
<Form.Group as={Row} controlId="Name">
<Form.Label>Name</Form.Label>
<Form.Control type="text" placeholder="Enter Name" name="Name"
value={this.state.Name} onChange={this.handleChange} />
</Form.Group>
</Col>
</Form.Row>
<Form>
</Col>
</Container>
I am using react-bootstrap to create a form. The title, datePicker, and dropdown do appear how I want them to, on the same row with space in between them, but when I try to insert a text-area underneath those fields, it renders next to the dropdown menu instead. What is the problem?
<Form>
<Form.Row>
<Form.Group as={Col}>
<Form.Control name="title"
type="title"
placeholder="Enter title"
value={this.state.title}
onChange={e => this.change(e)}
/>
</Form.Group>
<Form.Group as={Col}>
<DatePicker
selected={this.state.startDate}
onChange={e => this.change(e)}
/>
</Form.Group>
<Form.Group as={Col}>
<select className="custom-select" name="course" value={this.state.course} onChange={e => this.change(e)}>
<option value="Math234">Math234</option>
<option value="Art">Art</option>
</select>
</Form.Group>
</Form.Row>
<Form.Group>
<Form.Label>Enter notes</Form.Label>
<Form.Control
name = "notes"
as="textarea"
rows="3"
value={this.state.notes}
onChange={e => this.change(e)}
/>
</Form.Group>
</Form>
You have to define each Col's size. The bootstrap cols are rendering side by side if you do not tell them the axact size for each breakpoint, or at least one. In this case, your Form.Group will get the col and all the other column related classnames.
Try out something like this:
<Form.Row>
<Form.Group as={Col} sm={12}>
{/* your form control goes here */}
</Form.Group>
</Form.Row>
The xs, sm, md and lg breakpoint props are all available in this case, use them as you wish.