React Bootstrap: Vertical alignment of row's columns?

Question

I am using react bootstrap, I am trying to align items vertically within a row but with no luck. My problem is I have a button in one of the columns, so for the other columns all the texts are shifted up a bit while the button and its content have a larger height. My question is how can I make all columns within a row to have the same height and to all align in the middle vertically? The only solution I managed to find so far is using CSS: tranform: translateY(-50%) this does the trick, but I was looking for a better more dynamic solution as this needs to be applied for every column excepts for the button column

EDIT: When I say columns and rows, I'm talkign about bootstrap's Col and Row, not actually a table or rows and columns; sorry for the misunderstanding

kburgie · Accepted Answer · 2019-10-30 00:06:32Z

36

You can apply any of Bootstrap's classes to a React Bootstrap component. So, per the Grid System docs, the following columns will both be centered vertically:

<Row className="align-items-center">
  <Col>
    <h1>{title}</h1>
    <p>{details}</p>
  </Col>
  <Col>
    <button>{callToAction}</button>
  </Col>
</Row>;

answered Oct 30, 2019 at 0:06

kburgie

7851 gold badge6 silver badges15 bronze badges

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

1 Comment

Aaron Liu Over a year ago

At least this answer works for me. I suggest react-bootstrap team update the docs ASAP. Sometimes I am not quite sure if all the features from Bootstrap are also valid in reactjs bootstrap.

Sarahshuffle · Accepted Answer · 2018-09-24 21:13:44Z

5

If you are using table rows, you can wrap contents within a <div>..</div>

like:

<tr>
  <div classname="align-me"></div>
</tr>

and then you can use flexbox to align them dynamically:

tr .align-me {
  display: flex;
  align-items: center;
}

answered Sep 24, 2018 at 21:13

Sarahshuffle

1822 silver badges11 bronze badges

2 Comments

user3570947 Over a year ago

Sorry for the misunderstanding, I was actually referring to bootstrap's 'col' and 'row' classes, and not to the actual HTML tables

Sarahshuffle Over a year ago

can you post the related code snippet or a jsfiddle link?

Henry Ecker · Accepted Answer · 2022-03-06 00:35:37Z

4

I had the same problem, and I found this:

<td className="align-middle"></td>

ref: https://www.codegrepper.com/code-examples/html/bootstrap+table+text+vertical+align+center

edited Mar 6, 2022 at 0:35

Henry Ecker♦

35.8k19 gold badges48 silver badges67 bronze badges

answered Jan 26, 2022 at 15:10

Makara Atipatipat

411 bronze badge

Collectives™ on Stack Overflow

React Bootstrap: Vertical alignment of row's columns?

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related