Guide to adding icons above the footer of a bootstrap 4 card

I have a straightforward Bootstrap 4 card with a footer that includes some text and an icon. Take a look at the code snippet below:

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer">
    <a href="#" class=""><i style="font-size: 2.5em;" class="fab fa-facebook"></i></a>
    <span class="float-right">some text</span>
  </div>
</div>

My challenge is when I add the icon code in the footer, it makes the footer larger. What I want is for the icon to overlay the footer area, almost like floating on top of it, without changing the size of the footer. There are multiple cards with the same footer on the page.

Any tips on how to achieve this?

htmlcsstwitter-bootstrapbootstrap-4font-awesome

Answer №1

To remove your icon element from the normal elements flow, set its parent to position: relative and the icon element to position: absolute. This way, the position of your icons will depend on the footer, allowing you to adjust their position using properties like top.

If you have multiple icons, you can either individually adjust the position of each icon or place them in a container like a <div> with position: absolute applied to the container instead of the individual icons.

.card-footer {
  position: relative;
}

.icons {
  position: absolute;
  top: -.35rem;
  font-size: 2.5em;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="card ">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer">
    <div class="icons">
      <a href="#"><i class="fa fa-facebook"></i></a>
      <a href="#"><i class="fa fa-twitter"></i></a>
    </div>
    <span class="float-right">some text</span>
  </div>
</div>

Answer №2

There are actually several approaches to solving this issue.

One option is to give the icon a CSS property of position: absolute.

Alternatively, you could specify a specific height for your footer element like height: 300px. However, keep in mind that this may affect the layout of other content on the page (if that's not your intention).

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

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 Try ...

htmlcssalignmentbootstrap-5

Guide on inserting an item into a vertical navigation menu

When it comes to creating a vertical menu, I rely on Bootstrap 5. https://i.sstatic.net/8CWYK.png The issue I'm facing is how to add a black background to the top of the left menu. https://i.sstatic.net/yoEcO.png I am unsure whether I should imple ...

cssbootstrap-5

Creating customized JQuery UI tabs to perfectly accommodate the available horizontal space

Can JQuery UI Tabs be modified to fill the horizontal space and stack to the left? In order to achieve this, could we consider using a markup like the one below: <table width="100%"> <tr> <td> ...content... </td> ...

cssjquery-ui

What is the best way to include special characters within an input field designated as a password, such as when the value is set to 12-123456

One of my unique components is the PasswordInput, featuring a visibility icon that allows users to easily switch between showing their password in plain text and hiding it with bullets. However, currently when displaying a value like "12-123455" in passwor ...

javascripthtmlcssinputpasswords

Tips for updating the default value of an HTML <select> tag using a customized <select> option

I'm struggling to update the value of my <select><option value=""></option></select> based on a custom select option I created. Customizing select options using JS and jQuery is necessary since they can't be easi ...

javascripthtmljquery

Updating Gmaps iFrame URL with AJAX

I am currently attempting to update the SRC of an iFrame by using a URL obtained via AJAX from the backend database. I want the maps to change when a button is clicked. An error message displayed inside the iFrame reads, "404. That’s an error. The reque ...

phphtmljsonajax

PHP and jQuery to create an autocomplete text input feature

I've been working on implementing an auto suggest text box using PHP and jQuery, but it seems like the jQuery code I found online is already deprecated. I'm not sure if my code is incorrect or if the issue lies with the jQuery itself. Can anyone ...

phpjqueryhtml

Exploring the Canvas with Full Element Panning, Minimap Included

Currently, I am working on incorporating a mini map onto my canvas that mirrors what is displayed on the main canvas. The main canvas includes zoom and pan functions. I have created a rectangular shape for the minimap to display the content of the canvas. ...

javascriptcsshtmlcanvas

Adjust the height of the following column to match the responsive height of the initial column

Those who have marked it as duplicate, I want to clarify that my question is not about making Bootstrap columns all the same height. Instead, I am focusing on responsive images while maintaining their aspect ratio, which is a different issue from simply en ...

htmlcsstwitter-bootstraptwitter-bootstrap-3responsive-design

"Implementing a real-time countdown using jQuery on a dynamically generated

I require some assistance in implementing the jquery countdown plugin by Keith Wood. My task involves creating multiple countdowns by fetching data from a MySQL database using a PHP AJAX call, and then inserting it into a div: In my PHP file (getdetails. ...

javascriptphpjqueryhtml

"Encountering challenges with integrating Addthis on a WordPress website

Hey there, I've got a few questions about my self-hosted Wordpress site... 1) I'm having an issue with the Google Plus button not appearing on AddThis Smart Layers. Even though the code is in my header, only 4 buttons show up on my page - the Go ...

javascriptphphtmlcsswordpress

Ways to ensure that floating blocks remain in the same row using CSS

Check out my demo here: http://jsfiddle.net/3c40tafe/1/ Is there a way to align the icon, file name, and description in a single row? The icon and title should have fixed widths, while the description paragraph should take up the remaining width. Here&ap ...

htmlcss

I am unable to choose the search items

I am currently working on creating a search functionality using PHP, MySQL, JavaScript, and AJAX. However, I am encountering an issue with selecting the suggested search items. Even though I have implemented the load suggestions feature, I am unable to sel ...

javascriptphpajaxbootstrap-4

Emphasize the checkbox

In my table, I have radio buttons that should turn the neighboring cell green when clicked. Using JQuery, I added a "highlight" class on $.change event to achieve this effect. However, I encountered an issue where some radio buttons load with the "checked ...

jquerycsshighlight

Incorporating a variety of images into this hexagonal design framework

Hello there! I am just starting to learn CSS and HTML, and I have a question. Is it possible for me to use the same CSS styling but have different images inside each of the hexagons? I want to replace the image '' with multiple images without rep ...

htmlcsscss-shapes

Could Angular be automatically applying margins or padding to my component?

I'm encountering a minor issue.. I'm attempting to create a "Matrix" to construct a snake game in angular, but there seems to be an unremovable margin/padding. Below is my code: <!-- snake.component.html --> <div id="ng-snake-main&q ...

htmlangularsasspaddingmargin

Tips for verifying that a file has not been selected in Croppie

Whenever I use croppie to crop images on my website, everything works fine when I select an image and upload it. But if I try to crop and upload without selecting an image, a black image gets uploaded instead. How can I validate if the file upload is empty ...

javascriptphpjqueryhtmlcodeigniter-3

What are some tactics for avoiding movement in the presence of a border setting?

I created a webpage that has the following structure: .topbar-container { width: 100%; position: fixed; top: 0; background-color: #2d3e50; z-index: 999; display: flex; transition: height 500ms; } @media (min-width: 992px) { .topbar-cont ...

javascripthtmlcss

Getting the chosen option from a dropdown list mapped in ReactJS

I am working on a dropdown select option that is linked to the data of an array object called 'template_titles'. Currently, the value in the dropdown corresponds to the title in the object. My goal is to be able to extract and use the selected va ...

javascripthtmlreactjs

A step-by-step guide to accessing specific row data in a database

I have been searching for a solution for the past few days and am struggling to figure out how to retrieve data from a specific row in a database when I click on the "View Detail" button on the main page. [s_no is unique] Here is my main page: view.php ...

phpmysqlhtmlmysqli