Changing the line spacing in HTML/CSS code

I'm working on a minimalist checkout interface using bootstrap. Here's my progress so far:

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

                    <ul class="list-group list-group-flush">
                        <li class="list-group-item bg-light px-0">
                            <h6 class="my-0">Category Name</h6>
                            <div class="row">
                                <div class="col text-left"><small class="lh-condensed">Product Name</small></div>
                                <div class="col text-right"><small class="lh-condensed">$100.00</small></div>
                            </div>
                            <div class="row">
                                <div class="col text-left"><small>Product Name</small></div>
                                <div class="col text-right"><small>$130.39</small></div>
                            </div>
                        </li>
                        <li class="list-group-item bg-light px-0">
                            <h6 class="my-0">Category Name</h6>
                            <div class="row">
                                <div class="col text-left"><small class="lh-condensed">Product Name</small></div>
                                <div class="col text-right"><small class="lh-condensed">$100.00</small></div>
                            </div>
                            <div class="row">
                                <div class="col text-left"><small>Product Name</small></div>
                                <div class="col text-right"><small>$130.39</small></div>
                            </div>
                        </li>
                    </ul>

Does anyone know how I can reduce the spacing between the "Product Name" rows? There doesn't seem to be any margin or padding.. so I'm not sure how to solve this.

Appreciate any assistance you can provide!

htmlcssbootstrap-4

Answer №1

When using Bootstrap, be mindful of the line-height: 24px; set on the body element, as it may affect elements like .row that inherit it. To avoid this issue, make sure to specify the line-height for the .row element within your list group.

.list-group-item .row {
    line-height: 10px;
}


