Position the icon to the left within a bootstrap 5 card

Struggling with alignment in Bootstrap 5, facing two issues:

1- How to align my icon with the left border of the card body?

2- Increasing the icon size affects the vertical alignment of my card item (see image below)

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

Trying to vertically align the arrow and have it stick to the left border even when text length changes.

    <div class="container-fluid">
      <div class="row ">
        <div class="col-lg-4 col-card-pricing">
          <!-- 1 month -->
          <div class="card my-auto card-pricing">
            <div class="card-body border-bottom-0">
              <i class="fas fa-dollar-sign fa-4x pricing-tag"></i>
              <h5 class="card-title"> Monthly </h5>
              <h5 class="card-title">$ 1.00 </h5>
            </div>
            <ul class="list-group list-group-flush border-bottom-0 border-top-0">
              <li class="list-group-item border-bottom-0 pricing-item"> <i class="fas fa-arrow-right fa-1x arrow-item"></i>Choose one game </li>
              <li class="list-group-item border-bottom-0 pricing-item"> <i class="fas fa-arrow-right fa-1x arrow-item"></i>Detailed statistics</li>
            </ul>
            <a href="#" class="btn btn-dark btn-lg princing-button">Subscribe</a>
          </div>
        </div>
     </div>
.col-card-pricing {
  padding: 3% 4%;
}

.card-pricing {
  /* height: 500px; */
  transition-duration: .3s;
  border-radius: 5%;
  margin: 3% 0;
}

.card-pricing:hover {
  /* height: 500px; */
  transform: scale(1.15);
  border: 1px #F05454 solid;
}

/* .card-pricing:hover
.pricing-button {
  background-color: #F05454 !important;
} */

.princing-button {
  margin: 6% 15%;
  margin-bottom: 10%;
}

.pricing-item {
  font-size: 1.2Rem;
  margin: 5%;
  vertical-align: middle;
}
.arrow-item {
  /* padding-right: 150px; */
  /* text-align: left !important; */
}

.pricing-tag {
  padding: 8% 0;
  color: green;
}

Answer №1

   .list-group-item{
       position: relative;
    }

   .list-group-item i {
     position: absolute;
     left: 12px;
     top: 17px;
}

To align your arrow icon to the left border, you can set the list item as relative and the icon tag as absolute in terms of positioning.

You can also explore using flex for a more flexible layout:

<li class="list-group-item border-bottom-0 pricing-item">
    <i class="fas fa-arrow-right fa-1x arrow-item"></i>
    <span>Choose one game</span>
</li>

.list-group-item{
    display: flex;
}
    
.list-group-item i {
    flex: 0 0 10%;
}
.list-group-item span{
    flex: 1;
    text-align: center;
}
        

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

Automatically generated JavaScript input value calculation

I have 3 text input fields set up as follows: <input type="text" id ="text1"/><br> <input type="text" id ="text2"/><br> <input type="text" readonly="readonly" disabled="disabled" id ="text3"/> The third input is disabled and ...

Utilizing jQuery for Summation Calculation

How can I use jQuery to calculate the total sum of prices for all products in a table with the column name "price"? Once calculated, how do I store this sum in a variable? <table id ="tab"> <th>Product</th><th>Price</th> ...

Is it necessary to bring in CSS for the following page?

Should CSS be imported and used across multiple pages in a web application? Is the page structure outlined below considered acceptable, or is there a standard practice to follow? /pages /home index.js index.module.css /cart ...

Eliminating hidden boundaries in a table by using CSS styling

I currently have a div container with a table embedded within. HTML: <div id='ribbon'><table id='topMenu'> <tr> <td><a href='index.php'>Home</a></td> <td><a href='links ...

Adding attributes to parent DOM elements of a component in Angular2: A Step-by-Step Guide

I'm working with the following code: ... <div class="container"> <div class="fancy"> <fancybutton></fancybutton> </div> <button (click)="addAttribute()">Remove</button> <button (click)="remAttr ...

