Alignment with React-Bootstrap

Question

I am new to React-Bootstrap (and mostly working with the interface). What is the best practice for aligning elements when using React-Bootstrap?

For instance:

<Grid> <Row className="show-grid"> <Col md={10}> <Input type="text" label="Filter"/> </Col> <Col md={2}> <Button>Clear</Button> </Col> </Row> </Grid> 

https://jsfiddle.net/f9vdksnu/1/

How can I neatly align a Button component with an input component? By default, the button is aligned at the top.

In addition to solving this particular problem, I am interested in pointers to recommendations for reconciliation with React-Bootstrap.

Answer 1

Technically, your two columns are perfectly aligned with each other.

Since the input is inside a group of forms, it gets an extra height compared to the clear button.

If you remove label="Filter" from your code, you will see the correct alignment.

The only thing I see now is to give the button margin-top: 25px; .

Here is a demo

Basically, I gave a custom class to a button, and in css I added a margin that I needed to align.