Reducing the height of Bootstrap4 rows will enhance the layout

Is there a way to make my table rows thinner without changing the height?

I want each row to have minimal space at the top and bottom, maybe only 1-2px, what's the best approach?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<table class="table table-bordered table-hover">
   <thead class="thead-dark" id="TableTitle">
      <tr>
         <th id="Testplans" style="width:30%;" scope="col">Testplans for <?php echo $ProjectsList;?></th>
         <th id="PF" style="width: 200px;" scope="col">Status</th>
         <th id="Date" style="width: 250px;" scope="col">Date</th>
         <th id="Version" scope="col">Version</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class='font-weight-bold' scope='row' id=".$testPlanData['TestJobId'].">
            <a target='_blank' href='TestResults?ID=".$testPlanData['TestJobId']."'>
            Test
            </a>                
         </td>
         <td id=".$testPlanData['TestJobId'].">
            <div class='ml-1 d-flex'>
               <div title='Not applicable'>
                  <button onclick='toggleHideShowTC(this.id)' id='na-".$testPlanData['TestJobId']."' style='white-space: nowrap;' title='Passed' class='btn btn-dark rounded text-light font-weight-bold h6 p-1 d-inline-block'>
                  234 N/A
                  </button>
               </div>                   
            </div>
            <br>
            <div class='d-flex justify-content-start'></div>
         </td>
         <td id=".$testPlanData['TestJobId']."><small class='text-muted'>12:13:1322</small></td>
         <td id=".$testPlanData['TestJobId'].">
            <small class='text-muted'> 123 </small>           
         </td>
      </tr>
   </tbody>
</table>

Is there a solution similar to this example?

https://i.sstatic.net/yZLZb.png

Can I edit the padding to be 12px?

https://i.sstatic.net/YNOgZ.png

htmlcssbootstrap-4

Answer №1

The empty space is visible because when you have

<td id=".$testPlanData['TestJobId'].">
  <div class='ml-1 d-flex'>
    <div title='Not applicable'>
      <button onclick='toggleHideShowTC(this.id)' id='na-".$testPlanData[' TestJobId ']."' style='white-space: nowrap;' title='Passed' class='btn btn-dark rounded text-light font-weight-bold h6 p-1 d-inline-block'>
                  234 N/A
                  </button>
    </div>
  </div>
</td>

you see these extra lines of code:

<br>
<div class='d-flex justify-content-start'></div>

If you remove them, the layout will improve significantly. Additionally, consider removing the margin-bottom from your .btn class for a cleaner look.

Answer №2

