Twitter Bootstrap Question posted in

Place the three columns with the same height-Twitter bootstrap

Using the bootstrap I created three columns. Within each column I have several rows.

My problem is that the columns are not the same height, the left column is bigger than the rest, they were supposed to all be the same height.

In the cards I did not define any height, that is, if any of the columns increased the height, the rest would follow this growth automatically in order to have all the same height.

Is there a way to place all the columns at the same height without using measurements in pixels (px)?

Thanks

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<div class="col-3">
  <div class="row">
    <div class="col" style="padding-right:0">
      <div class="card cardm">
        <div class="card-body" style="overflow-y: auto;">
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col" style="padding-right:0">
      <div class="card cardm">
        <div class="card-body">
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col">
  <div class="row">
    <div class="col">
      <div class="card cardm">
        <div class="card-body">

        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="card cardm">
        <div class="card-body">

        </div>
      </div>
    </div>
  </div>
Tags:

2

Answers


  1. 0

    Done with js, just copied from the duplicate linked post. Shows weird on a small screen though.

    // Get cards
var cards = $('.card');
var maxHeight = 0;

// Loop all cards and check height, if bigger than max then save it
for (var i = 0; i < cards.length; i++) {
  if (maxHeight < $(cards[i]).outerHeight()) {
    maxHeight = $(cards[i]).outerHeight();
  }
}
// Set ALL card bodies to this height
for (var i = 0; i < cards.length; i++) {
  $(cards[i]).height(maxHeight);
}
    .mycontainer {
    width: 96%;
    margin-top: 148px;
    margin-right: auto;
    margin-left: auto;
}

.card{
    width:100%;
    margin-top:15px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 20px #BCBCCB47;
    border-radius: 8px;
    border: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width: 100%;height: 100%; overflow-y: auto; overflow-x: hidden;">
    <div class="row mycontainer">
      <div class="col">
        <div class="row">
          <div class="card">
            <div class="card-body" style="padding: 8px;">
            
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="row">
              <div class="card">
                <div class="card-body">
                
                </div>
              </div>
            </div>
            <div class="row">
              <div class="card">
                <div class="card-body">
               
            
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="row h-100">
              <div class="card" style="margin-left:15px">
                <div class="card-body">
               
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="row h-100">
              <div class="card" style="margin-left:15px">
                <div class="card-body">
           
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="row">
          <div class="col">
            <div class="row h-100">
              <div class="card">
                <div class="card-body">
         
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="row h-100">
              <div class="card" style="margin-left:15px">
                <div class="card-body">
           
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="row">
              <div class="col" style="padding-right:0">
                <div class="card cardm">
                  <div class="card-body">
                 
                  </div>
                </div>
              </div>
              <div class="col" style="padding-right:0">
                <div class="card cardm">
                  <div class="card-body">
                
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col" style="padding-right:0">
                <div class="card cardm">
                  <div class="card-body">
                 
                  </div>
                </div>
              </div>
              <div class="col" style="padding-right:0">
                <div class="card cardm">
                  <div class="card-body">
                 
                  </div>
                </div>
              </div>
            </div>
          </div>


        </div>
        <div class="row">
          <div class="col">
            <div class="row h-100">
              <div class="card">
                <div class="card-body" style="padding: 16px;">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-3">
        <div class="row">
          <div class="col" style="padding-right:0">
            <div class="card cardm">
              <div class="card-body" style="overflow-y: auto;">
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col" style="padding-right:0">
            <div class="card cardm">
              <div class="card-body">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="row">
          <div class="col">
            <div class="card cardm">
              <div class="card-body">
             
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="card cardm">
              <div class="card-body">
           
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    If you are using Bootstrap4 then you can easily achieve by BS4 predefined classes like h-100 and also your html structure is not correct way so follow as per bootstrap instructions.

    Predefined classes for width & height follow: https://getbootstrap.com/docs/4.3/utilities/sizing/#relative-to-the-parent

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container my-2">
  <div class="row">
    <div class="col-3">
      <div class="card cardm h-100">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card cardm h-100">
        <div class="card-body">
          Ut enim ad minim veniam, quis nostrud exercitation ullamco.
        </div>
      </div>
    </div>
  	<div class="col-3">
      <div class="card cardm h-100">
        <div class="card-body">
          Laboris nisi ut aliquip ex ea
        </div>
      </div>
    </div>
  	<div class="col-3">
      <div class="card cardm h-100">
        <div class="card-body">
          Voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        </div>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search