How to remove an outline from a selected Card Bootstrap 5

Question

I have to make a website using the Bootstrap 5 framework, so I've been messing around with "Bootstrap Cards". When I click on a card a border appears. Thought I might fix it overwriting it using the pseudo element :focus

.card:focus {outline: 0 !important;

E.g.:

I guess it's something else then an outline, but don't have the needed knowledge of HTML

Many Bootstrap elements are using box-shadow for `:focus` states. Try `box-shadow: none`. Have you wrapped it in an `` tag or why is it *focusable*? Because if I try to focus on a card, it is not possible. — Andris Jefimovs, Feb 17 '21 at 09:52
Tried that as well, really don't know why it's focusable, didn't wrap it in an `a` tag. — lukramon, Feb 17 '21 at 09:57

score 1 · Answer 1 · answered Feb 17 '21 at 09:37

1

Check .card class has a border

To remove it simply override it to border: none;

answered Feb 17 '21 at 09:37

Anthony Beaumecker

433
2
9

that's not what I mean, the border only appears when the Card is selected. Already removed the border tho. – lukramon Feb 17 '21 at 09:43
try to select the pseudo element as well `:active` – Anthony Beaumecker Feb 17 '21 at 09:47
Tried it, but it isn't working. `:active` is mostly used on `a` tags or `button` – lukramon Feb 17 '21 at 09:55

score 0 · Answer 2 · edited Aug 20 '23 at 22:32

0

Try using this code:

.card:focus {
   border: none !important;
}

edited Aug 20 '23 at 22:32

desertnaut

57,590
26
140
166

answered Feb 17 '21 at 11:24

LucasSaladini

91
1
12

Also tried it. I found out the problem isn't situated at the Cards, but at the Scrollspy. Take a look here: gip.lukramon.com – lukramon Feb 17 '21 at 12:35
Yup, probably that. I took a look at the code and nothing on card class on the console. Did you fixed the problem? – LucasSaladini Feb 17 '21 at 12:46

score 0 · Answer 3 · answered Mar 20 '23 at 16:28

Bootstrap 5 has a separate class border-0 for this.

Try running the code below with and without the border-0 class to see how it works.

More about borders in Bootstrap here. Hope this helps:)

<!--link to bootstrap 5 script and styles-->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<!-- bootstrap 5 card with no borders without modifying your .css-->
<!--attention to the border-0 class below-->

<div class="card border-0"> 
  <div class="card-body">
    <h1 class="display-1">Card With No Borders!</h1>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum dui arcu, eu aliquet odio elementum non. Curabitur vel mi ligula. In vel dolor diam. Curabitur ornare, magna eget ultrices luctus, magna lectus tempus dui, non facilisis elit dolor eu risus. </p>
    <a href="#" class="btn btn-primary">A Button</a>               
  </div>
</div>

How to remove an outline from a selected Card Bootstrap 5

3 Answers3