Twitter Bootstrap Question posted in

change div height to 2 divs – Twitter bootstrap

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;
}
Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search