Bootstrap classes for positioning - html

Question

What class i need to use to place second button on the same line with first button. I am using bootstrap 4.
<div class="container">
<div class="row justify-content-sm-center">
<div class="col-sm-5 kappa">
<h3>Don't have an account?</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem quasi facere officiis numquam alias, delectus beatae autem facilis aliquid voluptates aspernatur, eaque suscipit possimus eveniet praesentium explicabo itaque nulla distinctio.
</p>
<button type="button">sign up</button>
</div>
<div class="col-sm-5 kappa">
<h3>Have an account?</h3>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit!
</p>
<button type="button" class="">login</button>
</div>
</div>
</div>

Answer 1

Since there is no code provided, assuming you are using Bootstrap 4 and apply flexbox css, in Bootstrap 4 the class is call .d-flex. After you apply .d-flex to parent all the direct descendant can be align easily using margin. In Bootstrap 4 it is call mt-auto and mb-0.
.bigcontainer{
height:300px;
background:grey;
width:40%;
float:left;
margin:10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="bigcontainer d-flex flex-column">
<div>Title</div>
<div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue.Quisque semper eleifend odio eget feugiat. Curabitur id mi tristique, ultrices lectus quis, gravida tortor..</div>
<div class="mt-auto mb-0"><button>button</button></div>
</div>
<div class="bigcontainer d-flex flex-column">
<div>Title</div>
<div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue. </div>
<div class="mt-auto mb-0"><button>button</button></div>
</div>

Answer 2

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
.cs-button {
position: absolute;
bottom: 0;
margin-bottom: 20px;
}
</style>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="height: 200px;">
<div>Title</div>
<div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue.Quisque semper eleifend odio eget feugiat. Curabitur id mi tristique, ultrices lectus quis, gravida tortor..</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cs-button" style="padding:0" >
<div class="mt-auto mb-0"><button>button</button></div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="height: 200px;">
<div>Title</div>
<div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue. </div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cs-button" style="padding:0">
<div class="mt-auto mb-0"><button>button</button></div>
</div>
</div>
</div>
</div>