Center bootstrap column using offset for small devices only

Question

I am trying to display text alongside an image. I want it to stack only when the device is below 767px wide. Otherwise, I want them to be side by side. During this stacking, the image is responsive so it takes up and entire row above the text. To avoid this, I tried to limit the size of the column when it is xs. This makes sure the image is within the specified column size. Now I want to center the image. I tried to use the offset method but it's forcing them to stack at all resolutions.

Here is the code and the fiddle

<div class="container">
<div class="row">
    <div class="col-xs-12 col-sm-4 col-lg-4">
        <img
            src="https://c1.staticflickr.com/3/2813/9093733888_79ccacf171_z.jpg"
            alt="pic" class="img-responsive img-circle">
    </div>
    <div
        class="col-xs-12 col-sm-6 col-sm-offset-2 col-lg-6 col-lg-offset-2 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>

In the above code, as you can see, the image is taking full width on small devices

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

One way to reduce the size of the image is the reduce the column size. So the above line is changed to

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

This occupies the left half of the screen. So to center it I added an offset.

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

This words fine for xs resolution but the two columns get stacked at higher resolutions (sm, lg) as well.

I'm fairly new to bootstrap, css, html etc. So I might be missing something very obvious here. I couldn't find any relevant solution in this specific case so any help/insight is appreciated.

Answer 1

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/

Answer 2

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

Answer 3

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>