How to make different column sizes in the same row?-CodePudding

Hi I am creating a webapp using bootstrap and I'm having an issue with the grid system. When I add elements to a column all the columns stretch together...I just want a single column to increase in height, not all the columns in the same row. See below:

As you can see when "Line1", "Line2", and "Line3" are added the containers in the same row also stretch. I only want the container that's titled "Something" to increase in vertical height.

Here is my code:

       <SideNav>
      
      </SideNav>
  
      <div className='container-md mt-5'>
        <div className='row text-center'>
          <h4 className='mb-5'>"The body achives what the mind believes" - Alek Barns </h4>
          <div className='col-md-3 shadow p-3 mb-5 bg-white rounded display-6'>Metric</div>
          <div className='col-md-1'></div>
          <div className='col-md-3 shadow p-3 mb-5 bg-white rounded display-6'>Goal</div>
          <div className='col-md-1'></div>
          <div className='col-md-4 shadow p-3 mb-5 bg-white rounded display-6'>Something
           <h4>Line 1</h4>
           <h4>Line 2</h4>
           <h4>Line 3</h4>
          </div>
        </div>
        <div className='row text-center'>
          <div class='col-md-8 shadow p-3 mb-5 bg-white rounded display-6'>
            <h2>Today's Workout: HIT Training</h2>
            <img src="https://media.flowin.com/blog/blog_654350014.jpg" ></img>
          </div>
          <div class='col-md-2'></div>
          <div class='col-md-2 shadow p-3 mb-5 bg-white rounded display-6'>
            <h2>Friend Zone </h2>
            <h5>Most Workouts</h5>
            <h6>1. Kaasim - 12 Completed</h6>
            <h6>2. Bryan - 10 Completed</h6>
            <h6>3. Mo - 9 Completed</h6>
            <h6>4. Jung - 8 Completed</h6>
            <h6>5. Chris - 7 Completed</h6>
            <h6>6. Anna - 7 Completed</h6>
          </div>
        </div>
      </div>
      </body>

CodePudding user response：

You can align column you want to top line (without of stretching) by adding col-baseline class to this column. Take a look on this Codepen.io example

/* use this class to align column */
.col-baseline {
  display: flex;
  align-self: baseline;
}

/* only for example purposes */
.bd-example {
    position: relative;
    padding: 1rem;
    margin: 1rem -15px 0;
    border: solid #f8f9fa;
    border-width: 0.2rem 0 0;
}
.bd-example-row .row>[class^="col-"] {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background-color: rgba(86,61,124,0.15);
    border: 1px solid rgba(86,61,124,0.2);
}
/* end of: only for example purposes */

.col-baseline {
  display: flex;
  align-self: baseline;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div >
  <div >
    <div >
      <div >.col-9</div>
      <div >.col-4<br>Since 9   4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
      <div >.col-6<br>Subsequent columns continue along the new line.</div>
    </div>
  </div>
</div>

CodePudding user response：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<div class='container-md mt-5'>
   <div class='row text-center'>
      <div class='col-md-4 d-flex'>
         <h4>Line 1</h4>
         <h4>Line 2</h4>
         <h4>Line 3</h4>
      </div>
   </div>
</div>

Just add a class 'd-flex'