Adjust the line height of the paragraph class using Bootstrap customization

Currently, I am working with Bootstrap V4 and I am facing an issue where I need a customized paragraph to have a line-height of 1. However, I have been unsuccessful in overriding the default Bootstrap setting of approximately 1.5.

   <p class="ptime"><f:format.date format="H:i:s">{play.plDate}</f:format.date></p>
   <p class='dur'>{play.Duration}</p>

p.ptime {
    line-height:normal !important;
}
p.dur {
    font-size: 80%;
    text-align: right;
    vertical-align: text-bottom;
    padding: 0px;
    margin: 0px;
    line-height:normal !important;
}

I have attempted using 1 and 1em for the line-height, but have had no success in reducing the space between the paragraphs (lines).

Can anyone provide guidance on how to resolve this issue?

cssbootstrap-4

Answer №1

By default, when using bootstrap, a 16px margin is applied at the bottom of every paragraph. To eliminate the space between two paragraphs, you should remove this bottom margin instead of adjusting the line-height with CSS.

For all paragraphs:

p {
   margin-bottom: 0 !important;
}

For specific paragraphs (such as ptime & dur in your case):

.ptime, .dur {
   margin-bottom: 0 !important;
}

Below is a functional example. I have utilized bootstrap version 4.6.0.

p {
  margin-bottom: 0 !important;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="690b06061d1a1d1b0819295d475f4759">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<p class="ptime">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, ullam inventore!    Officiis, quam facilis iste unde sapiente doloribus ad fugit quaerat nam natus, vero, ab totam! Provident perferendis nemo excepturi?
</p>
<p class='dur'>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. At asperiores quas adipisci voluptas fuga dolore explicabo dolor labore delectus a incidunt dolorem accusamus beatae eveniet, quae, impedit excepturi ut sequi.
</p>

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 anchor element does not trigger the activation process within a flexbox item

I have a flex container that contains multiple items. Instead of using the anchor tag to enable a link when clicked, I am setting the flex item class inside it. The element is comprised of three divs: The first div is a circle with an icon, the "second" d ...

htmlcssflexboxanchor

JavaScript code for validating two passwords is malfunctioning

I'm currently working on a registration form for my website and I'm trying to implement a JS script that compares two password inputs (password and repeat password) and displays a message saying "passwords are not the same." Below is the code I h ...

javascripthtmlbootstrap-4

5 horizontal navbar with dropdown menu in Bootstrap

I am currently utilizing bootstrap 5. Is it possible to display my navbar menus horizontally like the image provided? show submenus horizontally as shown in this picture I would also like to implement submenu for other submenus up to 4 levels deep. Any ...

htmlcsstwitter-bootstrapdrop-down-menunavbar

Connecting a picture to a web address using the <img class> tag

I'm facing a major issue with the "fade script" I added to my portfolio. It's designed to fade between thumbnails using jQuery and CSS, but it relies on 2 img classes that I can't seem to link properly. Basically, I want to link the image g ...

jqueryhtmlcssimage

Dynamic website featuring fixed background with content transitioning through clicks or scrolls

Seeking a template or tutorial on how to create a website similar to the following examples: The desired website layout would allow users to scroll through content while keeping the background neutral, with the option to click links that transition to new ...

jqueryhtmlcsscss-transitionstransition

Chrome compatibility issue with margin collapsing

I'm currently working on a website and encountering a CSS issue. It appears fine in Firefox, but has some odd layout problems in Chrome. I would appreciate any assistance on how to resolve this issue. On the main page, if you scroll down, you'll ...

htmlcssmargin

Tips for adding a CSS marker to the Videogular timeline at a designated time

My HTML player application allows users to search for a term and then displays the results along with the time when those words appear. By clicking on a specific sentence, the HTML player will start playing from that location. However, I would like to enha ...

javascripthtmlcssangularjsvideogular

In Internet Explorer 11, border-radius creates a separation between elements

There is an issue with whitespace appearing around elements that have a border-radius larger than 0, but this only occurs in Internet Explorer. If using border-top-left-radius: 20px; and border-top-right-radius: 20px;: https://i.sstatic.net/MAKsx.png *W ...

htmlcsstwitter-bootstrap-3internet-explorer-11

Surrounding a parent div with an additional div element

I'm struggling to summarize my predicament, but let me share some simplified code that highlights the issue (index.html): <html> <body> <div id="wrapper" class="divide"> <div id="top" class="divide"> ...

htmlcss

Retrieving CSS style values with Node.js

I am looking to design a new CSS style that includes the lowest and highest values. table[my-type="myStyle"] { width: 255.388px !important; } This code snippet is included in numerous CSS files within my style directory. ...

javascriptjquerycssnode.jsnodes

Utilizing Ajax to Dynamically Update Link Styles

When using an AJAX request to load a portion of a webpage, the content is delivered by a framework and then inserted into the DOM tree using jQuery. Everything seems to be working well so far. However, I encountered an issue when trying to use background ...

cssajaxhyperlink

Is there a way to configure my dropdown menu so that only one dropdown can be open at a time and it remains open when clicking on a <li> item?

I've been working on developing a dropdown menu that appears when clicked, rather than hovered over. I've managed to implement this functionality using JavaScript, and overall, it's working quite well. Currently, the menu shows or hides whe ...

javascriptjqueryhtmlcss

Trouble with the navbar collapse functionality in Bootstrap

3 I made some changes to the navbar, now the navbar-header is showing but the collapse navbar-collapse is not. Here is my code. Can you spot where I went wrong? <nav class="navbar navbar-default"> <div class="container-fluid" ...

angularbootstrap-4

Font Awesome solely alters the font size within html, rather than css

<i class="fa fa-graduation-cap" aria-hidden="true" style="font-size: 50px;"></i> It's functioning properly. .fa-graduation-cap { margin-top: 38px; color: #E46A6B; font-size: 50px; } Not working too well. This issue is new to me. Any th ...

cssfont-awesome

Looking for a way to identify when a DOM element is resized as a result of web fonts loading asynchronously?

Within this div element lies text styled with a custom font via CSS's @font-face attribute. The issue arises when the font hasn't loaded yet, causing a delay in updating the font style of the text within the div. As a result, taking measurements ...

javascripthtmlcss

Line up with miniature stature

How can I prevent the image in this row from getting a margin at the bottom when I resize the window? <div class="row-fluid"> <div class="span2"> <img src="https://s3.amazonaws.com/media.jetstrap.com/SLgRUEHSyGwQVfG4x6ed_curso_a ...

csstwitter-bootstrap

Adjust the border color of a TextField in react/material ui based on whether props are required

If a value is required, the TextField border color will be red. Once a value is entered, the red border will disappear. Check out the images by clicking on the links below: Entered Value Without Value with Required field ...

cssreactjsmaterial-ui

Create a fully responsive introduction page with three columns using Bootstrap, ensuring that the height of the

Currently, I am in the process of designing a website for a restaurant, hotel, and vineyard. My goal is to create three separate websites that are linked through one introductory page. The concept for the intro page involves three columns displayed side b ...

htmlcsstwitter-bootstrap-3responsive-design

What is the most effective method for implementing a background repeated image in Foundation 4 framework?

Currently, I am utilizing the foundation4 framework for my website. In order to achieve a repeating tiled background, I have crafted a custom CSS file and included the following code snippet: body { background: url(img/floorboardsbg.jpg) repeat; } Whi ...

htmlcsszurb-foundation

Tips for positioning the search form in the navbar header

My brand image and list with 2 glyph-icons & a search form in the navbar header are not aligning properly. The search form button keeps dropping to the line below. Does anyone know a CSS trick to keep it on the same line as the rest of the links? All the ...

htmlcsstwitter-bootstrapnavbar