You have the ability to easily override Bootstrap styles. I've made adjustments to the default padding of .75rem and set it to 0px instead. Additionally, I find that middle vertical alignment provides a better appearance. Be sure to review the style element below.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.table td, .table th {
    padding: 0px;
    vertical-align: middle;
}
</style>
<table class="table table-bordered table-hover">
   <thead class="thead-dark" id="TableTitle">
      <tr>
         <th id="Testplans" style="width:30%;" scope="col">Testplans for <?php echo $ProjectsList;?></th>
         <th id="PF" style="width: 200px;" scope="col">Status</th>
         <th id="Date" style="width: 250px;" scope="col">Date</th>
         <th id="Version" scope="col">Version</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class='font-weight-bold' scope='row' id=".$testPlanData['TestJobId'].">
            <a target='_blank' href='TestResults?ID=".$testPlanData['TestJobId']."'>
            Test
            </a>                
         </td>
         <td id=".$testPlanData['TestJobId'].">
            <div class='ml-1 d-flex'>
               <div title='Not applicable'>
                  <button onclick='toggleHideShowTC(this.id)' id='na-".$testPlanData['TestJobId']."' style='white-space: nowrap;' title='Passed' class='btn btn-dark rounded text-light font-weight-bold h6 p-1 d-inline-block'>
                  234 N/A
                  </button>
               </div>                   
            </div>
            <br>
            <div class='d-flex justify-content-start'></div>
         </td>
         <td id=".$testPlanData['TestJobId']."><small class='text-muted'>12:13:1322</small></td>
         <td id=".$testPlanData['TestJobId'].">
            <small class='text-muted'> 123 </small>           
         </td>
      </tr>
      <tr>
         <td class='font-weight-bold' scope='row' id=".$testPlanData['TestJobId'].">
            <a target='_blank' href='TestResults?ID=".$testPlanData['TestJobId']."'>
            Test
            </a>                
         </td>
         <td id=".$testPlanData['TestJobId'].">
            <div class='ml-1 d-flex'>
               <div title='Not applicable'>
                  <button onclick='toggleHideShowTC(this.id)' id='na-".$testPlanData['TestJobId']."' style='white-space: nowrap;' title='Passed' class='btn btn-dark rounded text-light font-weight-bold h6 p-1 d-inline-block'>
                  234 N/A
                  </button>
               </div>                   
            </div>
            <br>
            <div class='d-flex justify-content-start'></div>
         </td>
         <td id=".$testPlanData['TestJobId']."><small class='text-muted'>12:13:1322</small></td>
         <td id=".$testPlanData['TestJobId'].">
            <small class='text-muted'> 123 </small>           
         </td>
      </tr>
      <tr>
         <td class='font-weight-bold' scope='row' id=".$testPlanData['TestJobId'].">
            <a target='_blank' href='TestResults?ID=".$testPlanData['TestJobId']."'>
            Test
            </a>                
         </td>
         <td id=".$testPlanData['TestJobId'].">
            <div class='ml-1 d-flex'>
               <div title='Not applicable'>
                  <button onclick='toggleHideShowTC(this.id)' id='na-".$testPlanData['TestJobId']."' style='white-space: nowrap;' title='Passed' class='btn btn-dark rounded text-light font-weight-bold h6 p-1 d-inline-block'>
                  234 N/A
                  </button>
               </div>                   
            </div>
            <br>
            <div class='d-flex justify-content-start'></div>
         </td>
         <td id=".$testPlanData['TestJobId']."><small class='text-muted'>12:13:1322</small></td>
         <td id=".$testPlanData['TestJobId'].">
            <small class='text-muted'> 123 </small>           
         </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

Utilize CSS to break apart text (text = white space = text) and align text in a floating manner, allowing

Is there a way to use CSS to create a white space in the middle of text? Currently, I am manually breaking the text, which is not ideal. I am aware that there is a function that allows the text to end and start in another div, but unfortunately, it is not ...

javascripthtmlcsstextstyling

"Open Graph tags are being displayed, but not functioning correctly when tested on Facebook's

I am utilizing Next.js along with SSG for page rendering. Take a look at the snippet within the <Head />: <Head> <title>{title}</title> <meta name="title" content={`${title} - MySite`} /> <meta name="de ...

htmlnext.jsseo

The arrangement of Bootstrap columns does not appear to be in alignment with one another

While utilizing Bootstrap 4, I am encountering an issue with the Footer section. My intention is to create three columns of equal width using the col-md-6 class as outlined in the documentation. Here is the code snippet: <footer class="footer"> &l ...

htmlcssbootstrap-4

Extracting names from HTML can be done easily by looking for the "@" symbol that the

My HTML structure looks like this: <table id="table-15244" cellspacing="0" class="comment"><tbody> <tr id="comment-37"> <td style="color: #999" class="NV"> </td> <td class="hidden-mob"> ...

javascriptjqueryhtmlcss

Creating a single Vuetify expansion panel: A step-by-step guide

Is there a way to modify the Vuetify expansion panel so that only one panel can be open at a time? Currently, all panels can be closed which is causing issues. I would like the last opened panel to remain open. I also want to prevent closing the currently ...

javascripthtmlcssvue.jsvuetify.js

When inserting <img>, unwanted gaps appear between div elements

When I have <img> in the child divs, there is some space between them and a blue stripe appears under the image. How do I make them stack perfectly without any gaps? I am new to HTML and CSS and trying to learn for marketing purposes. Any help or ad ...

htmlcss

The disappearance of IE7 floats is observed when their parent element is styled with position:relative