Managing broken images within an internet browser

Is there a way to hide the broken image icon, similar to what's shown at '', when no image is displayed? I've set up a comment section using PHP and CSS that allows users to leave comments and upload photos. However, if a user decides t ...

Align the radio button, dropdown menu, and checkbox in a single row

I'm attempting to align a radio button, dropdown, and checkbox on the same line where the second radio button is displayed. I'm utilizing Bootstrap 4, but I'm open to plain HTML that doesn't necessarily follow Bootstrap styling. I trie ...

What is the reason behind certain websites not displaying a .php extension at the end of their file names?

There are times when I notice that a website's URL is structured like this: www.website.com/index.php while other times it appears like this: www.website.com/index/ What is the reason for the absence of a .php or .html extension in the second URL? ...

Can one look through a div to the one beneath it by moving the cursor?

Hey there! I have a unique question for you. I've been trying to achieve a specific effect where two divs are stacked on top of each other, and the content of the lower div is only revealed in a certain area around the cursor. Is it possible to make o ...

Tips on changing font color within an email body in Outlook using a C#.NET Windows application

While working on a c#.net windows application, I encountered an issue with setting font color for specific lines in the email body when sending mail to Outlook. Despite trying various methods, I was unable to find a solution. Below is a snippet of my code: ...

Can the hexadecimal value from an input type color be extracted and used to populate form fields that will then be displayed in a table after submission?

Hello everyone, I'm new to this platform and seeking guidance on how to improve my post! I recently created a CRUD app using Angular. It consists of a basic form with 4 fields, a color picker using input type='color', and a submit button. U ...

php Use cURL and the DOM to extract content with specified CSS styling

Unclear in the title, I want to copy all content from a specific div on an existing webpage (not owned by me). The code successfully extracts the content. Extractor code: // Get Data $curl_handle=curl_init(); curl_setopt($c ...

Ways to perfectly align an icon both horizontally and vertically in an <a> tag that covers the entire container

Looking to center an icon within an "a" tag that spans the entire div container? The goal is to make the entire container clickable for carousel navigation, rather than just the icon itself. Currently, I can achieve each desired effect separately. On the ...

It vanishes as soon as you move your cursor away during the animation

I created a button component with text animation, but I'm encountering an issue. When I hover over the button, the animation works smoothly. However, if I quickly move my cursor away or unhover in the middle of the animation, the text disappears unex ...

Anomaly in Form Validation with Semantic-UI

This time around, I am implementing Semantic-UI with React. In the past, I have successfully utilized Semantic-UI's form and form validation features in various projects without encountering any issues. However, a new problem has arisen, which I will ...

The border width of the div is set to 2 pixels, but upon inspection it appears to be 1

Greetings! I have created the following code snippet: <!DOCTYPE html> <html> <head> <title>Padding</title> <style type="text/css"> #main { width: 400px; height: 400px; border: 2px blac ...

Unexpected Issue: Bootstrap 5 Modal Fails to Display Dialog Box

I'm brand new to Bootstrap and I'm trying to integrate it into an existing jQuery project. I'm having trouble getting modals to function properly. I have the code snippet below, taken from the Bootstrap example, at the end of my page: <di ...

What is the correct way to include viewport width in pixels using CSS?

My div is set to a width of 50vw with padding of 25px on all sides. I am looking to add a fixed element to the right of it by increasing its width by 50vw and adding 25px. Can this be achieved using only CSS, or should I consider using Less? If so, how c ...

Prevent the use of repetitive borders by utilizing display: inline-block

I've been experimenting with the behavior of div elements when used as a table, rather than using the traditional table element or display properties. The main reason for this is that I have found tables and display properties to be problematic for my ...

Ways to incorporate gentle page breaks into an HTML document

My task involves creating an XSL script to analyze various XML files that share a similar structure. The aim is to parse these XMLs and transform them into HTML pages. For longer XML documents, I want the resulting HTML page to be paginated (meaning the pa ...