Do you notice how the titles, text boxes, and buttons are all misaligned and messy-looking? How can I make them line up nicely together? I especially want the buttons to anchor themselves at the bottom of this component.
I've already tried a few solutions. I came across a discussion about Cards and Card Decks for aligning button elements within a Card, but none of the styling techniques they suggested seemed to work in my case.
https://i.sstatic.net/oBkU0.png
Here is the code snippet for the component that contains all these elements:
import { Button, Row, Col, Container, Form } from "react-bootstrap"
import styles from "../styles/ParameterList.module.scss"
import {useState} from 'react'
const ParameterList = ({onRandomList, onNewList, onClear, onDupesCheck, dupesChecked}) => {
const [newListState, setNewListState] = useState('')
const [minNumberState, setMinNumberState] = useState('')
const [maxNumberState, setMaxNumberState] = useState('')
return (
<div className={styles.container} id="paramsDiv">
<Container fluid >
<Row>
<Col align="center">
<Form>
<Form.Label>Generate an entirely new list of instruments</Form.Label>
<Form.Control className={styles.formControlOverride} type="number" placeholder="Minimum" min="0" value={minNumberState} onChange={(e) => setMinNumberState(e.target.value)}/>
<Form.Control className={styles.formControlOverride} type="number" placeholder="Maximum" min="0" value={maxNumberState} onChange={(e) => setMaxNumberState(e.target.value)}/>
<Button className='align-self-end' type="button" onClick={() => {onRandomList(minNumberState, maxNumberState); setMaxNumberState(''); setMinNumberState('')}}>Generate Random List</Button>
</Form>
</Col>
<Col align="center">
<Form>
<Form.Label>Add a random group of new instruments</Form.Label>
<Form.Control className={styles.formControlOverride} type="number" placeholder="Amount of Instruments" min="0" value={newListState} onChange={(e) => setNewListState(e.target.value)}/>
<Button className='align-self-end' type="button" onClick={() => {onNewList(newListState); setNewListState('')}}>Generate Random Instrument(s)</Button>
</Form>
</Col>
<Col align="center">
<Form>
<Form.Label>Choose an instrument to add to the list</Form.Label>
<Button>Select Instrument</Button>
</Form>
</Col>
</Row>
</Container>
</div>
)
}
export default ParameterList
And here is the corresponding SCSS code:
.container {
background-color: #fff;
padding: 1.5rem;
margin: 1rem 10rem;
align-items: center;
border-radius: .5rem;
}
.formControlOverride {
margin: .5rem
}
.formCheckOverride {
margin-bottom: .5rem;
}
Thank you in advance for any assistance!