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