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
How to Create a Flexible Vertical Line in Between Two Divs
How to Add Fonts to Create-React-App Based Projects
Is There a "Previous Sibling" Selector
Difference Between Display: Inline and Display: Inline-Block
Opacity of Background-Color, But Not the Text
Css Scrollbar Style Cross Browser
Bootstrap 4 Navbar With 2 Rows
How to Apply Opacity to a CSS Color Variable
Pure CSS Checkbox Image Replacement
Vuejs Vue-Router Linking an External Website
In CSS Flexbox, Why Are There No "Justify-Items" and "Justify-Self" Properties
Fixed Position But Relative to Container
How to Override Inline Styles With External Css
How to Set Background Image and Opacity in the Same Property
Detect If an Input Has Text in It Using CSS - on a Page I Am Visiting and Do Not Control
Why Don't :Before and :After Pseudo Elements Work With 'Img' Elements