Question 243066 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to vertically align items in a React Bootstrap Table row

I want to center the content in a React Bootstrap Table row, along the y-axis.

Here’s the code I currently have:

import React from "react";
import { ThreeDots } from "react-bootstrap-icons";

return (
<Table>
  <thead>
    <tr>
      <th>#</th>
      <th>Question</th>
      <th>Answer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Define inflation</td>
      <td>Inflation is the rate of increase ...</td>
      <td><ThreeDots/></td>
    </tr>
  </tbody>
</Table>
);

Here’s what I tried:

import React from "react";
import { ThreeDots } from "react-bootstrap-icons";

return (
<Table>
  <thead>
    <tr>
      <th>#</th>
      <th>Question</th>
      <th>Answer</th>
    </tr>
  </thead>
  <tbody>
    <tr className="d-flex align-items-center">
      <td>1</td>
      <td>Define inflation</td>
      <td>Inflation is the rate of increase ...</td>
      <td><ThreeDots/></td>
    </tr>
  </tbody>
</Table>
);

I added className="d-flex align-items-center" to the <tr> element.

But the table’s borders gets all funky & jumbled up, anyone know what i can do to fix this?

Update

Okay i figured out using the class align-middle can vertically center the content of a table cell, as per Boostrap doc.

Does anyone know if there is a CSS/Bootstrap styling that I can apply to the table row or table so that all rows are vertically centered?

Tags:

3

Answers


  1. 0

    vertical-align property should be put on td and not tr, because it defines how the object relates to it’s parent. But you can use proper css selector to apply it.

    table td {
  vertical-align: center;
}
    Login or Signup to reply.
  2. 0

    Here’s the CSS code you can use to define the d-flex align-items-center class:

    /* Custom CSS */
.d-flex {
  display: flex !important;
}

.align-items-center {
  align-items: center !important;
}

    Add this CSS code to your project’s stylesheet. Make sure to include this stylesheet in your project’s HTML file so that the custom CSS rules are applied to the table cells as intended. This will help you achieve the desired vertical alignment within the table cells while preserving the table’s layout and borders.

    For the updated question:

    To vertically center all rows within a Bootstrap table, you can apply the align-middle class to the <tr> elements directly within the <tbody> section. This will vertically center the content of all cells in each row. Here’s how you can modify your code to achieve this:

    import React from "react";
import { ThreeDots } from "react-bootstrap-icons";

return (
  <Table>
    <thead>
      <tr>
        <th>#</th>
        <th>Question</th>
        <th>Answer</th>
      </tr>
    </thead>
    <tbody>
      <tr className="align-middle">
        <td>1</td>
        <td>Define inflation</td>
        <td>Inflation is the rate of increase ...</td>
        <td><ThreeDots /></td>
      </tr>
      {/* Add more rows here */}
    </tbody>
  </Table>
);

    By adding the align-middle class to the <tr> elements within the <tbody>, you ensure that all rows’ content is vertically centered in each cell. This provides a consistent vertical alignment across all rows in the table.

    Login or Signup to reply.
  3. 0

    Add the align-middle bootstrap class to all of the td elements. Or define a custom component to pass the data to that has the class already applied.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search