How to Disable the Border on Bootstrap 4 Cards

How do I disable the border on bootstrap 4 cards

If you check the .card class has a border: 1px solid #e5e5e5;

To remove it simply override it to border: none;

Removing Borders from Collapsible Bootstrap Cards

It could be your cache not being cleared. If not you could try this and see if it does the trick:

.card {
border: 0;
}

or:

<div class="card border-0">...</div>

How do I get rid of white borders in my bootstrap card? Changing border colour does not work

Bootstrap 4 contains some border utility classes - you can find them here in the boostrap documentation.

The particular one you're interested in is border-0, for example;

<div class="card border-0">...</div>

Boostrap cards have borders on some of the inner elements (header, body, etc...). Make sure you're adding the class to the right element(s)

Remove all Bootstrap 4 styling from .card-header

What you are seeing here is accessibility styling that bootstrap has added to help users see where there are currently focused on the user interface. The collapse component your using also uses the card component as well.

Although I don't recommend it, you can remove the accessibility styling no different than removing other styling like you showed above, however you need to access the pseudo class.

This accessibility styling is done through the pseudo element focus.

You can access the pseudo properties of a class by adding :focus at the end. In this cases the styling is done on a class called .btn. To change only buttons within an collapsible elements do the following.

.card .btn:focus {
box-shadow: none;
}

Unwanted border around image which isn't a CSS border or outline using Bootstrap 4

Ofcourse the border line will come. Why because you haven't added the src link for image tag

<img class="i-home"> : missed src. Eventhough you have added the image via background, you have to pass the src inside image tag. If not the browser will consider as Invalid Tag declaration. So by default the missing image will indicated with border surrounding

Solution1:

pass an transparent image in src link <img class="i-home" src="transparent image link">

Solution2:

Replace the image tag with the span tag <span class="i-home"></span>



Related Topics



Leave a reply



Submit