Using Bootstrap Cards as a Hyperlink

Using bootstrap cards as a hyperlink

Its because <a> tags has a default blue color from user agent browser. Try to add a class to the link and set color:inherit to that class

a.custom-card,a.custom-card:hover {  color: inherit;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="card" style="width: 15rem; display: inline-block">  <img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">  <div class="card-body">    <h5 class="card-title">Normal card</h5>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div>
<a href="" class="custom-card">  <div class="card" style="width: 15rem; display: inline-block">    <img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">    <div class="card-body">      <h5 class="card-title">Wrapped with a tag</h5>      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>    </div>  </div></a>

Make Bootstrap Card Entirely Clickable

Your codepen: https://codepen.io/brooksrelyt/pen/VgjzGr

HTML:

<div class="container">
  <div class="card-deck flex-row flex-nowrap">
<a href="http://google.com">
    <div class="card">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Alberobello_BW_2016-10-16_13-43-03.jpg/250px-Alberobello_BW_2016-10-16_13-43-03.jpg" alt="Card image cap">

        <!-- THIS DIV IS NOT CLICKABLE BUT I WANT IT TO BE -->
        <div class="card-body">
<h3 class="card-sub align-middle">Card Title</h3>
          <p class="time-card">2 Days Ago</p>
        </div><!-- END CARD-BODY -->
      </a>
    </div><!-- END CARD -->
  </a>

    </div><!-- END CARD DECK -->
</div><!-- END CONTAINER -->

How to make clickable cards using Bootstrap 4

Bootstrap has a functionality for that:

Bootstrap stretched link

Another option is use the card class in a link tag with text-decoration-none. Then, the entire card is a link:

Example in JSFiddle

make a bootstrap card clickable without affecting other links on card

A pseudo-element on the first link would work provided it covers the whole card which can be achieved by positioning it absolutely.

.card {  position: relative;}
a.stretched-link:before {  content: "";  position: absolute;  top: 0;  left: 0;  height: 100%;  width: 100%;}
.second {  /* required */  position: relative;  z-index: 1;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /><div class="card">  <div class="card-body">    <h1>Some heading</h1>
    <a href="/link1" class="stretched-link">Link 1</a>    <a href="/link2" class="second">Link 2</a>  </div></div>

Make Bootstrap cards clickable

document.getElementById("click").onclick = () => {
  console.log('clicked')
  document.getElementById("click").textContent = "click me (clicked)"
  // if you want to redirect ( remove the "//" in the next line ):
  // window.location.href = "http://example.com"
}

<span id="click">click me</span>

How do I replace card links color in Bootstrap 4?

This is a textbook case for a custom class. You'd put it on the card you want to customize and write CSS accordingly. Or, use Bootstrap's text color utilities to directly style your links with theme colors, which adds hover color shift automatically. I'll demonstrate both approaches here.

.card.orangy a {
  color: orange;
}

.card.orangy a:hover,
.card.orangy a:active {
  color: darkorange;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="container-fluid">
  <div class="row mt-2">
    <div class="col-4">
      <div class="card py-2 card-container">
        <a href="#">
          <div class="card-body">
            <i class="fa-light fa fa-book-open mb-4" style="font-size: 36px"></i><br/>
            <p class="card-text text-center">Common card with no link styles</p>
          </div>
        </a>
      </div>
    </div>

    <div class="col-4">
      <div class="card orangy py-2 card-container"> <!--------------- HERE -->
        <a href="#">
          <div class="card-body">
            <i class="fa-light fa fa-book-open mb-4" style="font-size: 36px"></i><br/>
            <p class="card-text text-center">Card with custom class</p>
          </div>
        </a>
      </div>
    </div>

    <div class="col-4">
      <div class="card py-2 card-container">
        <a href="#" class="text-danger"> <!-------------------------- HERE -->
          <div class="card-body">
            <i class="fa-light fa fa-book-open mb-4" style="font-size: 36px"></i><br/>
            <p class="card-text text-center">Card with a text color class</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

Bootstrap 4: Create a direct link to an ID inside a collapsed accordion's card which then opens the card and jumps to the ID

For this task we need a small script on jQuery. Your link should have class .accordionLink and # in href and looking like this <a href="#ourElement" class="accordionLink">...</a>. The text on the right of # is the ID of our
desired element.

I put <div id="ourElement"><b>Our element</b></div> inside according #3. Try to click the link Link on the block 3 inside ID. I but one ling on the beginning and another one inside Block #1. Both works. You can use as match links with class .accordionLink as you want and anywhere you want.

There are comments in script, so you will understand.

// better to use some class like '.accordionLink' and check a link for it so other links with '#' will work as they should, without a conflict$('a[href*="#"].accordionLink').click(function (e) {    e.preventDefault();  let desiredId = $.attr(this, 'href').split('#')[1]; //getting data from the left and right from #, and calling the right one by '[1]'    // checking if element with this ID exists  if ($('#'+desiredId).length ) {    // showing the closes parent '.collapse' of our ID    $('#'+desiredId).closest('.collapse').collapse('show');     setTimeout(function () {      // smooth animation to our ID      $('html, body').animate({        scrollTop: $('#'+desiredId).offset().top      }, 500);    }, 300); // this interval is necessary for bootstrap to complete the accordion animation  }  });

/* not necessary */body {  padding: 10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<a href="#ourElement" class="accordionLink">Link on the block 3 inside ID</a>
<div class="accordion" id="accordionExample">  <div class="card">    <div class="card-header" id="headingOne">      <h2 class="mb-0">        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">          Collapsible Group Item #1        </button>      </h2>    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">      <div class="card-body">        <a href="#ourElement" class="accordionLink">Link on the block 3 inside ID</a><br>         Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.              </div>    </div>  </div>  <div class="card">    <div class="card-header" id="headingTwo">      <h2 class="mb-0">        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">          Collapsible Group Item #2        </button>      </h2>    </div>    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">      <div class="card-body">        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.      </div>    </div>  </div>  <div class="card">    <div class="card-header" id="headingThree">      <h2 class="mb-0">        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">          Collapsible Group Item #3        </button>      </h2>    </div>    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">      <div class="card-body">        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.        <div id="ourElement"><b>Our element</b></div>        rd dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.      </div>    </div>  </div></div><br><br><br><br><br><br><br><br><br><br><br>

Using Bootstrap Cards as a Hyperlink