How to Make Columns the Same Height, Regardless of Content, and Vertically-Align Buttons Within Those Columns

Bootstrap 3: How do I force columns to be same height and align buttons to bottom

The easiest way to do that is to add overflow:auto;

CSS

h4{
  height:200px;
  overflow:auto;
}

CSS Flexbox - Align the contents on top and align the button to bottom

Check this, I hope I understood what you want to achieve https://codepen.io/IvanBisultanov/pen/PoQmXqX

I also added .btn-wrap classname, and wrapped all HTML above in div

.counsellor-list-item-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.btn-wrap {
  margin-top: auto;
}

Vertical alignment in column content in Bootstrap 3

I've never really seen a perfect answer to this, thats not with javascript, I can't remember the exact code, however, last time i did it, i placed the text in a nested section, each boxes text section had the same class, and i assigned a min-height to that class that was long enough that it fitted the longest piece of text in, then place the button underneath that section.

If you put your code in a JSFiddle i can help you more, however,

it should looks something like this, layout wise,

<div class="four columns">
    <img></img>

    <div class="text">  this will have a min height 
    </div>

    <input>button here</input>
</div>

I hope this helps, i know it doesn't seem very clear, if you have a live version or a JSfiddle i'm more than happy to help further.

as for the text, you're very limited, there is some very good jquery scripts, just look through http://www.unheap.com

and just have general play with text sizes

How to align buttons inside cards with different content

Not a silly question. They seem unaligned because there are more li's on the left side. Buttons are positioned statically by default, so if there is more content, it will be pushed down. You'll notice if you add more li's on the right side, the button will be pushed down and seem aligned. You may find nesting the buttons in their own divs will give you more control.

However, you can easily resolve this with your current structure by adding <br> or the line-break element on the button that is positioned higher. See below.

.row {
  display: flex;
  /* equal height of the children */
}

.col1 {
  flex: 1;
  /* additionally, equal width */
  border: 1px solid #dadada;
  margin: 0 40px 0 0;
  padding: 0 0 10px 0;
}

.col2 {
  flex: 1;
  /* additionally, equal width */
  border: 1px solid #dadada;
  padding: 0 0 10px 0;
}

.card-header {
  background: rgba(242, 242, 242, 1);
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  padding: 31px 10px 31px 15px;
}

.card-header-bg {
  height: 7px;
}

.card-container {
  padding: 2px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blue-button,
a.blue-button {
  background-color: #026fc2;
  border-radius: 99rem;
  box-shadow: inset 0 0 0 1px #454545;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 1rem;
  text-align: center;
  display: inline-block;
}

.btn-primary {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px;
}

.card-container>div {
  height: 210px;
}

<div class="row">
  <div class="col1">
    <div class="card-header-bg" style=" background-color: rgba(255, 181, 119, 1);"></div>

    <div class="card-header">Header</div>

    <div class="card-container">
      <div>
        <p>Test Example</p>

        <ul>
          <li>test1</li>

          <li>test2</li>

          <li>test3</li>

          <li>test4</li>
        </ul>

        <p>Minor updates.</p>

        <ul>
          <li>test</li>

          <li>Test</li>
        </ul>
      </div>
    </div>
    <div class="btn-primary">
      <a href=".html" class="blue-button" role="button">Go Here</a>
    </div>
  </div>

  <div class="col2">
    <div class="card-header-bg" style=" background-color: #7ECEFD;"></div>

    <div class="card-header">Header</div>

    <div class="card-container">
      <div>
        <p>test123</p>

        <ul>
          <li>abc</li>

          <li>def</li>

          <li>ghi</li>
        </ul>

        <p>test test test.</p>

        <ul>
          <li>Learn about testing</li>
        </ul>
      </div>
    </div>
    <div class="btn-primary">
      <a href="" class="blue-button" role="button">Second Test</a>
    </div>
  </div>

How can I get my button and text to fill the column regardless of screen resolution?

container-fluid is set to the width of the entire browser, and so the col-xs-5 element will always vary, as it will be a percentage of the browser width. btn-block will ensure that the button is 100% of the variable col-xs-5 width.

If you want the button element to be a set width regardless of screen resolution, I suggest giving the button element an explicit width,

e.g.

button {
  width: 200px;
}

Long button text will likely break to a second line, but the button width will remain consistent.

How to make two buttons next to each other be the same size always

CSS grid can do this

.my-buttons {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="text-center">
  <div class="my-buttons">
    <button type="button" class="btn btn-outline-primary">
        1st Button
      </button>
    <button type="button" class="btn btn-outline-primary">
        Button with a long name.
      </button>
  </div>
</div>