Why does my Bootstrap stretched link extend out several levels?-CodePudding

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 >
  <div >
    <div >
      <div >
        <div >
          <div >
            <h3 >Page Title</h3>
          </div>

          <div >
            <div >
              <img src="https://via.placeholder.com/100"  alt="Title">
              <p><span  style="font-size: large;">Title</span></p>
              <p><span >Views</span></p>
              <a href="#" ></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div >
      <div >
        <div >
          <div >
            <div >
              <h3 >Category</h3>
            </div>
            <div >
              ....
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >
      <div >
        <div >
          <div >
            <h3 >Page Title</h3>
          </div>

          <div >
            <div >
              <img src="https://via.placeholder.com/100"  alt="Title">
              <p ><span >Title</span></p>
              <p><span >Views</span></p>
              <a href="#" ></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div >
      <div >
        <div >
          <div >
            <div >
              <h3 >Category</h3>
            </div>
            <div >
              ....
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>