why bootstrap offset is not working to both side?

Question

I have a page where In first row I want a space to the left side and in second row i want a space to the right side.

This space should be col-md-2

This space should be same to both row and this space is not visible after col-md-* to col-xs-*

So that I'm using following bootstrap code but not working : It's showing space to left side on both row :(

<div class="row">

    <div class="col-xs-12 col-md-10 col-md-offset-2">
        <div class="col-xs-8 col-md-11 text-message">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.</p>
        </div>
        <div class="col-xs-4 col-md-1">
            <img src="<?php echo SITE_URL.'images/users_avator/ppic_5795beb6936d63.04385327.jpg' ?>" alt="User Avatar" class="img-responsive img-circle" width="50"/>
        </div>
    </div>

     <div class="col-xs-12 col-md-offset-2 col-md-10">
        <div class="col-xs-4 col-md-1">
            <img src="<?php echo SITE_URL.'images/users_avator/ppic_5795beb6936d63.04385327.jpg' ?>" alt="User Avatar" class="img-responsive img-circle" width="50"/>
        </div>
        <div class="col-xs-8 col-md-11 text-message">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.</p>
        </div>            
    </div>  

</div> 

Update :

Now I am using this code and it's showing space on col-sm-* grid like the bellow image. Space on second row between image and text.

   <div class="row">

        <div class="col-xs-12 col-md-10 col-md-offset-2">
            <div class="col-xs-8 col-md-11 text-message">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.</p>
            </div>
            <div class="col-xs-4 col-md-1">
                <img src="<?php echo SITE_URL.'images/users_avator/ppic_5795beb6936d63.04385327.jpg' ?>" alt="User Avatar" class="img-responsive img-circle" width="50"/>
            </div>
        </div>

         <div class="col-xs-12 col-md-10">
            <div class="col-xs-4 col-md-1">
                <img src="<?php echo SITE_URL.'images/users_avator/ppic_5795beb6936d63.04385327.jpg' ?>" alt="User Avatar" class="img-responsive img-circle" width="50"/>
            </div>
            <div class="col-xs-8 col-md-11 text-message">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.</p>
            </div>            
        </div>  

    </div>

Answer 1

Bootstrap offset will increase the left margin of a column by * columns

try to change this:

<div class="col-xs-12 col-md-10">

in place of this:

 <div class="col-xs-12 col-md-offset-2 col-md-10">

the left over space will be your required space on right side

info

Updated code:

 <div class="row">
    <div class="col-xs-12 col-md-10 col-md-offset-2 col-sm-offset-2  col-sm-10">
        <div class="col-xs-8 col-md-11 text-message">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.</p>
        </div>
        <div class="col-xs-4 col-md-1">
            <img src="<?php echo 'http://www.w3schools.com/images/colorpicker.gif' ?>" alt="User Avatar" class="img-responsive img-circle" width="50"/>
        </div>
    </div>

     <div class="col-xs-12 col-md-offset-2 col-md-10 col-sm-10">
        <div class="col-xs-4 col-md-1">
            <img src="<?php echo 'http://www.w3schools.com/images/colorpicker.gif' ?>" alt="User Avatar" class="img-responsive img-circle" width="50"/>
        </div>
        <div class="col-xs-8 col-md-11 text-message">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.</p>
        </div>            
    </div>  
</div> 

Answer 2

You should count to 10 instead of 12.

You want offset on both sides.

Like so:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

  <div class="col-xs-12 col-md-8 col-md-offset-2">
    <div class="col-xs-8 col-md-11 text-message">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.</p>
    </div>
    <div class="col-xs-4 col-md-1">
      X
    </div>
  </div>

  <div class="col-xs-12 col-md-offset-2 col-md-8">
    <div class="col-xs-4 col-md-1">
      X</div>
    <div class="col-xs-8 col-md-11 text-message">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.</p>
    </div>
  </div>

</div>