Positioning of buttons in Bootstrap 5 tables

I am working on a table that represents a CRUD application with details of a person and edit/delete buttons. The goal is to have these buttons displayed side by side, even on smaller screen sizes where they currently stack on top of each other.

How can I ensure the buttons stay aligned horizontally on all screen sizes?

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

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3c31312a2d2a2c3f2e1e6b706e706c">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5c7cacad1d6d1d7c4d5e5908b958b97">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

htmlcssbootstrap-tablebootstrap-5

Answer №1

The solution involved organizing both buttons within a flex container for optimal display

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Necessary 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f1d10100b0c0b0d1e0f3f4a514f514d">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />



    <title>Greetings!</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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93f1fcceffefebcdfdfaf7fffab6f3fee7fafdddadfbb6fafffb96ebe7fbe2aaafe0ebb0fce9fefebbfeadadb6def3dcbcdecfeafb"/></span>;
      -mailprotection-.net/p/AIiCRSN-HkcrPNWoHvKRgNmM-mILAnUmEfSKXDKPM.mxnUCULSOTNUMAE/
EEEs" target="_blank"></a>“ [email protected] ” -

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"><strong>[email protected]</strong></em>" +
                      "<hr><label for='date'>Date</label><input id='date' />")
      return false;
[]}";       
Copyright ©
2023“[bc],"-[bd],"{text=text}");}) 
{/* 
 
*|{@pop}
*{@dbase{text=text}} 
*/rift://{sitemap-ndex.removeFromSelectionnoteq['all']}={{Firs}</pot>

(InputfromInput)=#{requireSoutReverroverts}

[].lineTooLong={constJavaScriptOne instanceof AlertError}

Refine:

Pop.openCloseMain('BarSignal') = function(event) {
   // Create an object from the event
   
     wait("...");
  
   }; 

[/]=<{(popup-bottom--pushed.down.prev)}>
Array.new:dataEdit.push(mainArea.selection);deepCompare(new,"content");
`document.console('<br>',console.savercpu);
   

// Message total dilimina
  
Message.pass(zipPassword.failover());

Exception.error(metricsSave);

/></html>

Privacy.promise.addEventListener(function() {$(this.script.expose.readyState(window.data).ready});]]>

Answer №2

Dealing with this issue is a challenge that many developers encounter in scenarios like this.

However, there are a few solutions (specifically concerning UX) that you might want to consider:

  1. If the likelihood of adding more action buttons is high, you could group them together and include additional buttons to show a list of all available actions: Take a look at the screenshot for reference

  1. If option 1 isn't your preference, you could opt to convert your table into an accordion layout after certain breakpoints. This way, users can view the full name along with all the action items, or switch to a card-based design to display all records.

  2. Show all the action items when hovering over a row. The action items would slide or fade in from the right side on top of the row, similar to how Gmail functions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Nested scrolling bars within each other

Currently, I am importing photos from a Facebook page and displaying them on my jQuery mobile webpage using the photoSwipe plugin. However, there seems to be an issue with the final appearance of the images. Pay attention to the image where the red arrow ...

javascriptjqueryhtmlscrollbar

Personalizing the fileTemplate selection in FineUploader

My English is not the best, so apologies in advance. I'm struggling to customize the FineUploader FileTemplate option. I don't want to use fineUploaderBasic; I want total customization. Initially, I managed to hide the file name and size after a ...

jqueryhtmlcssfine-uploader

Despite being in perfect condition, my If-Else statement is refusing to function properly

I had previously posted a similar question, but it was removed. However, I am still very curious about why something seemingly trivial is not functioning properly. This is the entirety of my HTML and JavaScript code... <!doctype html> <html lang=& ...

javascripthtmljsonif-statementasynchronous

Need help styling a CSS for an iFrame on the same domain as my website?

After doing some research and browsing through Stack Overflow questions, I've discovered that even if you don't have access to the iFrame's stylesheet, you can still make edits as long as it resides in the same domain as your webpage where y ...

htmlcssiframe

Concealing a CSS class with PHP within the Wordpress Woocommerce platform

I have very limited knowledge in programming and need help with a code snippet. I am using the Wordpress Snippets Plugin to hide the Add Cart Button from a single product. add_action( 'wp', 'rudr_remove_add_to_cart_single_product' ); fu ...

phpcsswordpressclasswoocommerce

Finding your site's First Contentful Paint (FCP) can be done by analyzing the

After doing some research on Google insights, I came across information about FCP. However, I'm still unsure about how to determine my site's FCP and other relevant metrics. If anyone could provide me with more information or share detailed link ...

javascripthtmlcss

Is it possible for HTML/CSS to automatically adjust content size to fit or fill a container?

I'm interested in finding a CSS-only technique that can ensure content within a container scales to fit, regardless of whether it's text or images. Take a look at the example below: .container { display: inline-block; width: 2in; hei ...

htmlcss

Concealed scrollbar only visible upon resizing the page

For my personal project, I was in need of a custom scrollbar plugin with basic inertia effects and custom images. After some research, I decided to go with mCustomScrollbar. The documentation provided was quite clear, and implementing the script was troub ...

jqueryhtmlscrollbarmcustomscrollbar

Struggling with creating an html file that is responsive on mobile devices

I am currently utilizing bootstrap 4 for the construction of a website. I have encountered an issue where my homepage does not display properly on handheld devices when using Google Chrome's device toggle toolbar. The homepage requires scrolling to vi ...

htmlcssbootstrap-4

Striving to implement a dynamic expand and collapse animation feature for a card in ReactJS

I'm attempting to create an expand and collapse animation effect on a card without relying on bootstrap or any external libraries. I have tried adding a transition property but it doesn't seem to work when the button is clicked. Here is the comp ...

cssreactjs

Assistance needed with CSS floating properties

Despite seeing many inquiries about float, I still can't pinpoint what's causing my issue. My objective is simple: GREETINGS FRIEND I aim for it to align just to the left of the unordered list. Referencing this solution, I attempted adding cl ...

htmlcsscss-float

What is the process for installing and utilizing the custom CSSLint rules that I have developed for the command line interface?

After investing a significant amount of time into following the instructions outlined here and here for creating custom CSS linting rules using CSSLint via the CLI, I have successfully generated and tested my own set of rules. However, I am now facing the ...

cssnpminstallationlintcsslint

When I toggle the div to close on mobile, I want it to show on desktop

My attempt at creating a toggle button to hide and show content was not successful. I struggle with coding in Javascript/Jquery. In the desktop view, the description displays perfectly (see image here), but in mobile view, there is a button to toggle hidi ...

javascriptjqueryhtmlcss

I would like the dropdown menu to only appear on mobile devices

After creating a dropdown menu, I now want it to only appear in mobile view and not in other views. I believe this can be achieved using "visible-xs" or a similar method, but I am struggling with the coding. Below is my HTML code: <nav class="navb ...

htmlcssbootstrap-4

Recreating a <select> element and verifying it once more using JS/HTML5

Before I delve into my issue, I would like to offer an apology for any errors in my English. So, the HTML code I am working with looks like this: <body> <div id="container"> <div id="taskList"> <div id="firstTask"> & ...

javascriptangularjshtmldrop-down-menu

Move content off the screen using CSS3 translation

Throughout various projects, I have encountered the need to make elements on a webpage translate out of view (essentially making them fly out of the document). The idea was that by simply adding a class to the element, the CSS would take care of the animat ...

javascripthtmlcss

The style from 'http://localhost:2000/cssFile/style.css' was rejected because its MIME type was 'text/html'

Currently, I am attempting to include my style.css file in the home.ejs file being rendered by express.js. However, I keep encountering the following error: Refused to apply style from 'http://localhost:2000/cssFile/style.css' because its MIME t ...

javascripthtmlnode.jsexpressejs

Video from Brightcove continues to play even after closing the modal dialog

My concept for opening a Brightcove video in a modal dialog when a button is clicked has been successfully implemented. Below is the code snippet I used for this implementation: Html code: <a class="videoTutorialB" href="#">Watc ...

javascripthtmljquerybrightcove

Creating a Dojo HTML template involves incorporating repetitive sections of HTML code within the template structure

I am working with a custom Dojo widget that is based on a template and has an HTML template stored in a separate .html file. Here is the Dojo Widget code snippet: define("dojow/SomeWidgetName",[ "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_Templat ...

javascripthtmldojo

What is the best way to exclude blank fields when displaying a form for printing?

I have a form created using PHP. Although it displays correctly, I would like it to check each field and exclude any div/element/field that is left empty when I choose to print the form. Below is an example of the form code in the printable PHP file. If n ...

phphtml