Tips for minimizing white space in list groups for Bootstrap 4

Is there a way to decrease the spacing between list items in a list group? I attempted to adjust the margin using CSS, but encountered an issue with the last list item not formatting correctly.

CSS

 .list-group-item{
        margin-bottom: -6px;
        margin-top: -6px;  
    }

HTML

 <ul class="list-group ml-3 mr-3 mt-1 sidebar-list-items ">
            <li  class="list-group-item d-flex p-0 border-0" >
                <input  class="my-auto ml-2" type="checkbox" id="CheckBox1" />
                <label style="font-size: 13px;"class="mt-2 ml-2 w-100 " for="CheckBox1">Acupunture</label>
            </li>
            <li class="list-group-item d-flex p-0 border-0">
                <input class="my-auto ml-2" type="checkbox" id="CheckBox2" />
                <label style="font-size: 13px" class=" mt-2 ml-2 w-100" for="CheckBox2">Ayurveda </label>
            </li>
            <li class="list-group-item d-flex p-0 border-0 ">
                <input class="my-auto ml-2" type="checkbox" id="CheckBox3" />
                <label style="font-size: 13px" class="mt-2  ml-2 w-100" for="CheckBox3">Homeopathy</label>
            </li>
        </ul>
htmlcssbootstrap-4

Answer №1

For a different look, consider swapping out the my-auto class with another margin-x option on your input and label elements like this:

<ul class="list-group ml-3 mr-3 mt-1 sidebar-list-items ">
  <li class="list-group-item d-flex p-0 border-0">
    <input class="ml-2 my-0" type="checkbox" id="CheckBox1" />
    <label style="font-size: 13px;" class="my-0 ml-2 w-100 " for="CheckBox1">Acupuncture</label>
  </li>
  <li class="list-group-item d-flex p-0 border-0">
    <input class="my-0 ml-2" type="checkbox" id="CheckBox2" />
    <label style="font-size: 13px;" class="my-0 ml-2 w-100" for="CheckBox2">Ayurveda</label>
  </li>
  <li class="list-group-item d-flex p-0 border-0">
    <input class="my-0 ml-2" type="checkbox" id="CheckBox3" />
    <label style="font-size: 13px;" class="my-0 ml-2 w-100" for="CheckBox3">Homeopathy</label>
  </li>
</ul>

Experiment with using one of the following classes for margins: my-0, my-1, ..., all the way to my-5.

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

HTML: Learn how to concatenate the href attribute of an anchor tag instead of replacing it

I am currently on the page www.myUniqueWebsite.com/sign-up?type=explore In the navigation menu, there is a link to switch languages. <a href="?lang=es">Spanish</a> When I click on this link, it redirects me to www.myUniqueWebsite.com/ ...

html

Text appearing in varying sizes across browsers

I need some help with a coding issue I'm facing. I have a form where one of the inputs is connected to a JavaScript function that updates a div on the page as the user types. However, I want to limit the width of this div to 900px and make sure it onl ...

javascripthtmlcss

Having trouble with the WordPress style file not functioning properly

I'm currently facing an issue while trying to upload a CSS file and a JavaScript file to a custom theme on WordPress. When I open the webpage, nothing appears and there are no elements displayed. However, when I delete the functions.php file, the webp ...

phpcsswordpress

Sending ZipOutputStream back to browser

Looking for a way to return a ZipOutputStream to the browser? I want the user to click on a link and have a file download prompt appear for the ZipOutputStream I have. How can I achieve this desired experience? ...

javahtmlhttpzip

Tips for preventing CSS animation from reverting back to its initial position

After transforming 2 div tags into blocks, I created a code that causes the blocks to move outwards. The issue I'm facing is that they return to their original position after moving. I want the two blocks in the animation to move out to the sides and ...

csscss-animations

CSS text width going from left to right

I am attempting to create a text fade effect from left to right, inspired by the technique discussed in this answer. However, I would like the text to be concealed behind a transparent background div instead of the white background used in the example. I ...

