Issues with displaying the footer of Boostrap 4 cards arise when using flex styling

Here is the code for a card footer that I am having trouble with:

<div class="card text-center">
<!-- CODE FOR card-header, card-body -->
    <div class="card-footer">
            <div class="d-flex justify-content-center">

                    <a href="#" class="card-link btn btn-primary btn-sm">
                    <i class="fas fa-briefcase fa-2x"></i>
                    </a>


                    <a href="#" class="card-link btn btn-info btn-sm">
                    <i class="fas fa-comments fa-2x"></i>
                    </a>


                    <a href="#" class="card-link btn btn-success btn-sm">
                    <i class="fas fa-user fa-2x"></i>
                    </a>


                    <a href="#" class="card-link btn btn-warning btn-sm">
                    <i class="fas fa-exclamation-circle fa-2x"></i>
                    </a>

                    <a href="#" class="card-link btn btn-success btn-sm">
                    <i class="fas fa-check fa-2x"></i>
                    </a>
            </div>
    </div>
</div>

I am experiencing display issues on an iPhone 7 when viewing the card in Chrome.

This is how it appears on the iPhone :

https://i.sstatic.net/4ELEd.png

Interestingly, the card displays correctly in Chrome on desktop when using the "toggle device toolbar" to preview as an iPhone 7:

https://i.sstatic.net/49T4h.png

However, when using the same tool to view as an iPhone 5 on desktop Chrome, it does not display properly:

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

Any assistance on this issue would be greatly appreciated!

cssflexboxbootstrap-4font-awesome

Answer №1

Adjusting the left margin may take some trial and error to get the padding just right, but playing around with this code could help achieve the desired effect on your iPhone: 

.card-link+.card-link { margin-left: 4% !important;}

.card-link+.card-link {
  margin-left: 4% !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="container">
  <h2>Card Header and Footer</h2>
  <div class="card text-center">
    <div class="card-header">Demo Header</div>
    <div class="card-body">Demo Content</div>
    <div class="card-footer">
      <div class="d-flex justify-content-center">

        <a href="#" class="card-link btn btn-primary btn-sm">
          <i class="fas fa-briefcase fa-2x"></i>
        </a>


        <a href="#" class="card-link btn btn-info btn-sm">
          <i class="fas fa-comments fa-2x"></i>
        </a>


        <a href="#" class="card-link btn btn-success btn-sm">
          <i class="fas fa-user fa-2x"></i>
        </a>


        <a href="#" class="card-link btn btn-warning btn-sm">
          <i class="fas fa-exclamation-circle fa-2x"></i>
        </a>

        <a href="#" class="card-link btn btn-success btn-sm">
          <i class="fas fa-check fa-2x"></i>
        </a>
      </div>
    </div>
  </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

By default, use jQuery to load the content of a div

Upon page load, I am looking to display the content within #destiny2. This section includes text and images, as well as additional content for three categories. Initially, the first category should be shown without requiring a click. Subsequently, clicking ...

javascriptjquerycss

"Create sleek and stylish forms with Bootstrap's horizontal

I am attempting to create a horizontal form in Bootstrap using the code provided in their documentation. The example they show has input boxes filling the entire column space, but for some reason this is not happening when I try it, even after copying the ...

htmlcssbootstrap-4

"Finding the Perfect Alignment: How to Center Legends in Firefox

The issue at hand An issue has been identified where the code functions as intended in Chrome, Opera, and IE but fails to work in Firefox: fieldset>legend { display: table; float: none; margin: 0 auto; } <fieldset> <legend>Legend ...

htmlcssfirefox

Display and conceal the information with a hyperlink

I need to create a content DIV that includes a link to expand and collapse it. Within this content DIV, there is an unordered list. Initially, only two list items should be displayed with an expand link. If users want to see additional list items, they mu ...

javascriptjquerycss

Incorporating external CSS files via the link tag in a web component

I'm attempting to incorporate Bulma from CDN within a custom web component, but it doesn't seem to be functioning properly. Here is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <title>hello</title& ...

javascriptcssweb-component

Just started using Bootstrap and in need of help with a layout problem

Bootstrap is known for its grid-based system. My goal is to create a category page for products that can adapt to the screen size, allowing for as many DIVs as the screen will accommodate. Essentially, I want the number of DIVs to increase as the screen si ...

javascriptjqueryhtmlcsstwitter-bootstrap

I am interested in creating a header that remains static

Currently, I am attempting to create a header that has a freezing effect. My goal is to have a banner at the top with a navigation menu underneath it. When scrolling down, I want the banner to disappear but have the navigation menu remain frozen at the top ...

htmlcss

What methods can be used in CSS to create this specific design using only two images?

Searching for a way to display two images side by side on a webpage with specific criteria. 1) Final look should resemble this: https://i.sstatic.net/XA8V3.jpg 2) Both images must be clickable links (e.g. mysite1.html and mysite2.html) 3) Both images ...

