CODEWITHSUNDEEP
htmlcssfocusbootstrap-5bootstrap-cards
lukramon
lukramon

Reputation: 53

How to remove an outline from a selected Card Bootstrap 5

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.:

enter image description here

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

Upvotes: 1

Views: 6904

Answers (3)

LucasSaladini
LucasSaladini

Reputation: 101

Try using this code:

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

Upvotes: 0

taorkon
taorkon

Reputation: 11

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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 1

Anthony Beaumecker
Anthony Beaumecker

Reputation: 352

Check .card class has a border

To remove it simply override it to border: none;

Upvotes: 1

Related Questions