Bootstrap 5 table buttons placement

Question

I have a table that is supposed to represent a CRUD application in which there is a person's details as well as an edit and delete button. The two buttons (as well as any other buttons that may be added later) are intended to display side by side of each other. This works on larger screen sizes, however on smaller devices, the buttons stack on top of each other.

How do I make it so that the buttons remain to the side of each other on smaller screen sizes?

<head>
  <!--Material Icons -->
  <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet" />

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />


  <title>Hello, world!</title>
</head>

<body class="bg-light">


  <!-- Main body -->
  <div class="container">
    <!-- Table -->
    <div class="table-responsive">
      <table class="table table-fit mt-5 table-dark table-striped">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
            <th scope="col">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>myFirstName</td>
            <td>myLastName</td>
            <td>@myHandle</td>
            <td>
              <a type="button" class="btn">
                <i class="material-icons text-warning">edit</i>
              </a>
              <a type="button" class="btn">
                <i class="material-icons text-danger">delete</i>
              </a>
            </td>
          </tr>
          <tr>
            <th scope="row">1</th>
            <td>anotherFirstName</td>
            <td>anotherLastName</td>
            <td>@anotherHandle</td>
            <td>
              <a type="button" class="btn">
                <i class="material-icons text-warning">edit</i>
              </a>
              <a type="button" class="btn">
                <i class="material-icons text-danger">delete</i>
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

You'd use any of the common, fundamental means of [preventing line wrap](https://stackoverflow.com/questions/300220/how-to-prevent-text-in-a-table-cell-from-wrapping), or use Bootstrap's [button groups](https://getbootstrap.com/docs/5.0/components/button-group/) or [flex containers](https://getbootstrap.com/docs/5.0/utilities/flex/). You have lots of options. What have you tried? — isherwood, Jul 07 '21 at 13:43
Also, anchor elements don't have a type attribute. You should probably be using actual buttons anyway, since anchors are intended for navigation. — isherwood, Jul 07 '21 at 13:43

score 0 · Accepted Answer · answered Jul 07 '21 at 14:28

The issue has been solved by putting both buttons inside of a flex container

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!--Material Icons -->
    <link
      href="https://fonts.googleapis.com/css2?family=Material+Icons"
      rel="stylesheet"
    />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />



    <title>Hello, world!</title>
  </head>
  <body class="bg-light">
    

    <!-- Main body -->
    <div class="container">
      <!-- Table -->
      <div class="table-responsive" >
      <table class="table table-fit mt-5 table-dark table-striped" >
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
            <th scope="col">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>myFirstName</td>
            <td>myLastName</td>
            <td>@myHandle</td>
            <td >
              <div class="d-flex flex-row  mb-3">
                <div ><button type="button" class="btn">
                  <i class="material-icons text-warning">edit</i>
                </button></div>
                <div ><button type="button" class="btn">
                  <i class="material-icons text-danger">delete</i>
                </button></div>
              </div>
            </td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>anotherFirstName</td>
            <td>anotherLastName</td>
            <td>@anotherHandle</td>
            <td >
              <div class="d-flex flex-row mb-3">
                <div ><button type="button" class="btn">
                  <i class="material-icons text-warning">edit</i>
                </button></div>
                <div ><button type="button" class="btn">
                  <i class="material-icons text-danger">delete</i>
                </button></div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->


    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

score -1 · Answer 2 · answered Jul 07 '21 at 13:57

That's a really painful situation every developer faced during such use cases.

Nevertheless, there are a couple of solutions (I would say UX ) you should consider:

If there is a high chance of increasing action buttons, you can simply group them all and add more buttons to display the list of action items: Refer the screenshot

If you don't want to go with option 1., you can choose to convert your table into an accordion after specific breakpoints where the user can see the full name and all the action items or make it a card-based layout to display all the records.
Display all the action items on the hover of the row. All the action items would be slide/fade from/on the right side on top of the row. Similar to Gmail.

Bootstrap 5 table buttons placement

2 Answers2