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

score 32 · Answer 1 · answered Oct 30 '19 at 00:06

32

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 '19 at 00:06

kburgie

695
6
14

1

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. – Aaron Liu Aug 22 '20 at 05:01

score 5 · Accepted Answer · answered Sep 24 '18 at 21:13

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 '18 at 21:13

Sarahshuffle

182
2
11

1

Sorry for the misunderstanding, I was actually referring to bootstrap's 'col' and 'row' classes, and not to the actual HTML tables – user3570947 Sep 25 '18 at 07:29
can you post the related code snippet or a jsfiddle link? – Sarahshuffle Sep 25 '18 at 21:29

score 4 · Answer 3 · edited Mar 06 '22 at 00:35

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 06 '22 at 00:35

Henry Ecker

34,399
18
41
57

answered Jan 26 '22 at 15:10

Makara Atipatipat

41
1

score 0 · Answer 4 · answered Jun 26 '22 at 12:38

I tried the snippet in @kburgie's answer, but it did not work for me, my Row wouldn't budge an inch. So, I drew a border around that Row, to figure out what was happening.

Seems that Row has just enough height to fit its children, not an inch more, and that's why it can't move vertically. Gave the row some height, and it worked effortlessly.

.viewport-height {
     height: 100vh;
}

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

Could've added this as a comment to @kburgie, but I lack reputation.

React Bootstrap: Vertical alignment of row's columns?

4 Answers4

Linked