CODEWITHSUNDEEP
htmlcss
Arc_75
Arc_75

Reputation: 59

Cover div with a link

I have a row of div`s with some content inside:

.row{
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 4px;
    margin:0px 5% 20px 0;
    box-sizing: border-box;
}
.col-sm-4 {
        margin: 1%;
        background-color: rgba(0,0,0,0.25);
        flex: 30%;
        padding: 3px;
        max-width: 30%;
        height: 400px;
        min-width: 20%;
    }
<div class="row">
            <div class="col-sm-4">                
                <div id="Header"><h3>Header</h3></div>
                <p>content.</p>
                <div id="Footer"><h2>By Author</h2></div>
            </div>
            <div class="col-sm-4">                
                <div id="Header"><h3>Header</h3></div>
                <p>content.</p>
                <div id="Footer"><h2>By Author</h2></div>
            </div>
</div>

I`d like to add some unique links to cover each div in row. How can I do this?

Upvotes: 1

Views: 143

Answers (3)

Jeremy Thille
Jeremy Thille

Reputation: 26360

I believe you can't indeed encapsulate a .col-sm-4 inside a <a> tag without breaking Bootstrap's layout mechanism.

However, as a workaround, you can put the <a> right inside the div and encapsulate all of its content :

.row {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 4px;
  margin: 0px 5% 20px 0;
  box-sizing: border-box;
}

.col-sm-4 {
  margin: 1%;
  background-color: rgba(0, 0, 0, 0.25);
  flex: 30%;
  padding: 3px;
  max-width: 30%;
  height: 400px;
  min-width: 20%;
}

a {
   border : blue dashed 1px;
   display: block;
   height: 100%;
}
<div class="row">
  <div class="col-sm-4">
    <a href="#">
      <div id="Header">
        <h3>Header</h3>
      </div>
      <p>content.</p>
      <div id="Footer">
        <h2>By Author</h2>
      </div>
    </a>
  </div>
  <div class="col-sm-4">
    <div id="Header">
      <h3>Header</h3>
    </div>
    <p>content.</p>
    <div id="Footer">
      <h2>By Author</h2>
    </div>
  </div>
</div>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114990

Dont use a div at all...use a link instead with the same class. There's no rule that say you have to use a div.

Now the whole div IS a link.

.row{
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 4px;
    margin:0px 5% 20px 0;
    box-sizing: border-box;
}
.col-sm-4 {
        margin: 1%;
        background-color: rgba(0,0,0,0.25);
        flex: 30%;
        padding: 3px;
        max-width: 30%;
        height: 400px;
        min-width: 20%;
    }
<div class="row">
            <a href="#1" class="col-sm-4">                
                <div id="Header"><h3>Header</h3></div>
                <p>content.</p>
                <div id="Footer"><h2>By Author</h2></div>
            </a>
            <a href="#2" class="col-sm-4">                
                <div id="Header"><h3>Header</h3></div>
                <p>content.</p>
                <div id="Footer"><h2>By Author</h2></div>
            </a>
</div>

Alternatively, positon a link absolutely over the div..

.row {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 4px;
  margin: 0px 5% 20px 0;
  box-sizing: border-box;
}

.col-sm-4 {
  margin: 1%;
  background-color: rgba(0, 0, 0, 0.25);
  flex: 30%;
  padding: 3px;
  max-width: 30%;
  height: 400px;
  min-width: 20%;
  position: relative
}

.col-sm-4 a {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="row">
  <div class="col-sm-4">
    <a href="#1">Link here</a>
    <div id="Header">
      <h3>Header</h3>
    </div>
    <p>content.</p>
    <div id="Footer">
      <h2>By Author</h2>
    </div>
  </div>
  <div class="col-sm-4">
    <a href="#2">Link here</a>
    <div id="Header">
      <h3>Header</h3>
    </div>
    <p>content.</p>
    <div id="Footer">
      <h2>By Author</h2>
    </div>
  </div>
</div>

Upvotes: 2

Levente Otta
Levente Otta

Reputation: 795

.row {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 4px;
  margin: 0px 5% 20px 0;
  box-sizing: border-box;
}

.col-sm-4 {
  margin: 1%;
  background-color: rgba(0, 0, 0, 0.25);
  flex: 30%;
  padding: 3px;
  max-width: 30%;
  height: 400px;
  min-width: 20%;
}
<div class="row">
  <a href="#">
    <div class="col-sm-4">
      <div id="Header">
        <h3>Header</h3>
      </div>
      <p>content.</p>
      <div id="Footer">
        <h2>By Author</h2>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="col-sm-4">
      <div id="Header">
        <h3>Header</h3>
      </div>
      <p>content.</p>
      <div id="Footer">
        <h2>By Author</h2>
      </div>
    </div>
  </a>
</div>

Upvotes: -1

Related Questions