li.list-group-item .row {
    line-height: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
 <ul class="list-group list-group-flush">
                        <li class="list-group-item bg-light px-0">
                            <h6 class="my-0">Category Name</h6>
                            <div class="row">
                                <div class="col text-left"><small class="lh-condensed">Product Name</small></div>
                                <div class="col text-right"><small class="lh-condensed">$100.00</small></div>
                            </div>
                            <div class="row">
                                <div class="col text-left"><small>Product Name</small></div>
                                <div class="col text-right"><small>$130.39</small></div>
                            </div>
                        </li>
                        <li class="list-group-item bg-light px-0">
                            <h6 class="my-0">Category Name</h6>
                            <div class="row">
                                <div class="col text-left"><small class="lh-condensed">Product Name</small></div>
                                <div class="col text-right"><small class="lh-condensed">$100.00</small></div>
                            </div>
                            <div class="row">
                                <div class="col text-left"><small>Product Name</small></div>
                                <div class="col text-right"><small>$130.39</small></div>
                            </div>
                        </li>
                    </ul>

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

Opacity filter malfunctioning

It seems that the filter: opacity property is not functioning as expected in IE8. Despite having used it successfully before, I am currently facing issues with its implementation. Strangely enough, Firebug does not display the filter rule at all; only norm ...

cssinternet-explorer-8opacity

Unable to resize tables in IE when using CSS Flex layout

Having a bit of trouble with the flex layout. I've put together a FIDDLE project where when resizing the output box, table cells will align one to one beneath each other. It seems to work fine in Chrome and Firefox but not in IE when using table eleme ...

htmlcss

What is the method for displaying html files in a POST request?

This is the code snippet I am working with: app.post('/convert', function(req,res){ var auxiliar = "somo Ubuntu command line(this works)"; exec(auxiliar, function(err, stdout, stderr){ if(err){ console.log ...

javascripthtmlnode.jsexpress

Issues with executing google.script.run in Google Web App

I am encountering an issue with the function I have defined in my .gs file: function doGet(e) { return HtmlService.createHtmlOutputFromFile('index') } function goToMaster() { const ss = SpreadsheetApp.getActiveSpreadsheet() const sheet = s ...

javascripthtmlgoogle-apps-scriptgoogle-sheets

Is there a way to modify the drop-down button so that it can display the links from the side while keeping the button fixed in place?

https://i.stack.imgur.com/ftj6w.pnghttps://i.stack.imgur.com/VuCDo.png [I am new to creating websites and any assistance is welcomed.] This code snippet is used to display dropdown button links in a list format. My goal is to make the links appear on the ...

htmlcss

Dealing with fluctuating content heights: strategies to handle varying content lengths

Over at this website, you will find an image carousel using Twitter Bootstrap which showcases various images along with captions. While all the images maintain the same height, the container for the caption adjusts its height based on the length of the tex ...

csstwitter-bootstrapresponsive-design

Showing a JSON array with varying nested lengths in an HTML5 format

I have a JSON string containing nested arrays with elements of unequal lengths. I am looking to display this data on a page using either Javascript or Angular.js. { [ 'id':1, 'value':'tes1' 'nextLevel':[&ap ...

javascriptjsonhtmlangularjs

Seeking assistance to pinpoint the issues in my code. Specifically related to PHP, MySQL, and HTML

Is anyone able to assist me with troubleshooting my registration page issue? The database connection appears to be working correctly, but I'm not seeing any new users added to the table. This is a snippet of my HTML: <form action="register.php" m ...

phphtmlmysqlformsuser-registration

What element is lacking in this Bootstrap 4.5 and Scroll Spy demonstration?

What could be causing this HTML snippet to malfunction? The Scroll Spy feature remains inactive. <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid ...

bootstrap-4

Python-JavaScript Integration Problem

I'm a beginner when it comes to Javascript, Python, and PHP. In my Javascript program, I have a button that triggers a Python script and displays the returned value on the screen. My goal is to steer clear of using Jquery and Json. Here are the snipp ...

javascriptpythonhtml

How to set the default value for an angularJS select dropdown

Can someone assist me with setting a default value for a select dropdown using AngularJS? I have explored similar threads on StackOverflow, but none of the suggested solutions have resolved my issue. Therefore, I am reaching out to seek help here. Essenti ...

javascripthtmlangularjs

Obtain the final segment using PHP from a web address

My URL is: http://domain/fotografo/admin/gallery_bg.php and I am trying to extract only the last part of the URL: gallery_bg.php However, I am looking for a dynamic solution, where the last part of the URL is obtained for each page I visit. ...

phphtmlregexurl

Ensure that Roboto font is utilized on IE 11 and Edge browsers

My goal is to implement the Google Roboto font in my project, but I'm noticing that it doesn't display properly in IE11 / Edge browsers. Below is a snippet of my code: <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

htmlcssfontsroboto

Which Wordpress theme would be best suited for this particular website?

I am looking to create a website on WordPress that resembles the design of this specific webpage: http://www.landrover.co.uk/index.html I need it for commercial purposes. Are there any templates available, either free or paid, with similar features? I do ...

htmlwordpresstemplatesslideshow

Generate a container element that occupies the remaining space on the screen under a header of adjustable height

I'm trying to create a layout where the header height can vary, but the footer has a fixed height. I want the left nav and content sections to fill the screen height, with the left nav having a fixed width and the content taking up the remainder. Is ...

htmlcss

Enhance your picture links with a:hover box-shadow styling

I've been struggling to add a box shadow on hover to a Facebook icon image. I assumed it would be straightforward, but as always, I was wrong. I'm working with a child theme in WordPress because I recently started, thinking it would be an easy wa ...

hovermouseovercss

Retrieving the HTML code from a webpage

I am currently using the following code to extract the HTML source code of a webpage: private static string RetrieveHTML(string websiteURL) { HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(websiteURL); request.UserA ...

c#htmlasp.netinformation-retrieval

checking if the height of the body is less than 100% using javascript or jquery

On my website, I didn't set a height for the html or body tags. This setup works well on pages with ample content, but when a page has insufficient content, I want the body height to be 100%. I decided to try using jQuery to solve this issue. I came ...

javascriptjqueryhtmlcssif-statement

The issue with the Bootstrap slider persists

The slider function in the downloaded html and css codes from bootstrap is not working properly. When clicking the arrow, the screen drops below instead of sliding. Even though the code was copied directly from bootstrap, the issue persists. <div c ...

htmlcssslider

Troubleshooting: SVG Icon Fails to Appear in Bright Theme Due to CSS

My HTML is structured like this. <h2 class="mt-10 scroll-m-20 border-b pb-1 text-3xl font-semibold tracking-tight first:mt-0" id="know-your-life"> <a aria-hidden="true" tabindex="-1" href="#know-your- ...

csstailwind-cssshadcnui