jquerycssfade

Animation that responds to scrolling movements

Is there a way to animate text based on scrolling? <p class="class">TEXT</p> transform:translateX(-500px);opacity:0; transform:translateX(0px);opacity:1; ...

javascripthtmlcss

Clicking a button in Angular JS to refresh a specific ID element

Just diving into AngularJS for my mobile web app development. I have different id divs for each view, as that's how AngularJS operates with one HTML page. My goal is to use specific javascript for each id page, as they need to retrieve JSON data objec ...

javascripthtmlangularjsonsen-ui

Encountering a "Cannot modify" error in wp-admin while using inspect element

It seems like there is a slight error appearing in the Inspect Element Source Tab of Google Chrome (also checked in Firefox). I have searched extensively for a solution but haven't found anything helpful. My Wordpress theme displays wp-admin in inspec ...

phpcsswordpress

The phrase 'nodemon' is not identified as a valid cmdlet, function, script file, or executable program

Recently I started working with Node.js, but I encountered an error when trying to run a program. The error message says "the term nodemon is not recognized the name of cmdlet, function, script file or operable function". Can someone please assist me with ...

javascripthtmlcssnode.jssocket.io

How should we measure the string as if it were in HTML?

I have the exact string : 123.. I am curious to know what its length would be as a SPAN element on an HTML page. font-name:arial font-size:16px; I decided to conduct an experiment: http://jsbin.com/axezib/edit#preview This resulted in: <span style ...

c#htmlgraphicsdrawing

Having trouble with a basic select tag and options not functioning properly in Chrome browser

I encountered an issue where I am unable to expand a simple select tag in Chrome. <select id="filterCategory" class=""> <option>1</option> <option>2</option> <option>3</option> <option>4</option ...

javascripthtmlcssgoogle-chrome

Make sure Tooltip functionality is enabled within a tab that is disabled

Take a look at the following code snippet: <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active diabled" data-toggle="tab" href="#home">Home</a> <i class="fas fa-circle missing-data" data-toggle="t ...

jquerybootstrap-4tooltip

Problem with animated text in CSS

I am facing an issue with the code below. It is supposed to display "Dedicated People" when scrolling down, however, it is not working in my browser. Could it be that I forgot to include a reference in the head section? The code works fine in CodePen, but ...

javascripthtmlcssanimationtext

Retrieving all elements that contain the specified search value with Jsoup

I am currently developing an Android app that involves working with HTML. Specifically, I need to extract part of an HTML body, retrieve attributes, and search for values containing a specific element. While I have successfully accomplished the first two t ...

javaandroidhtmljsoup

Need at least one form input field out of three to be completed

Currently, I am developing a database program where users are required to enter some of their contact information. <form action="add_action.php" method="POST"> <div class="modal-body"> Name: <br> ...

htmlformsinput

Center a form using Bootstrap

Struggling to center my form using bootstrap as a beginner. I've tried different methods without success. Hoping for some guidance on how to center it while keeping the same size. Any assistance would be appreciated! This is the HTML code: <div ...

htmlcsstwitter-bootstrap

What is the reason for innerHTML not functioning properly when trying to include HTML?

Apologies for my poor English, but I am determined to solve this issue using HTML code. <body> <div id="booklist"> <?php include("../templates/nav.php"); ?> <div class="hero"> <?php include("../templates/aside.ph ...

javascriptphphtmlinclude

Tips for wrapping text around an image using Bootstrap 5

I am having trouble getting my text to wrap around an image using the Bootstrap 5 grid system. I've attempted to use 'float: right' on the image, but it hasn't produced the desired result. The text should flow naturally around the imag ...

htmlcssbootstrap-5

The controls for the HTML audio component are missing the download option on Safari

In my React application, I've declared an audio component with controls like the following: <audio controls> <source src={url} /> </audio> While this setup works perfectly in most browsers, it seems to have a bug when used in Safa ...

htmlreactjssafari