Leveraging Bootstrap cards to create clickable links

I am working with a bootstrap card that serves as a link.

When I attempt to enclose it with an <a>, the styling of the card gets completely altered.

<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="">
  <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>

Is there a way I can wrap the card while maintaining its appearance and still use it as a link?

cssbootstrap-4

Answer №1

When using Bootstrap 4.3, there is no need to wrap the card with an <a> tag. Instead, place it within the card-body and utilize the stretched-link class for a cleaner approach.

To learn more, check out https://getbootstrap.com/docs/4.3/utilities/stretched-link/.

If you are not able to use Bootstrap 4.3, here is the styling for the stretched-link class:

.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0,0,0,0);
}

See below for an example:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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>


<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">Alternative</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="stretched-link"></a>
  </div>
</div>

Answer №2

One reason is that <a> tags default to a blue color in user agent browsers. To override this, you can add a class to the link and set color:inherit for 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>

Answer №3

Rather than enclosing the .card within an <a> tag, consider using an <a> as the card element itself instead of a <div>.

By doing this, you can easily customize the CSS to eliminate the default styles applied to <a> elements:

a.card,
a.card:hover {
  color: #212529;
  text-decoration: none;
}
<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="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">Using an anchor 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>
</a>

Answer №4

Extremely easy to implement using the Stretched link feature

<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">Here is some sample text that can be used as content for the card.</p>
    <a href="#" class="btn btn-primary stretched-link">Click here</a>
  </div>
</div>

Answer №5

Discover how easy it is to create a stretched link using Bootstrap here

<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>

Answer №6

To achieve the same appearance, you can apply the utility class text-dark to your element.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<a href="">
  <div class="card text-dark" 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>

Answer №7

Experiment with adding the "Display: Block" property directly to the link. Utilize your browser's Developer Tools (F12) and hover over the link to determine if you should also include "Height:auto".

Answer №8

Encountered a similar issue but managed to resolve it using a simple trick. By specifying the color of your choice and adding '00' at the end of the color code, you can create a transparent style that appears invisible. For example:

<a href="" style="color: #83577500; ">

Answer №9

If you want to change the cursor to a pointer, simply include "cursor: pointer;" in your CSS style

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Placing a picture within a box that is 100% of the viewport height

After searching for a while, I still haven't found a solution to my problem. I am currently working on a Personal portfolio that has different sections with a height of 100vh each. However, I am facing difficulty in positioning the images within the s ...

htmlcss

What is the best way to implement Bootstrap4 collapse functionality within a Vue project?

I am currently using bootstrap 4.3.1 and [email protected] Within my navigation menu, I have implemented a collapsible feature without relying on JQuery: <li class="nav-item"> <a class="nav-link" href="#sidebar-products" data-toggle=" ...

vue.jsbootstrap-4

Tips for saving input data from an HTML page to a text file

How can I save the inputs from a simple form as a text file using HTML code? Here is an example of the HTML code: <div id="wrapper"> <div class="main-content"> <div class="header"> </div> ...

htmlcss

Parallax Materialize fails to initialize

Despite my efforts to initialize the code, I am still unable to display the images. I've only been coding for two days, so I'm clueless about what else could be causing this issue. Here is the current state of my code. Thank you in advance! < ...

jqueryhtmlcssmaterializeparallax

What is the best way to create a text shadow effect for a heading element?

Is it possible to create a centered heading like the one in this image using only CSS, without using flexbox? [EDIT] Below is an example using flexbox. However, there are some limitations with this code as it doesn't allow reusing the same class for ...

htmlcss

Expand the size of the image displayed on the modal screen

Having trouble with a modal screen on Bootstrap that is not displaying the full image size. Even after adjusting the modal sizes in the CSS, I'm still unable to get it right. <div class="modal fade bd-example-modal-lg show" id="ftl1Modal" role="d ...

bootstrap-4bootstrap-modal

Tips on formatting text as bold or italic when tweeting from my website to our Twitter account

