Center bootstrap column using offset for small devices only

I'm not sure if I got it right but, maybe this will help you:

<div class="container">
  <div class="row">         
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center">
      <img src="https://c1.staticflickr.com/3/2813/9093733888_79ccacf171_z.jpg" class="img-responsive img-circle">
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 text-center">
      <h3>Hello World!</h3>
      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa
        qui officia deserunt mollit anim id est laborum.</p>
    </div>  
  </div>
</div>

Or check the Demo Here, let me know if this helps you

In Latest stable version of Bootstrap (4.x) none of the above option works because classes for offsets has been changed.

below code works on Bootstrap 4.x

 <div class="container">
        <div class="row m-3">
            <div class="col-10 offset-1 col-sm-10 offset-sm-1 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                <div class="card shadow">
                    <div class="card-header bg-primary">
                        <h2 class="text-white">
                            Register with us
                        </h2>
                    </div>
                    <div class="card-body">
                        <form action="">
                            <div class="form-group">
                                <span for="txtemail">Email</span>
                                <input type="email" class="form-control" id="txtemail" />
                            </div>
                            <div class="form-group">
                                <span for="txtpassword">Password</span>
                                <input type="password" class="form-control" id="txtpassword" />
                            </div>
                            <div class="form-group">
                                <span for="txtmobile">Mobile</span>
                                <input type="number" class="form-control" id="txtmobile" />
                            </div>
                            <div class="form-group">
                                <span for="sltcountry">Select country</span>
                                <select class="form-control" id="sltcountry" >
                                    <option value="">India</option>
                                    <option value="">US</option>
                                    <option value="">UK</option>
                                    <option value="">Canada</option>
                                </select>    
                            </div>
                            <b>Select gender</b>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="rdogender" value="1" /> Male
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="rdogender" value="0" /> Female
                                </label>
                            </div>
                            <b>Select language you can speak and write</b>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="rdogujarati" value="1" /> Gujarati
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="rdohindi" value="2" /> Hindi
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="txtaddress">Address</label>
                                <textarea class="form-control" id="txtaddress" cols="30" rows="3"></textarea>
                            </div>
                            <div class="form-group text-right">
                                <button class="btn btn-primary">Save</button>
                                <button class="btn btn-warning">Clear all</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

You have to reverse the offsetting for each of the other col-classes (although why... I'm not sure):

<div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-0 col-lg-4 col-lg-offset-0">

DEMO: http://jsfiddle.net/dpvarcfe/