Tips for utilizing the <br> element within a Bootstrap card?

Is there a way to break the line after "Other online payment" without affecting the card content alignment in bootstrap? Adding the <br> tag is causing issues with the alignment. Any thoughts on why this is happening? Thank you :)

.user-ads {
  font-size: 14px;
  text-align: left;
  margin-left: -55px;
}

.user-ads li {
  position: relative;
  padding-bottom: 17px;
  padding-left: 25px;
}

.user-ads li span {
  float: right;
}
<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>

<div class="card" style="width: 32rem;">
  <div class="card-body">
    <ul class="user-ads">
      <li><strong>Seller </strong><span>tempestblaze</span></li>
      <li><strong>Payment method </strong><span><a href="">Other online payment:</a> Koho App</span></li>
      <li><strong>Price/BTC </strong><span>1,233,775.89 PKR</span></li>
      <li><strong>Limits </strong><span>10,000 - 62,538 PKR</span></li>
      <li><span><a class="btn btn-primary" href="">Buy</a></span></li>
    </ul>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

Give this a try. I made sure to include an extra line break to prevent any overflow issues that could disrupt the margins. After testing it on my own server, everything appears to be working well. Well done!

<div class="card" style="width: 32rem;">
    <div class="card-body">
      <ul class="user-ads">
          <li><strong>Seller </strong><span>tempestblaze</span></li>
          <li><strong>Payment method </strong><span><a href="">Other online payment:</a><br> Koho App</span></li>
          <br>
          <li><strong>Price/BTC </strong><span>1,233,775.89 PKR</span></li>
          <li><strong>Limits </strong><span>10,000 - 62,538 PKR</span></li>
          <li><span><a class="btn btn-primary" href="">Buy</a></span></li>
      </ul>
    </div>
</div>

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

Tips for accessing the HTML content enclosed within a specific HTML tag using Python with Selenium

I am trying to extract the source code of an HTML document that is embedded within an <iframe> tag generated by JavaScript. The HTML contents within this <iframe> tag appears as #document, which expands to reveal a full HTML document starting w ...

javascriptpythonhtmlseleniumbeautifulsoup

I prefer images to remain static in size while adjusting the browser dimensions

On my webpage, I initially specified the sizes of images in pixels like this: <IMG src="image.png" width=700px height=100px> However, when viewed on machines with different screen resolutions, the page didn't always display as intended. To ad ...

htmlcssbrowser

Prevent Cordova from shrinking the view when focusing on an input

Currently working on developing an app using Cordova/Phonegap (v6.5.0). Platforms where I've installed the app: - IOS (issue identified) - Android (issue identified) - Browser (no issue found) I am facing a known problem without a suitabl ...

javascriptandroidioscsscordova

Guide on Ensuring a Fixed Div Covers the Entire Width of the Screen

Hello everyone, I need some help with formatting my social media widgets on my website. I want them to span the entire width of the screen, align to the right, and remain fixed at the top of the page. You can check out the site totempole.ca for reference. ...

htmlcss

CSS: How to target a specific element using its ID with nth-child selector?

Here is the HTML code that I am working with: <dl id="id"> <dt>test</dt> <dd>whatever</dd> <dt>test1</dt> <dd>whatever2</dd> .... </dl> I am trying to select the third dd ele ...

csscss-selectors

Overflow issue with floating labels in Bootstrap 5 within a grid container

Incorporated within this code snippet are floating selects placed inside a bootstrap grid: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b6bbbba0a7a0a6b5a494e1fae7fae7">[emai ...

htmlcsstwitter-bootstrapbootstrap-5

Attempting to alter the background image through the action of clicking on an image using jQuery, HTML, and CSS

I have created custom weather icons like a sun, cloud, and rainy cloud using Photoshop. My goal is to allow users to click on these icons and change the background image of the website's body. However, despite my efforts, clicking on the images does n ...

javascriptjqueryhtmlcss

Using Jquery and css to toggle and display active menu when clicked

I am trying to create a jQuery dropdown menu similar to the Facebook notification menu. However, I am encountering an issue with the JavaScript code. Here is my JSFiddle example. The problem arises when I click on the menu; it opens with an icon, similar ...

javascriptjqueryhtmlcss

The ng-repeat-start feature is not functioning properly across different levels

I am attempting to utilize the ng-repeat-start directive in order to construct a table that resembles the following: https://i.sstatic.net/Qgc91.png The structure of my JSON data is as follows: [ { "name": "Chapter 1", "parts": [ { ...

javascripthtmlangularjsjsonangularjs-ng-repeat

The transparency feature is malfunctioning in IE9 when using a background

This is a demonstration of a lightbox feature. You can find the code here. When you click on the link "Show Panel," a form will pop out. It works correctly in Firefox but not in IE9. The HTML code is simple: <body> <a id="show-panel" href="#"&g ...

jqueryhtmlcssinternet-explorerlightbox

Issue with spacing between elements in Tailwind/Nuxt - elements appear too close together

There seems to be a spacing issue when using tailwind v3.4.3 on the Tailwind Playground, with extra space added between span elements. <div> <p> <span class="bg-slate-800">TEST</span> <span class="bg-oran ...

cssvuejs3tailwind-cssnuxt3.js

Is it possible to have more than one button for each item on my Shopping List App?

I am developing a shopping list app that allows users to add items to a list. Each item added triggers the display of a button next to it, enabling users to remove the item from the list when needed. However, a problem arises as more items are added – i ...

javascriptjqueryhtmlcss

What is the best way to ensure that my button only reveals the corresponding div in its group upon clicking?

Currently, when I click the first button, both hidden divs are showing. I want it so that when I click the first button, only the hidden div in its group is shown. Similarly, when I click the second button, only the hidden div in its group is shown. Can s ...

htmljquerycss

What is the best method for creating a close button on the bottom right corner with Bootstrap?

I need help adjusting the position of a button in a flash message. How can I move the button to the bottom-right? <div class="alert alert-danger alert-dismissible fade show" role="alert"> <%= success %> ...

htmlcssbootstrap-5

Does SCSS have a specific 'self' identifier?

I am looking to incorporate SCSS styles on the body by default, and then reapply them specifically to the P and LI tags (since I do not have complete control over the site and want to prevent plugins from interfering with my p's and li's). To ac ...

csssass

Pressing the button will add text into the input field

Below is a jsfiddle link showcasing the current issue I am trying to address: http://jsfiddle.net/YD6PL/61/ Here is the HTML code snippet: <input type="text> <input type="text> <input type="text> <div> <button class="buttons"& ...

javascripthtml

How can one element be made to rely on the presence of another element?

I'm currently working on my portfolio website and encountering an issue. Whenever I hover over an image of a project, the image expands in size, becomes less transparent, and a description of the project pops up. However, I would like to include a lin ...

javascripthtmlcss

Vue.JS and its Onclick event handler allows for dynamic and interactive

These are my two buttons: <button onclick="filterSelection('Action')">Action</button> and <button onclick="filterSelection('Adventure')">Adventure</button> Now, I'm trying to achieve the same fun ...

javascripthtmlvue.js

Using AJAX for initiating Liquid code upon page load

I was trying to create an onClick function that would add liquid code to the div when a certain link is clicked. However, instead of adding both the liquid code and its content, it was only adding the code itself. Here's the code snippet I used: Inde ...

javascriptjqueryhtmlajax

Conceal the scrollbar while navigating within the parent container

I'm currently working on implementing a parallax header on my WordPress site using the Divi theme. Below is the code I have so far: <div class="parallax"> <div class="parralax__layer parallax__layer--back"> <img src="https://crisp ...

cssscrolloverflowparallax