Signup/Sign In

Bootstrap Stretched Link

To make any HTML element or bootstrap component clickable use Stretched Link. A stretched link generally has a page associated with it that contains extra information about the element. A stretched link makes the component clickable via a ::after pseudo-element which means the element with position: relative can be made clickable by using stretched link. Let's understand by some examples.

Example: Using stretched Links on card

  • The card component has position:relative by default so we can easily add stretched links to the card.
  • To add stretched links to the element use the .stretched-link class within the element.

Here in the example, we have added a stretched link with the .btn class.

<!DOCTYPE html>
<html lang="en">
<head>
	<title> Bootstrap </title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>  
</head>
<body>
	<div class="container mt-3">
		<div class="card" style="width: 18rem;">
			<img src="icon.png" class="card-img-top" alt="icon">
			<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>
	</div>
</body>
</html>

Output

Here is the output of the above program.

Stretched link

Columns

We can add stretched links to the grid columns too. The columns and many other components do not have position: relative; by default so we need to add this to the component.

Example: Using the stretched link with columns

Here in the example, we have tried to show stretched links within the columns. Here we have added the .stretched-link class to the link element.

<!DOCTYPE html>
<html lang="en">
<head>
	<title> Bootstrap </title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>  
</head>
<body>
	<div class="row g-0 bg-light position-relative">
		<div class="col-6 mb-md-0 p-md-4">
			<img src="icon.png"  alt="icon" style=" max-height:150px; max-width: 150px">
		</div>
		<div class="col-6 p-4 ps-md-0">
			<h5 class="mt-0">Columns with stretched link</h5>
			<p>Another example to showcase stretched link. It is intended to mimic what some real-world content would look like.</p>
			<a href="https://www.studytonight.com/" class="stretched-link">Click Here</a>
		</div>
	</div>
</body>
</html>

Output

Here is the output of the above program.

Stretched links with columns

Identifying the containing block

If the stretched link is not working, it may be because of the containing block. Here is a list of CSS properties that make an element the "containing block".

  • A Position value other than static.
  • A transform or perspective value other than none.
  • A will-change value of transform or perspective.

Example: A non-workable stretched link

Here in the example, we have created cards with the stretched link. But the first stretched link will not work as we have added position:relative to the <a> tag which makes it a containing block. The other link will act as stretched link.

<!DOCTYPE html>
<html lang="en">
<head>
	<title> Bootstrap </title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>  
</head>
<body>
	<div class="card" style="width: 18rem;">
		<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" >
				<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>
</body>
</html>

Output:

Here is the output of the above program.

containing block stretched link

Conclusion

A stretched link helps the user with some additional links nested over it. Bootstrap 5 made it easy to use stretched links using its stretched link class. We can easily add stretched links to cards and columns as we did in this tutorial.



About the author: