如何將這些按鈕並排放置

Question

如何將這些按鈕並排居中放置？

這是一條長路，一條路在另一條之上。
我試過不同的引導程序類，但我找不到要引用它們的引號。

$(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> 

這僅僅是基本的自舉類上排

將col-xs-12，將佔據整個屏幕的文本

然後下一行的這兩個按鈕將在另一行，這些col-xs-6這意味着每一個將ta可以達到屏幕寬度的50％