How do align my Images on this website so that they are responsive to the device size?

Question

I am attempting to create a 2 column layout using bootstrap where in each row there are 2 columns :

One contains Text and one contains images adding to the explanation of the text

This is the bootstrap code :

This is the navigation bar.

  <div class = "navbar navbar-default navbar-static-top">

   <div class = "container ">

    <a href = "# " class  = "navbar-brand">levi</a>
          <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navbar-collapse"
           name = "button" >
          <span class = "navbar-toggle-Menu">Menu</span>
          </button>
    <div class = "collapse navbar-collapse ">

           <ul class = "nav navbar-nav navbar-right ">

                    <li><a href="#"> product</a></li>
                    <li><a href="#"> price</a></li>
                      <li><a href = "#">Support</a></li>
                    <li><a href = "#">Sign In</a></li>
           </ul>

    </div>

   </div>

  </div>

This is the 2 column layout for each row

<div class = "container">

        <div class = "row">

          <div class = "col-sm-6 col-md-6 col-lg-8">
                  <h3><b>Connect Soft documents</b></h3>
                  <p class = "lead">Allow documents that feed into each other to provide a consistent, untainted view of the
                financial, operational and social behaviour of the institution.</p>
          </div>

          <div class = "col-sm-3">
  Image

          </div>

        </div>



        <div class = "row">
<!-- position image to the right when on desktop,, but allow image to occupy the whole  webpage  when the device is less the 768px-->
          <div class = "col-sm-5">
  <h3><b>Improve decision models</b></h3>
  <p class = "lead">Use statistical modelling to identify patterns and anomalies in the data that can help in
  making better decisions.</p>
          </div>
          <div class = "col-sm-6">
           <img src = "Statistics.png" alt = "Statistics" width = "350px" height = "270px"  class = "pull-right img-responsive imG">
          </div>

        </div>

        <div class = "row">

          <div class = "col-sm-6">
              <h3><b>Search. Get what is important to You!</b></h3>
              <p class = "lead">All notifications and documents are indexed and
              archived so that you can find what is needed at all times.</p>
          </div>
          <div class = "col-sm-6">

          </div>

        </div>


        <div class = "row">

          <div class = "col-sm-4">
            <h3>Collaborate with other apps!</h3>
              <p class = "lead" >Connect to the tools you need to prevent wasting time using so many apps </p>
          <div class = "col-sm-8">
<img src = "Integrate.jpg" alt = "Integrate" width = "300" height = "300" >
          </div>

        </div>


</div>
<footer>

<div class = "">
<ul>
  <li>Security</li>
</ul>
</div>
</footer>

How I want it to work is that when the page is being viewed on a desktop the text is aligned left and the image is aligned right.

When it is being viewed on a screen on less than 768px, the text is above the image and the image is aligned in the center of the page.

e.g.

Desktop : Text | Image

Mobile :

Text

---

Image

Here is my jsfiddle bootstrap website

It should have the same responsive design as slacks product page

slack's product page

Answer 1

Here the solution :

<div class="row">
  <div class="col-md-6 col-sm-12">
    <h3>Collaborate with other apps!</h3>
    <p class="lead">Connect to the tools you need to prevent wasting time using so many apps </p>
  </div>
  <div class="col-md-6 col-sm-12 text-center-sm">
    <img src="Integrate.jpg" alt="Integrate" width="300" height="300">
  </div>
</div>

I also add conditional text-align class in the css

.text-center-xs {
    text-align: center;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .text-center-sm {
        text-align: center;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .text-center-md {
        text-align: center;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .text-justify-lg {
        text-align: center;
    }
}

The complete jsfiddle here

Take care of your tabulation in your html it's very important to provide a clean code.

Cheers bro

Answer 2

it is very much easy just apply this css in the responsive media to the images

.imG{
    float: none !important;
    margin: auto;
    text-align: center;
}

here is the updated js Fiddle