Resize images within a button using table cell size in Bootstrap

I am looking to create a row of buttons within a table, where each button is represented by an image and has a transparent border/background.

To achieve this, I placed each button in one of the 10 remaining cells of a table using 

<td class="col-sm-1">
and attempted to ensure that the images are set to cover. However, I encountered an issue where the border did not align with the border of the image in the line above:

button.transparent {
  background: transparent;
  border: none !important;
}

.gborder {
  border: 4px solid green;
  /* outline: 2px solid white; */
}

.selectedTD {
  background-color: grey !important;
  border-bottom: 2pt solid grey;
}

span.smallText {
  color: white;
  font-size: 70%;
}

.imgButton {
  cursor: pointer;
  background-size: cover;
/* background-size: contain; */
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  min-height: 48px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c1e1313080f080e1d0c3c49524c524e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e6c61617a7d7a7c6f7e4e3b203e203c">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<table class="table table-striped table-hover caption-top">
    <tbody id="table">
        <tr>
            <td class="col-sm-2">
                <h5 class="text-start">click for details:</h5>
            </td>
            <td class="col-sm-1 ">   
                <button class="transparent" disabled>
                    <img src="image-url.jpg" 
                         class="gborder imgButton">
                </button>   
            </td>
            ... [remaining code here]
        </tr>
        ... [additional rows of code]
    </tbody>
</table>

Additional information:

  • The first line ("click for details") always consists of 1 col-sm-2 entry and 10 col-sm-1 entries.
  • The second line always contains 2 col-sm-2 entries and 7 col-sm-1 entries.
  • The aspect ratio of the images must be maintained.

How can I ensure that the border of the second line aligns with the first line when the browser window size changes? Specifically, I would like the image in the second line with the col-sm-2 class to occupy exactly 2 items, while maintaining consistent border alignment throughout.

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Consider integrating Bootstrap's row class into your tr element to ensure consistent column alignment across rows.

<tr class="row">

To get rid of the space around the image, simply remove the padding using this CSS:

.row img {
  padding: 0;
}

It is also recommended to apply a parent row class to your img elements in the first row to correct any misaligned image borders.

Your revised code snippet will appear as follows:

button.transparent {
  background: transparent;
  border: none !important;
}

.gborder {
  border: 4px solid green;
  /* outline: 2px solid white; */
}

.selectedTD {
  background-color: grey !important;
  border-bottom: 2pt solid grey;
}

span.smallText {
  color: white;
  font-size: 70%;
}

.imgButton {
  cursor: pointer;
  background-size: cover;
  /* background-size: contain; */
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  min-height: 48px;
}

.row img {
  padding: 0;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceaca1a1babdbabcafbe8efbe0fee0fc">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e98b86869d9a9d9b8899a9dcc7d9c7db">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<table class="table table-striped table-hover caption-top">
  <tbody id="table">
    <tr class="row">
      <td class="col-sm-2">
        <h5 class="text-start">click for details:</h5>
      </td>
     ... (remaining code) ... 
      <td class="col-sm-1 selectedTD">
        <button class="transparent" disabled>
                    <div class="row">
                        <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                             class="gborder">
                     ... (continue with remaining structure) ... 
                </button>
      </td>
    </tr>
  </tbody>
</table>

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

The appearance of a <div> element results in a border being applied to a different element

When hovering between the two borders, an undesirable (albeit very small) border appears around them. Can anyone assist me with this issue and explain why it is happening? I have attempted to set a transparent border on each element but without success. R ...

htmlcssbordertransition

Dynamically populate select options using Spring Boot Ajax technology

Hey everyone, I need some help with populating a select tag with a list of objects in JavaScript. Here's an example of the code: @RequestMapping(value="/getAllIndustries") @ResponseBody public List<IndustryModel>getAllIndustries() { return ...

javascriptjqueryhtmlajaxspring

Extract the title of a research paper from the personnel website

I am looking to extract the title and authors of journal articles from the official web pages of all staff members. For example: https://eps.leeds.ac.uk/civil-engineering/staff/581/samuel-adu-amankwah The specific section I need to access is this: https: ...

htmlrweb-scraping

Using preventDefault in the compositionend event does not make any difference

var inputNode = document.getElementById('view_1'); inputNode.addEventListener('compositionend', function(e) { console.log(e.cancelable); // true e.preventDefault(); }); <div id="view_1" class="view" contenteditable="true> &l ...

javascripthtmldom-eventscontenteditable

Adjusting HTML5 drag height while resizing the window

Code conundrum: var dragHeight = window.innerHeight - parseInt(jQuery("#drag_area").css("margin-top")) - 5;. It sets the drag height based on browser size, but there's a glitch. If I start with a non-maximized browser and then maximize it, the drag he ...

javascriptjquerycsshtml

Utilizing HTML5 audio elements with jQuery enhances the auditory experience

As I delve into creating a simple media section for a website, I have encountered some challenges that I would like to address. Let me explain the issue I am facing. I currently have a 'play list' consisting of 'links' - represented by ...

jqueryhtmlhtml5-audio

The image does not appear to have been edited even after clicking the update button

I'm currently following a Django tutorial but I'm having an issue with editing blog post images in my blog app. I am using Django version 3.1.2. views.py def edit_post(request, post_id): post = BlogPost.objects.get(id=post_id) if reques ...

htmldjangodjango-viewsdjango-formsdjango-templates

Decrease the font size of text using intervals in CSS

I'm facing a challenge where I need to decrease the font size by 10% every 2 seconds. <div class="shrink"> text </div> .shrink{ transition: 2s linear all; font-size : 20px; } Is there a way to achieve this using only CSS? ...

css

Tips for sending a JavaScript parameter to PHP

I am implementing a pop-up modal window that retrieves data from the myForm and saves the email field value to a JavaScript variable in index.php. How can I pass this JavaScript value to PHP and display it using echo, without refreshing the index.php windo ...

javascriptphphtml

What could be causing the removeChild() method to fail when trying to delete a list item in JavaScript DOM manipulation?

Check out this interactive shopping list. You can add items, delete them, and mark them as completed. Adding and deleting items works fine, but there's an issue when toggling them. Issue (occurs when toggling multiple list items) If you add 3 items ...

javascripthtmlcssdom

Aligning vertical pills to the right using Bootstrap framework

Here is the relevant code snippet that I am working with: <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <scrip ...

htmlcsstwitter-bootstrapright-align

Animation fails to initiate when the object enters the viewport

I attempted to inject some enchantment into my project by implementing code from a tutorial found on this CodePen. However, I encountered an issue where the code only functions properly within that specific CodePen environment. Even after copying the same ...

javascriptjqueryhtmlcssviewport

What is the best way to determine which CSS class is shown when the page is loaded using JQuery?

I am facing a dilemma with displaying my site logo. I have both an image version and a text version, and I want to choose which one to display based on the vertical position on the page and the screen width. <a class="navbar-brand" id="top-logo" href=" ...

javascriptjqueryhtmlcss

Incorporating the fadeout technique in conjunction with the append() function

Here is some code that I am working with: $('body').on('click' , function(){ $('body').append('<div class="ajax-success"><p>Its Done !!!</p></div>').fadeOut(2000); }); The goal was to a ...

javascriptjqueryhtmlcss

Generating SVG images that show up as black in light mode and switch to light colors in dark mode

I am currently working on a website that has the option to switch between light and dark mode, and I need my logo to adjust accordingly. The black elements of my logo should appear black in dark mode and light in light mode. I attempted using the CSS cod ...

htmlcsssvg

Tips for hiding one sub-navigation menu when hovering over another sub-navigation menu

Setting up the main navigation menu: <ul class="menu12"> <li><a href="/">Home</a></li> <li><a href="/">About</a> <ul> <li><a href="/">History</a></li> <li ...

jquerycssmenu

I am seeing the number 1 mysteriously popping up on my HTML page without my intervention

Working on a website design, I encountered an issue with my HTML code. When executing and displaying content from a PHP file on the page, a strange number 1 is added after parsing the PHP file's content. Here is the snippet of HTML and PHP causing th ...

phpcsshtml

uncovering the precise text match with the help of Beautifulsoup

I am looking to retrieve the precise matching value of text from HTML using Beautiful Soup. However, I am encountering some similar text along with my desired exact match. Here is my code: from bs4 import BeautifulSoup import urllib2enter code here url="h ...

pythonhtmlbeautifulsoup

jquery has a strange behavior where the dialog window will cover up the scrollbar when the main

Currently, I am utilizing jQuery dialog to display a dialog window. I have managed to position it at the bottom left corner as desired. However, when the main window contains a scrollbar, the dialog ends up overlapping with the scrollbar instead of alignin ...

javascriptjquerycssjquery-uijquery-ui-dialog

Common Error for Novice HTML/CSS Learners

I am currently enrolled in an introductory web design course on Treehouse, and I have encountered a problem with centering a class in HTML using CSS. Despite following the instructions closely, my code is not displaying correctly. Can someone please review ...

htmlcss