How to align buttons in reactstrap?

Question

I am building a web application in react and using reactstrap for certain ui design elements. I have arranged elements in row and columns. Everything else works fine but the button element is not getting aligned properly like the other elements in the row are. The button is slightly below than the other elements. Can someone tell me what i am doing wrong? Any help would be appreciated. Thank You.

App.js

              <Container>
              <Row>
                <Col>
                  <text>{item1.Title}</text>
                </Col>
                <Col>
                  <input type="text" onChange={this.handleNameChange}/>
                </Col>
                <Col>
                  <Button onClick={()=>this.handleName(this.state.itemName,item1.Title,item.Title)} color="success" size="sm" >Save</Button>
                </Col>
              </Row>
              </Container>

UPDATE

The button column seems to be having some sort of padding.

The textbox doesnt have any padding

Carlos Saiz Orteu · Accepted Answer · 2020-04-13 20:04:39Z

2

give the 3rd Col a className and use the following css:

.class-col {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
}

.main-container {
    display: flex;
}

And you code:

<Container>
              <Row className="main-container">
                <Col className="class-col">
                  <text>{item1.Title}</text>
                </Col>
                <Col className="class-col">
                  <input type="text" onChange={this.handleNameChange}/>
                </Col>
                <Col className="class-col">
                  <Button onClick={()=>this.handleName(this.state.itemName,item1.Title,item.Title)} color="success" size="sm" >Save</Button>
                </Col>
              </Row>
              </Container>

Give this a try.

edited Apr 13, 2020 at 20:04

answered Apr 13, 2020 at 19:39

Carlos Saiz Orteu

1,8151 gold badge13 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kunal Over a year ago

Thanks for your response. However doing this moved the button even further down. Any other ideas?

Kunal Over a year ago

Still is not working. I will make an update to my post maybe that will help.

Carlos Saiz Orteu Over a year ago

Thats a margin fron the button, set margin to 0 in a classname in button

Kunal Over a year ago

That did it. Thanks!

Collectives™ on Stack Overflow

How to align buttons in reactstrap?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related