Bootstrap 3 : two button on a row - html

Question

I am using bootstrap 3 and have a my data coming from a service. I am using ng-repeat to render the design,I need two buttons to appear in one row and if we are using mobile then one button in a row. The Buttons should be center on the screen as indicated below.
Button Text 1 Button Text 2
Button Tex 3 Button Text 4
This is my html code
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-offset-2"><button type="button" class="btn btn-default btn-block">Here sits text 1</button></div>
<div class="col-sm-4"><button type="button" class="btn btn-default btn-block">Here sits text 2</button></div>
</div>
<div class="row">
<div class="col-sm-4 col-md-offset-2"><button type="button" class="btn btn-default btn-block">Here sits text 3</button></div>
<div class="col-sm-4">
<button type="button" class="btn btn-default btn-block" style="word-wrap: break-word;">Here sits text 4 </button></div>
</div>
</div>
How would I avoid using multiple rows in order to force two columns?
I am asking for that to make my ng-repeat just render some columns because, it would not work with this design?
Update For Question:
I have updated using the answer suggested below, its working now:
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-offset-2 col-sm-offset-2 col-lg-offset-2 col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary btn-block">Button text 1</button>
</div>
<div class="col-sm-4 col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary btn-block">Button text 2</button>
</div>
<div class="col-sm-4 col-md-offset-2 col-sm-offset-2 col-lg-offset-2 col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary btn-block">Button text 1</button>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary btn-block">Button text 4</button>
</div>
</div>
Is it possible to use the same styling for cols and and make it work (there are offsets on alternate cols.

Answer 1

I thinkyou should take a look at this: https://jsfiddle.net/2zu0oksc/
You can have a div with class row and many col-*
Setting the col-xs-12 to the div, you are saying taht in small devices it will take all the row width.
This is the code:
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary">Button text 1</button>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary">Button text 2</button>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary">Button text 3</button>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary">Button text 4</button>
</div>
</div>

Answer 2

<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="col-xs-2 col-xs-offset-4">
<button class="btn btn-primary">
Text 1
</button>
</div>
<div class="col-xs-2 col-xs-offset-1">
<button class="btn btn-primary">
Text 1
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="col-xs-2 col-xs-offset-4">
<button class="btn btn-primary">
Text 1
</button>
</div>
<div class="col-xs-2 col-xs-offset-1">
<button class="btn btn-primary">
Text 1
</button>
</div>
</div>
</div>
</div>
https://jsfiddle.net/wuy235f9/
This works but you'll have to adjust the offset and col size you want for it!