Currently, I am utilizing the Twitter OAuth library in conjunction with PHP to publish a tweet from my website directly to my Twitter account. My main objective is to highlight some text while posting, however, I have not been successful in identifying t ...

phphtmlcsstwitter

Tips for simultaneously hovering over SVG and text elementsFeel free to hover over both SVG

After importing an SVG image and creating a box containing both an icon and text, I noticed that when hovering over the box, only the color changes to yellow while the SVG remains unaffected. How can I resolve this issue so that both the text and icon chan ...

javascripthtmlcssreactjssvg

Review Limited Screen Size for a Smartphone Website

I have been working on optimizing a mobile website and I utilized CSS to adjust the layout design for screen widths between 150px and 480px. However, during testing on an actual phone, the desktop layout is appearing instead of the custom layout set with C ...

javascriptphpcsshtml

Troubleshooting the lack of functionality with justify-items in CSS Grid

I'm facing an issue with my CSS Grid. I am attempting to set the justify-items property to start. Despite referencing the specification and watching a tutorial where it works, the property (and related ones) are not functioning as expected. In my tex ...

htmlcsscss-grid

Concealing the primary div within a Vue child component

Is there a way to conceal the primary div within a Vue application created using Vue-CLI? I attempted adding the display property, but it did not solve the problem. I am attempting to hide it within my Channels component. Here is how my main component lo ...

javascripthtmlcssvue.js

JQuery magic: A shrinking header that changes size as you scroll

There have been countless inquiries regarding how to animate a header to shrink as the page is scrolled down. While I have some understanding of the responses to similar questions, I find my case to be rather complex. The header on my page takes up too muc ...

jqueryhtmlcssheadershrink

display of an image with a pop-up feature in Bootstrap 4 beta

I've implemented modals on this page. The website has been updated to BS4 beta. Visit this page and when you click on an image, a pop up or modal should appear with the image. <div class="row mb-2"> <div class="col-lg-2 col-sm-3 co ...

popupbootstrap-modalbootstrap-4

Tips for making a div with a single triangular side using Reactjs

Hey there, I'm looking to design a header similar to the one shown in this image. Can someone provide guidance on how I can achieve this UI using React.js? https://i.sstatic.net/zmW5x.jpg ...

htmlcssreactjs

Alteration of icon size in input field using jQuery unintentionally

My issue involves an input field where users can input text from an array of emojis. When a user selects an emoji, it should display as an icon styled by an external stylesheet. However, there are two problems: The name of the icon appears on top of the ...

jqueryhtmlcss

Omit the tag from the submission section

Currently, I am utilizing a <p> tag as a submit button/area by setting a specific id in jquery. <p id="xyz"></p> My requirement is to insert an input field inside this <p> tag to include a particular value that will be submitted u ...

jqueryhtmlcsstagssubmit

What are some ways to utilize .styl stylesheets instead of traditional .css files?

I really hope this isn't a silly question, but I've been searching Google and forums for 30 minutes and can't find anything. I downloaded this npm package (ag-grid) and all their documentation talks about .css files, but the package only ha ...

cssnpmsassag-grid

Issues with button hover causing background transition difficulties

I've been trying to achieve a smooth background image transition upon hovering over my buttons. Despite searching for solutions in various posts, I haven't been successful in applying any of them to my code. I realize that J Query is the way to ...

javascriptjqueryhtmlcss

Tips for displaying form data in a boostrap modal

One issue I am facing involves a form that collects a user's first and last name, along with a button that activates a bootstrap modal. When the button is clicked, the goal is to display the inputted data from the form within the modal window. The use ...

phphtmlbootstrap-4

The mixin 'media-breakpoint-only' is not defined

Recently, I decided to delve into coding with Bootstrap4 and Sass. I made sure all the necessary configurations were in place for my environment/project setup: including ruby 2.3.1p112 (2016-04-26 revision 54768) [i386-mingw32] and a list of installe ...

rubytwitter-bootstrapcsscompass-sassbootstrap-4