CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
9944990
9944990

Reputation: 444

Why does my Bootstrap stretched link extend out several levels?

I am trying to stretched link for my nested div but it is including even parent. I need only listItem to be clickable but this makes entire card div clickable.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <div class="col-xl-12 col-md-12 mb-3 mt-2">
        <div class="card custom-bg-2 h-100">
          <div class="card-header bg-secondary">
            <h3 class="fw-bold text-white text-center">Page Title</h3>
          </div>

          <div class="card-body">
            <div class="listItem">
              <img src="https://via.placeholder.com/100" class="rounded" alt="Title">
              <p><span class="badge bg-secondary text-light" style="font-size: large;">Title</span></p>
              <p><span class="badge bg-secondary ms-2">Views</span></p>
              <a href="#" class="stretched-link"></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xs-4">
      <div class="row">
        <div class="col-xl-12 col-md-8 mb-3 mt-2">
          <div class="card custom-bg-2 h-100">
            <div class="card-header bg-secondary">
              <h3 class="fw-bold text-white">Category</h3>
            </div>
            <div class="card-body">
              ....
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Views: 1675

Answers (1)

isherwood
isherwood

Reputation: 61083

Per the Bootstrap docs (and the fundamental rules of absolute positioning), stretched links apply to the nearest element with non-static positioning. You can put the position-relative class on the parent to make that so.

I've also replaced your inline font size styles with the lead class on the parent paragraph. Just don't use inline styles, especially when your style library provides typography classes for that.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <div class="col-xl-12 col-md-12 mb-3 mt-2">
        <div class="card custom-bg-2 h-100">
          <div class="card-header bg-secondary">
            <h3 class="fw-bold text-white text-center">Page Title</h3>
          </div>

          <div class="card-body">
            <div class="listItem position-relative">
              <img src="https://via.placeholder.com/100" class="rounded" alt="Title">
              <p class="lead"><span class="badge bg-secondary text-light">Title</span></p>
              <p><span class="badge bg-secondary ms-2">Views</span></p>
              <a href="#" class="stretched-link"></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xs-4">
      <div class="row">
        <div class="col-xl-12 col-md-8 mb-3 mt-2">
          <div class="card custom-bg-2 h-100">
            <div class="card-header bg-secondary">
              <h3 class="fw-bold text-white">Category</h3>
            </div>
            <div class="card-body">
              ....
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 3

Related Questions