Bootstrap - Add a frame after clicking a card

Question

im new to the whole Angular/Web Development world. I am currently trying to improve my HTML/CSS skills and ran into a problem I couldnt solve myself. I am using Bootstrap in my angular project and implemented the cards component. the card for my usecase](https://i.stack.imgur.com/yOj9R.png) I added hover effects with css and made the whole card clickable, now I want to implement a frame/border after the card get clicked (as shown in the image). Does anyone knows a way to do this ?

Best Regards tschanni

.....................................................................................................

Answer 1

your question doesn’t contain any example of your code but you could do something like adding an onclick or add an event listener to toggle a “clicked” class with the desired border: i.e.

<div class="card" onclick="this.classList.toggle('clicked')">card</div>

With CSS

.card {width: 50px; height: 100px;}
.clicked {border: 1px solid red;}

an example

Answer 2

You can do it in simple and code-readable way, for example add this CSS:

.card.selected {
  border: 2px solid blue;
}

And JavaScript click event:

const card = document.querySelector('.card');

card.addEventListener('click', function() {
  this.classList.toggle('selected');
});