Search code examples
reactjsreactstrap

How to align buttons in reactstrap?

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>

The resulting effect

UPDATE

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

Button Padding

The textbox doesnt have any padding enter image description here

Solution

  • 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.