javascriptcssimage

Two separate pieces of text converge within a single span

I am facing a challenge with alignment in a bootstrap <span> element. Specifically, I want to align the word "amount" to the left, and the "$" to the right, within the same label. I attempted to nest a <span> inside another <span> and app ...

htmlcsstwitter-bootstrap

What steps should I take to incorporate Bootstrap's JavaScript into Vue (Gridsome)?

Check out my website: The site is built with Gridsome, a static site generator for Vue. If you navigate to the mobile version and try to open the Bootstrap Hamburger menu, it doesn't work as expected. I've followed the instructions in Gridsome ...

javascripttwitter-bootstrapvue.jsbootstrap-4vue-component

What is the best way to prevent the content within a div from being obscured by a sticky element affixed to the bottom of the div?

I am struggling with ensuring that the content in my wrapper does not get cut off by the "view more" div attached to the bottom. The default wrapper cuts off the children, and even when expanded, the issue persists due to CSS problems. In React, the gener ...

javascriptcssreactjsstyled-components

Center alignment is not possible for the Div element

Problem Every time I attempt to implement the following code (outlined below), the div only appears centered when using width: 100px;. <div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue; margin-left: auto; mar ...

javascripthtmlcsscenter

When a sidebar is added, Bootstrap 5 cards that are supposed to be displayed in a row end up being shown in a column instead

When I have a row of Bootstrap 5 cards that display correctly, but then add a sidebar that causes them to stack in a column instead of remaining in a row. How can I maintain the row layout even with the addition of a sidebar using specific CSS classes or p ...

htmlcssbootstrap-5

The parent element is not able to apply the CSS text-decoration in jQuery

Is there a way to retrieve a specific CSS property of an element, even if it is inherited from its parent? The standard jQuery method .css() can help with this. Consider the following HTML structure: <div id="container"> some text<br> ...

jquerycsstext-decorations

How can I get rid of the extra space below the container in bootstrap?

I need to enhance the red-framed box_switch section in the image above by moving it to the top and applying a background color. https://i.sstatic.net/NZPUQ.png React.js <div className="container"> <div className="row mx-auto t ...

cssreactjsbootstrap-4

Missing Image: Bootstrap NavBar Display Issue

Having trouble inserting an image into my Bootstrap navbar, only the alt text is showing up. Does anyone have a solution for this? Bootstrap Version: CDN Version 5.0 Beta Screenshots: https://i.sstatic.net/vBNYp.png https://i.sstatic.net/v8lwu.png https: ...

htmlcssbootstrap-5

CKeditor does not accept special characters or diacritics in keywords

Recently, I came across a helpful code snippet for CKeditor that counts and ranks the most used words in a textarea. This feature is invaluable for generating SEO-keywords suggestions while writing articles. However, there is an issue with non-English char ...

javascripthtmljquerycssckeditor

Guide to incorporating navigation buttons (back and forward) in a modal box

I have successfully created image thumbnails and linked them using the provided code. <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script src="https://maxcdn.bootstra ...

javascriptjqueryhtmlcsstwitter-bootstrap

Large header bar positioned above navbar in Bootstrap 4 design

Is there a way to add a pagewide bar above the navbar that can disappear in mobile view? <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"> <div> Pagewide </div> < ...

csstwitter-bootstrapbootstrap-4

Crafting a Cubic Masterpiece with Pure CSS Gradient Magic

Experimenting with various techniques involving linear gradients, I have achieved layers of multiple stripes but have encountered a block when it comes to the top face. My goal is to use gradients, whether linear or radial, to create a series of repeatin ...

htmlcssgraphics3d