Aligning two buttons in two columns horizontally Same level

I am trying to make this two buttons horizontally into same level using bootstrap.

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col mb-0">
          <h2>h2 text</h2>
          <h4>h4 text</h4>
          <h4>Another h4 text</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="text-center"><button>Button 1</button></div>
        </div>
        <div class="col mb-0">
          <h2>Right Div</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <button>Button 2</button>
        </div>
      </div>
    </div>
  </body>
</html>

Current the output is something like this.
enter image description here

But I want to align the two buttons horizontally as below.
enter image description here

Any help would be much appreciated.

Edit : I would prefer a solution without adding any new elements. Using bootstrap only, if possible .Or otherwise using css.

>Solution :

You can solve it using the d-flex class to make the columns flex containers and flex-column class to set their flex-direction to column. Also, added the justify-content-between class to distribute the remaining space between the top and bottom of the column.

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
  </head>
  <body>
<div class="container">
  <div class="row">
    <div class="col mb-0 d-flex flex-column justify-content-between">
      <div>
        <h2>h2 text</h2>
        <h4>h4 text</h4>
        <h4>Another h4 text</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="text-center"><button>Button 1</button></div>
    </div>
    <div class="col mb-0 d-flex flex-column justify-content-between">
      <div>
        <h2>Right Div</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="text-left"><button>Button 2</button></div>
    </div>
  </div>
</div>


  </body>
</html>

Leave a Reply