Link we dɛn dɔn strɛch

Mek ɛni HTML ɛlimɛnt ɔ Bootstrap kɔmpɔnɛnt we yu kin klik bay we yu “stretch” wan nest link tru CSS.

Ad .stretched-linkto wan link fɔ mek in kɔntinɛnt blɔk ebul fɔ klik tru wan ::afterpseudo ɛlimɛnt. Bɔku tɛm, dis min se wan ɛlimɛnt wit position: relative;we gɛt link wit di .stretched-linkklas kin klik. Duya notis giv aw CSS positionde wok , .stretched-linknɔ kin miks wit bɔku tebul ɛlimɛnt dɛn.

Kad dɛn gɛt position: relativebay difɔlt na Bootstrap, so insay dis kes yu kin ad di .stretched-linkklas sef wan to wan link na di kad we nɔ gɛt ɛni ɔda chenj na HTML.

Bɔku link ɛn tap target dɛn nɔ kin advays wit strɛch link dɛn. Bɔt sɔm positionɛn z-indexstayl dɛn kin ɛp if dɛn nid fɔ du dis.

Kad wit stret link

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Go sɔmsay

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</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>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

Mɔs kɔstɔm kɔmpɔnɛnt dɛn nɔ gɛt position: relativebay difɔlt, so wi nid fɔ ad di .position-relativeya fɔ mek di link nɔ strɛch ausayd di mama ɛn papa ɛlimɛnt.

Kastom komponent wit stret link

Dis na sɔm pleshɔlda kɔntinyu fɔ di kɔstɔm kɔmpɔnɛnt. I de fɔ falamakata aw sɔm rial-wɔl kɔntinyu go tan lɛk, ɛn wi de yuz am ya fɔ gi di kɔmpɔnɛnt smɔl bɔdi ɛn saiz.

Go sɔmsay

html

<div class="d-flex position-relative">
  <img src="..." class="flex-shrink-0 me-3" alt="...">
  <div>
    <h5 class="mt-0">Custom component with stretched link</h5>
    <p>This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

Kɔlɔm dɛn we gɛt strɛch link

Wan ɔda instans fɔ pleshɔlda kɔntinyu fɔ dis ɔda kɔstɔm kɔmpɔnɛnt. I de fɔ falamakata aw sɔm rial-wɔl kɔntinyu go tan lɛk, ɛn wi de yuz am ya fɔ gi di kɔmpɔnɛnt smɔl bɔdi ɛn saiz.

Go sɔmsay

html

<div class="row g-0 bg-light position-relative">
  <div class="col-md-6 mb-md-0 p-md-4">
    <img src="..." class="w-100" alt="...">
  </div>
  <div class="col-md-6 p-4 ps-md-0">
    <h5 class="mt-0">Columns with stretched link</h5>
    <p>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

Fɔ no di blɔk we de insay

If i tan lɛk se di link we dɛn strɛch nɔ de wok, i go mɔs bi se di blɔk we de insay go bi di rizin. Di CSS prɔpati dɛn we de dɔŋ ya go mek wan ɛlimɛnt bi di blɔk we de insay:

Wan positionvalyu we nɔtostatic
A transformɔ perspectivevalyu ɔda wan pasnone
Wan will-changevalyu fɔ transformɔperspective
Wan filtervalyu we nɔto noneɔ wan will-changevalyu fɔ filter(na Fayafaks nɔmɔ de wok)

Kad wit link dɛn we dɛn strɛch

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Stretched link nɔ go wok ya, bikɔs position: relativedɛn ad am to di link

Dis strɛch link go jɔs spred oba di p-tag, bikɔs dɛn dɔn aplay wan transfɔm to am.

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched links</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>
    <p class="card-text">
      <a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
    </p>
    <p class="card-text bg-light" style="transform: rotate(0);">
      This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
    </p>
  </div>
</div>