CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
Opeyemi Odedeyi
Opeyemi Odedeyi

Reputation: 780

making bootstrap link work properly

I made a bootstrap card, and after creating it. I need the card to link to another page and also to not affect the bookmark button inside the card. I wanted the whole card to be a link to another page, on applying the "a" tag, it ruined the overall styling of the card. and on trying I tried another method but didn't work effectively as it also affected the bookmark button in the card. Please, I am trying to make this work without jquery as it doesn't work well with react, but pure javascript is alright.

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

<div class="container-fluid card__layout">

      <div class="card mb-4 project__card">
        <img class="card-img-top" src="img/one.jpg" alt="">
        <div class="card-block">
          <h6 class="card-title text-center text-truncate card__header card__header__green">Front-End Programmer</h6>
          <p class="card-text text-center card__content__ellipsis">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
          <div class="card__project__bookmark__styling">
            <a href="#" class="card__gig__bookmark__styling"><i class="fa fa-bookmark-o pr-2"></i>Bookmark</a>
          </div>
          <!--- if bookmarked - - - - - - - - - - - - - - - - - - - - - - - - - - - -
          <div class="card__project__bookmark__styling card__bookmarked">
            <a href="#" class="card__project__bookmark__styling"><i class="fa fa-bookmark-o pr-2"></i>Bookmarked</a>
          </div>
          --------------------------------------------------------------------------->
        </div>
        <div class="card-block card__border__top d-flex justify-content-between">
          <p class="card-text card__location text-truncate"><i class="fa fa-map-marker pr-2"></i><small class="text-muted">Washington DC, United States of America</small></p>
          <small class="text-muted time__shorten">24hr</small>
        </div>
      </div>
<div>

Upvotes: 0

Views: 115

Answers (1)

Steven Kaspar
Steven Kaspar

Reputation: 1187

You can't have a link within a link so the HTML is not parsing correctly

https://jsfiddle.net/stevenkaspar/goywan6z/

    <div class="container-fluid card__layout">

  <a class="card mb-4 project__card">
    <img class="card-img-top" src="img/one.jpg" alt="">
    <div class="card-block">
      <h6 class="card-title text-center text-truncate card__header card__header__green">Front-End Programmer</h6>
      <p class="card-text text-center card__content__ellipsis">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <div class="card__project__bookmark__styling">
        <i class="fa fa-bookmark-o pr-2"></i>Bookmark
      </div>
      <!--- if bookmarked - - - - - - - - - - - - - - - - - - - - - - - - - - - -
          <div class="card__project__bookmark__styling card__bookmarked">
            <a href="#" class="card__project__bookmark__styling"><i class="fa fa-bookmark-o pr-2"></i>Bookmarked</a>
          </div>
          --------------------------------------------------------------------------->
    </div>
    <div class="card-block card__border__top d-flex justify-content-between">
      <p class="card-text card__location text-truncate"><i class="fa fa-map-marker pr-2"></i><small class="text-muted">Washington DC, United States of America</small></p>
      <small class="text-muted time__shorten">24hr</small>
    </div>
  </a>
</div>

Edit 1: Also looks like you closing <div> is missing / - should be </div>

Edit 2: Bootstrap 4-beta is available so you can start using that

Upvotes: 1

Related Questions