CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Remigiusz
Remigiusz

Reputation: 31

change div height to 2 divs

I'm using twitter bootstrap and I can't find anywhere answer for this question. I'm trying to change height of div to fit height of two divs next to it. I don't know if this is good explanation, so I'll try show my problem using pictures. How to make from this: enter image description here


to something like this: enter image description here

HTML:

<div class ="col-md-4 main-card-wrapper">
 <div class="main-card">1</div>
</div>
<div class ="col-md-4 main-card-wrapper">
 <div class="main-card">2</div>
</div>
<div class ="col-md-4 main-card-wrapper">
 <div class="main-card">3</div>
</div>
<div class ="col-md-12 main-wrapper">
 <div class ="col-md-4 main-card-wrapper">
  <div class="main-card">4</div>
 </div>
<div class ="col-md-8 main-wrapper">
 <div class ="col-md-6 main-card-wrapper">
  <div class="main-card">5</div>
 </div>
 <div class ="col-md-6 main-card-wrapper">
  <div class="main-card">6</div>
 </div>
 <div class ="col-md-12 main-card-wrapper">
  <div class="main-card">7</div>
 </div>
</div>
</div>

CSS:

.main-card-wrapper {
    padding-left: 0.1em !important;
    padding-right: 0.1em !important;
}
.main-wrapper {
    padding-left: 0em !important;
    padding-right: 0em !important;
}
.main-card {
    display: inline-block;
    padding: 2em;
    width: 100%;
    margin: 0.1em;
    color: #ddffdd;
    background-color: #879eff;
    text-align: center;
}
.main-card:hover {
    color: #f4f4f4;
    background-color: #6185ff;
}

Upvotes: 3

Views: 78

Answers (2)

wscourge
wscourge

Reputation: 11281

If you nest one grid inside the other, number 4 will be able to gain the full height of its own column as you add content to it. It's going to work if you just add some fixed height to them as well.

.1, .2 , .3, .5, .6, .7 {
  height: 100px;
}
.4 { 
  height: 200px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-md-4 1">1</div> 
    <div class="col-md-4 2">2</div>
    <div class="col-md-4 3">3</div>
  </div>
  <div class="row">
    <div class="col-md-4 4">4</div>
    <div class="col-md-8 row">
      <div class="col-md-6 5">5</div>    
      <div class="col-md-6 6">6</div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 7">7</div>
  </div>
 </div>

Upvotes: 1

weinde
weinde

Reputation: 1146

try giving the div you want to resize a unique class or an id and then in CSS give it height 100% or auto.

Upvotes: 0

Related Questions