Eliminate any unnecessary space below a list item and ensure it is justified

I need help with some extra indentation that is appearing under an ordered list I have created. I want to eliminate the extra spacing to achieve a cleaner look. This is how I want it to appear:

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

However, it currently looks like this:

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

Is it possible to completely justify the list format? I have checked Bootstrap's documentation but couldn't find a solution. Can this be achieved at all?

My HTML code is fairly simple. For the first desired result, I just have a paragraph tag:

 <div class="text-justify">
  <p class="grey-text"> 1. Applicable rules...<br><br>2. Definitions..</p>
 </div>

And for the second result, I am using:

  <ol>
   <li> Applicable rules...</li>
   <li> Definitions...</li>
  </ol>
htmlcssbootstrap-4

Answer №1

To achieve this effect, try utilizing the CSS property list-style-position: inside:

ol {
  list-style-position: inside;
}

Feel free to view this sample to confirm if this meets your requirements.

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

What is the most effective way to prevent JavaScript from running during page load or when the document is ready

I am facing a challenge with my asp.net page. Whenever a textbox is left empty, I want to hide the entire page from the code behind. The issue arises because there is javascript and jquery code that runs on document ready, accessing data from certain page ...

javascriptjqueryasp.nethtml

Passing variables in Redirect() without exposing them in the URL; a methodical approach

After scouring the depths of the internet, I have been on a quest to figure out how to seamlessly redirect to a new page on my site while discreetly passing a variable without exposing it in the URL like so: www.test.com/?variable=dont.want.this.here I a ...

javascripthtmlnode.js

Activate divs with Bootstrap5 modal toggle functionality

What adjustments must be made to the Bootstrap 5 example below in order to achieve the following two objectives: The "afterAcceptingTerms" division should remain hidden until the user clicks on the Accept Terms modal button, ensuring that only the "before ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Creating an illustration with HTML5 from an image

Is it possible to draw on an image by placing a canvas on top of it? I am familiar with drawing on a canvas, but I am facing an issue where clicking on the image does not trigger the canvas for drawing. How can I resolve this? This is how my HTML looks: ...

javascriptjqueryhtmlhtml5-canvas

Scroll function not functioning properly in Internet Explorer

When attempting to use scroll(x,y) in Internet Explorer 10 with JavaScript, I encountered an issue when trying to run the script on a website. Is there an alternative method that works for IE? This is part of a Java Selenium test where I need to scroll wit ...

javajavascripthtmlcssselenium-webdriver

What are some solutions for repairing the issue of horizontal collapse?

I am currently using Bootstrap 5 to create my website template, and I have encountered a problem: After clicking the "Menu" button, not all of the sidebar elements fade out as expected (I'm attempting to use the horizontal collapsing plugin where the ...

htmlbootstrap-5

The lifecycle of XMLHTTPRequest objects in JavaScript - from creation to destruction

After years of working with traditional compiled object-oriented languages like C++ and .NET programming, I decided to dip my toes into JavaScript for a new project. As I was experimenting with AJAX, I stumbled upon a perplexing aspect related to how objec ...

javascripthtmlajaxxmlhttprequest

Adjusting the size of a Checkbox with CSS

Adjust the width of the checkbox for the call field to 25 pixels, ensuring it is displayed only when the left margin is clear. I'm having trouble figuring this out, even though it's probably something simple again. I double-checked that my style ...

htmlcssformscheckbox

Ways to handle <select> change events effectively in materialize css

My attempt at using a basic jquery change listener on a materialize css select dropdown has been unsuccessful. $("#somedropdown").change(function() { alert("Element Changed"); }); 1) Can anyone provide guidance on how to add a listener to ...

javascriptjquerycssmaterialize

Removing the new line using v-if in Vue.js

I want to insert a v-if in the middle of a sentence without creating a new line. This is what I desire: A / B / C / D However, my current output is: A / B / C / D This is the code I am using: <div> {{ A }} / {{ B }} <p v-if="functi ...

htmlvue.jsvuejs3

Sending form data to PHP script following Javascript verification

After implementing basic validation for a contact form, I encountered an issue where the form would not submit to the PHP file responsible for sending emails. Despite setting the button type as "submit" and defining the form action as "contactform.php", th ...

javascriptphphtml

Looking to replicate a Modal that I designed, but unsure which elements need altering in order to achieve this. I am hoping to create three duplicates of the Modal

This modal is functioning perfectly, and now I want to replicate the same modal three times on a single page. I require three distinct buttons on the same page to trigger these separate modals. At this point, I am unsure which attributes need modification ...

javascripthtmljquerycssmodal-dialog

Creating interactive buttons with CSS and jQuery

As a newcomer to coding, I'm trying my hand at creating two buttons that transition from green to blue with a single click, and eventually incorporating them into a live website. The functionality I'm aiming for includes: Both buttons startin ...

javascripthtmljquerycss

What is causing the resistance in changing the color of my current navigation items?

I've encountered a small challenge with my header section. Despite multiple attempts, I'm struggling to change the color of the 'current' menu item. It seems that overriding Bootstrap's default color is proving to be more difficult ...

htmlcsstwitter-bootstrap

Vanilla JavaScript error: Unable to access property

I am working on implementing a header with a logo and navigation that includes a menu toggle link for smaller viewports. My goal is to achieve this using Vanilla JS instead of jQuery. However, when I click on the menu toggle link, I encounter the followin ...

javascripthtmltypescript

Using AJAX does not automatically trigger the form submission process

It seems like the preventDefault function is working as intended to prevent the form from posting. However, the update() function is not sending the form data to the specified URL. I am perplexed by this issue and unsure of why it is happening. UPDATE: I ...

jqueryhtmlajax

An instructional guide on utilizing Python to extract the URLs of companies from a LinkedIn search

I'm having an issue extracting company profile URLs from a LinkedIn search as I keep getting a "not found" message. Despite my code running smoothly, the problem persists. Here is my code: import requests import csv import time import numpy from bs4 ...

pythonhtmlselenium-webdriverbeautifulsoupspring-social-linkedin

Is there a way to showcase my information on flash cards using JavaScript?

Currently, I am developing a full stack application that utilizes JavaScript on both the front and back end. This application allows users to create their own flashcards set. Upon clicking "View Cards," the data is fetched and the question-answer pair is d ...

javascripthtmlcssnode.jsasynchronous

Positioning the navigation buttons along the edges

I'm struggling with creating a custom slider and am having trouble placing the navigation buttons on the sides. You can view the current layout on JSfiddle: http://jsfiddle.net/zfxrxzLg/1/ Currently, the navigation buttons are located underneath the ...

jqueryhtmlcss

Using a custom function, automatically initiate audio playback when an Android WebView JS loads

I have a unique JS function specifically designed for the audio tag, which also controls the progress bar. It works perfectly when I click on the associated tag <a onclick="playSound(1)">. However, if I try to initiate it on page load, the function s ...

javascripthtmlaudio