11

I am fairly new to React-Bootstrap (and front-end work in general). What is the best practice for aligning elements when using React-Bootstrap?

For example:

<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 do I align the Button component neatly to the Input component? By default the button is aligned to the top.

Screenshot

Besides solving this particular issue I am interested in pointers on best practices on aligning with React-Bootstrap.

Roy van der Valk
  • 527
  • 1
  • 6
  • 18

2 Answers2

9

Technically your both the col are aligned next to each other perfectly.

Since the input is inside the form group, it gets the extra height as compared to the "clear" button.

If you remove label="Filter" from your code you can see the proper alignment.

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

Here is the Demo

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

Ajey
  • 7,924
  • 12
  • 62
  • 86
  • Thank @ajey! Where should is the neatest place to do this? Can I somehow override it in Bootstrap-React or should I edit this in the bootstrap less/css file itself? – Roy van der Valk Jan 05 '16 at 17:12
  • Overriding bootstrap library is not a good idea. Create your own css/less file and style the button via a selector. – Ajey Jan 05 '16 at 17:29
  • Thanks! Accepted your answer - cannot upvote it unfortunately (not enough reputation). – Roy van der Valk Jan 05 '16 at 18:32
-2

Add this one.

<Row className="align-items-end">
yashod perera
  • 375
  • 3
  • 3