The issue I'm encountering in IE7 is related to the CSS properties position:relative;, float: right;, and float: left;. While this problem doesn't seem to occur in newer browsers, it's puzzling why position:relative; impacts the behavior of ...

cssinternet-explorer-7css-floatcss-position

Unable to set DIV to 'inline-block' or none based on checkbox selection

Despite reviewing multiple examples, I am still struggling to make this DIV visible and hidden by clicking a checkbox. Can someone please review my JavaScript code? <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conten ...

javascriptcsshtml

Exploring the DOM structure to update a child element next to its sibling

const $jq = $; $jq('#section-a li').on('click', function() { const el = $jq(this); el.addClass("answerPick").siblings(".answer").removeClass("answerPick"); if (el.hasClass("answerPick")) { el.children(".circle").addClass(" ...

javascriptjqueryhtml

jQueryFileTree causing a conflict with jQuery library

I am facing an issue with displaying results using JSP. I was able to successfully use AJAX with jQuery for button click events. However, when trying to incorporate the jQueryFileTree function on the same page or a different page, it doesn't seem to w ...

javascriptjqueryhtmlajaxjsp

Sending two arrays of different sizes in MySQL with only one row

<?php $str = implode(',',$name); function trim_value(&$value) { $value = trim($value); $Array = explode(',', $str); array_walk($myArray, 'trim_value'); for($x=0; $x< ...

phphtmlmysql

Create an elegant and responsive collapsible navigation bar with Bootstrap 4's standalone collapse JavaScript

After creating a small website using Bootstrap 4.3.1, I realized that the only JavaScript required is for the collapse plugin in the responsive navbar with a toggler button. Unfortunately, since there is no longer a customizer for Bootstrap 4, I am forced ...

javascriptoptimizationbootstrap-4

Unable to retrieve angular HTML content from my standard HTML website

I have a basic HTML website and I am looking to redirect to an Angular website upon clicking a button on the HTML site. Both the HTML website and Angular build are hosted on the same server, Hostinger. The button in question is here: This is the simple HT ...

htmlangularangular-material

Is there a way to display the button solely when the cursor is hovering over the color?

When I hover over a particular color, I want the button to show up. However, instead of displaying the button only for that color, it appears for all the colors of the product. Also, the placement of the button on the left side means that if I try to hover ...

javascriptcssreactjsmaterial-ui

Arrange components with minimal spacing

I am currently working on a design that requires a perfectly aligned table using divs. Here is what I have done so far: My goal is to have the time section placed on the left side of the entire row, while keeping the text right-aligned to avoid creating a ...

htmlcsstwitter-bootstrapalignmentcss-tables

Tips on using javascript to reset an element's inline CSS to its initial default styling?

I have a basic function that alters the default text styling when a checkbox is checked, and restores it to its original state when the checkbox is unchecked. Despite my efforts, the terms.style = ""; line does not reset the style as expected. I am perple ...

javascriptcssinline-styles

Selecting a specific element from a group of elements sharing the same class using JQuery

Is there a way to target individual elements from a group of elements that share the same classes or other properties without assigning different classes to each element? I need to be able to work on each element separately. I have attempted this approach, ...

javascriptjqueryhtmlcss

We have come across a project on CodePen that utilizes Three.js, and we are looking to customize its color scheme

We stumbled upon a fascinating blob experiment on Codepen (https://codepen.io/vcomics/pen/ZwNgvX) and were eager to incorporate it into our project. However, we encountered an issue with the color changing feature on this perlin object (rcolor, gcolor, bco ...

javascriptcssthree.js3dblob

Guide on playing two HTML5 videos simultaneously once they have been loaded

Is it possible to make two HTML5 videos autoplay simultaneously? Is there a way to delay the playback until both videos have fully loaded? I'm looking to ensure that neither video starts playing before the other has finished loading. Does that clarif ...

htmlvideoautoplay

Exploding particles on the HTML5 canvas

I've been working on a particle explosion effect, and while it's functional, I'm encountering some issues with rendering frames. When I trigger multiple explosions rapidly by clicking repeatedly, the animation starts to lag or stutter. Could ...

javascripthtmlcanvas