When applying a background color with Bootstrap 4, the card borders may appear inconsistent or distorted

(Customizing Bootstrap 4.1.3) I am currently working on personalizing a card design. Initially, I added border-danger

<div class="row">
    <div class="col">
        <div class="card border-danger">
            <div class="card-header border-danger">
                Label
            </div>
            <div class="card-body">
                Text <br/>
                Text
            </div>
        </div>
    </div>
</div>

This resulted in the following output:

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

Everything seemed to be going well. Next, I attempted to change the background of the header using the same code along with:

...
<div class="card-header border-danger bg-white">
...

However, this caused the top border of the card to become thinner: https://i.sstatic.net/Cg6e9.png

Any combination of borders and background colors applied to card, card-header, card-body, etc. seem to produce similar border issues (not limited to just the top side).

Does anyone have a solution for this problem or any hints on how to prevent it?

Thank you in advance!

--- Edit --------------------------------------------

I decided to test the hello world template from Bootstrap 4 website (using CDN links for version 4.0.0 instead of 4.1.3) It appears perfectly fine in Firefox Developer 64.0b2 (64-bit).

In Chrome Version 70.0.3538.67 (Official Build) (64-bit), however, I encounter the issue: https://i.sstatic.net/2zJtR.png

I then pasted the code into Codeply. The results are consistent in both FF and Chrome. In FF, there are really thin 1px borders, while Chrome displays slightly thicker borders (but still uniform). Despite this, the problem persists on my local machine ...

Answer №1

It appears to be a specific issue related to the browser and screen resolution, particularly in Chrome Version 70.0.3538.67 (Official Build) (64-bit).

I am using two different 4K/28" displays with 175% scaling applied. The error only occurs when I am in full-screen mode. Interestingly, the display looks correct at certain window sizes, but changes when resizing the browser window.

Interestingly, this issue does not occur on Firefox, Edge, or even IE11.

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

Is it possible to create a webpage that is invisible to users accessing it from a desktop device

Is it possible to create a webpage that is only visible on tablet and mobile devices, while redirecting desktop users somewhere else? I want this page to be hidden from desktop users entirely. ...

What is the best way to incorporate external libraries and plug ins such as owl.carousel.js into HTML and CSS?

I've been exploring the idea of adding a carousel to my website and stumbled upon owl.carousel.js during my research. The layout and features seem to align with what I'm looking for, which is great! As a newbie in this field, I could use some gu ...

When floating a left and right div block, they do not necessarily align on the same line

I am looking to create a nested menu where some of the menu items have key shortcuts that I want to align to the right side on the same line. I attempted to use float left/right, but encountered an issue where the shortcuts were shifted to the next line. H ...

When the text is long, it does not extend all the way to the right

I am working on designing a login page and have created an input text field for the user's email address. However, I have noticed that when the email address is long, there is some space left at the end of the border (I suspect it may be due to paddin ...

Stopping raised div from shifting according to screen width

I am seeking a solution to prevent a div from moving up on mobile devices with smaller widths. While I understand that this can be achieved with media queries, I am curious if there is a more elegant approach. .wrapper { background: no-repeat cente ...

Stylish navigation menu with a subtle scrolling effect in the

Both the left panel and main content should have individual scrolling abilities. You can view a demonstration of this functionality here: http://plnkr.co/edit/Le6hPWwMm0pu5Ukm2cYg?p=preview Below is the CSS code required for this feature: html { ove ...

When clicking on a div with the CSS property user-select set to none, the selected text in a contenteditable element is

I'm currently working on a unique JavaScript rich text editor that utilizes div elements with the CSS property user-select: none instead of traditional buttons. While this approach works perfectly in Firefox, I've encountered a major issue with G ...

Altering the dimensions of radio button options

Is it possible to change the size of a radio button using CSS in all browsers? I'm struggling to find a solution and don't want to waste my time if it's not achievable. I haven't explored CSS3 for HTML5 yet. Hmm... ...

Set an attribute without replacing any existing class attributes

I have developed a script that updates the class attribute of the body element on my website when an option is selected from a dropdown menu. However, I am facing an issue where it overrides the existing dark mode attribute. The purpose of this script is ...

Looking for Angular 2 material components for dart with CSS styling? Need help centering a glyph on your page?

HTML: <div class="border"> <glyph class="center" [icon]="'star'" ></glyph> <div class="centerText"> This Is Text that is centered. </div> </div> Css: .centerText{ text-align: center ...

Slight Misalignment of Elements

I am attempting to align two corners of an element so that they perfectly match the corners of another element. In simpler terms, I am aiming to synchronize the corners of one element with those of another element. Below is the code snippet: ... When y ...

Manipulate the lines in an HTML map and showcase the distinctions between them

I've been searching through various inquiries on this particular subject, but none have provided me with a satisfactory response. I have created a map where I've set up 4 axes using the following code: function axis() { var bounds = ...

Implementing a universal font-size adjustment feature according to user preferences

Is it possible to allow users to choose the font size for the entire application, offering three options: Big, Medium, Small? If a user selects "Big", all fonts in the application will be resized globally. I have spent time researching this issue but ha ...

Steps to display a specific div section upon selecting a dropdown option and clicking the submit button using jQuery

I'm having an issue displaying a specific div section when selecting an option from a dropdown menu. I've written the code below, but it doesn't seem to be working. Can anyone please assist me with this? My actual requirement is that I only ...

Selenium aids the driver in locating elements

Currently working on Java programming. Here is a snippet of web code I am dealing with: <button class="btn-link" data-sugg-sources="full_name" data-sugg-technik="make_initial_and_name">NG1ulkan</button> When I right-click and copy the CSS sel ...

Alter appearance of images depending on browser window size

I am working on an angular JavaScript code snippet that uses the ng-repeat command to display a row of small images. I want to ensure that these images do not spill over into a second line when the browser window is resized. Instead, I prefer them to eith ...

Why Chrome Doesn't Alter the State of li Elements

I'm unsure why, but the CSS code in this particular fiddle fails to function correctly on Chrome. On Firefox, when hovering over one of the li elements, the text becomes visible as expected, whereas this does not occur on Chrome. It seems that changin ...

Styling your sidebar with CSS and Bootstrap to accommodate dynamic content with varying heights

How can I adjust the height of my sidebar block to match the height of the sidebar main block and the content block? Check out this example image I created: https://i.sstatic.net/qFIxe.png I'm currently using Bootstrap 4 and have experimented with ...

How can I make a div extend beyond the boundaries of a bootstrap card?

Working with bootstrap version 4 and devexpress. The dropdown section you see is a creation by devexpress. https://i.sstatic.net/8vdj6.png ...

Tips for aligning Bootstrap Cards evenly on a webpage

I am currently working on a React project that utilizes Bootstrap, and I am encountering some difficulties trying to center the Bootstrap Cards with consistent spacing on my website. The gap between each set of three cards is too large, and the alignment o ...