How can I put these buttons side by side

Question

How can I put these buttons side by side and centered?

The are way to long and one on top of the other.
I've tried different bootstrap classes, but I can't find the one that is going to align them under the quote.

$(document).ready(function() {  
  /*getting random quote on button click*/
  $('#getMessage').on("click", function() {
    $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=&"+new Date().getTime(), function(json) {      
      console.log(json[0].content)
      console.log(json[0].title)
      // var quoteArr = json.contents.quotes[0])
      $("#quote-content").html(json[0].content);
      $("#quote-author").html("--"+json[0].title);
      $(".social-button").toggle();
    });    
  });  
});

body {
  background-color: #334551;
}

.container {
  padding-top: 50px;
}
.header_text {
    font-family: 'Allura';font-size: 50px;
    color: green;
}

.sub_text {
   font-family: 'Allura';font-size: 30px;
}

#getMessage {
   font-size: 18px;
}

.social-button {
  with: 120px;
  margin: 10px;
  visibility: block;
}

.image {
  width: 160px;
  height: 180px;
  border-radius: 300px;
  border-color: green;
  border-width: 5px;
  border-style: solid;
}

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.text {
  color: white;
  font-family: 'Verdana';
  font-size: 18px;
}

<link href='https://fonts.googleapis.com/css?family=Allura' rel='stylesheet'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">  
  <h1 class="col-lg-12 header_text text-primary text-center">Welcome to Daily Quotes!</h1>
  <div class="row col-lg-12 text-centered">
    <img class="image center" src="http://pctechtips.org/quotes/aristoteles.jpg">
  </div> 
  <div class="row">
    <p class="col-lg-12 sub_text text-center text-primary">Press the button for a famous quote!...</p>
  </div>
  <div class="col-md-3 center">      
    <button id="getMessage" class="btn btn-primary">Get quote!</button>
  </div> 
  <br> 
  <div class="col-lg-8 offset-lg-2">
    <div id="quote-content" class="row col-lg-12 text center"></div> 
    <div id="quote-author" class="row col-lg-12 text center"></div> 
  </div>

  <div class="col-xs-6 social-button center">
    <a class="btn btn-info btn-block btn-social btn-twitter">
      <i class="fa fa-twitter"> Twitter</i>
    </a>
    <a class="btn-primary btn btn-block btn-social btn-facebook">
      <i class="fa fa-facebook"> Facebook</i>
    </a>
  </div>    
</div>

Answer 1

<div class="container"> 
 <div class="row">
    <div class="col-xs-12 text-center">
      -- this is your row with text
    </div>
    <div class="row">
      <div class="col-xs-6">
         -- this is half the next row for button 1
      </div>
      <div class="col-xs-6">
         -- this is half the next row for button 2
      </div>
    </div> 
 </div>
</div>

this is just basic bootstrap classes

on row will be col-xs-12 that will take up the entire screen for the text

then the next row for the two buttons will be in another row , each of these col-xs-6 that means each one will take up 50% of the width of the screen