Search code examples
htmlcssbootstrap-tablebootstrap-5

Bootstrap 5 table buttons placement

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>

Solution

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