How to write page.tpl.php file for bootstrap site I have the below code in the page.tpl.php file. 

&lt;header id="navbar" role="banner" class="&lt;?php print $navbar_classes; ?&gt;"&gt;
  &lt;div class="container"&gt;
    &lt;div class="navbar-header col-xs-12"&gt;
      &lt;?php if ($logo): ?&gt;
      &lt;a class="logo navbar-btn pull-left col-xs-12 col-sm-12 col-md-2 col-lg-2" href="&lt;?php print $front_page; ?&gt;" title="&lt;?php print t('Home'); ?&gt;"&gt;
        &lt;img src="&lt;?php print $logo; ?&gt;" alt="&lt;?php print t('Home'); ?&gt;" /&gt;
      &lt;/a&gt;
      &lt;?php endif; ?&gt;
............
  &lt;/div&gt;
&lt;/header&gt;


As you can see, I have written bootstrap class col-xs-12 inside a class:

&lt;a class="logo navbar-btn pull-left col-xs-12 col-sm-12 col-md-2 col-lg-2" ....   &lt;/a&gt;


Then I uploaded an image whose original size is 658 x 318 (Appearance > bootstrap sub theme > Logo image ).

When I visit my using in mobile phone, I still see the logo in original size. I thought me adding col-xs-12 will instruct bootstrap to fit the image in 12 column grid system of my mobile screen. Do you know why image is still in original size even though I added the bootstrap class col-xs-12?



#Test1 - Passed

In tpl file > header region > I have added img-responsive class:

">

  &lt;div class="container"&gt;
    &lt;div class="navbar-header col-xs-12"&gt;
      &lt;?php if ($logo): ?&gt;
      &lt;a class="logo navbar-btn pull-left col-xs-12 col-sm-12 col-md-2 col-lg-2" href="&lt;?php print $front_page; ?&gt;" title="&lt;?php print t('Home'); ?&gt;"&gt;
        &lt;img src="&lt;?php print $logo; ?&gt;" class="img-responsive"  alt="&lt;?php print t('Home'); ?&gt;" /&gt;
      &lt;/a&gt;
      &lt;?php endif; ?&gt;
.....

&lt;/div&gt;
&lt;/header&gt;


After that, I have uploaded the logo (appearance > bootstrap > Upload image...). When I view the page in mobile, I see that image was responsive. This is good. 

#Test2 - Failed

In tpl file > main container region > I have added img-responsive class:

&lt;div class = "main-container container"&gt;

/** I have added this for all the images to be responsive for main contents */
&lt;div class="container"&gt;
  &lt;img src="..." class="img-responsive" alt="Responsive image"&gt;
&lt;/div&gt;

  &lt;header role="banner" id="page-header"&gt;
    &lt;?php if (!empty($site_slogan)): ?&gt;
      &lt;p class="lead"&gt;&lt;?php print $site_slogan; ?&gt;&lt;/p&gt;
    &lt;?php endif; ?&gt;

    &lt;?php print render($page['header']); ?&gt;
  &lt;/header&gt; &lt;!-- /#page-header --&gt;

  &lt;div class="row"&gt;

    &lt;?php if (!empty($page['sidebar_first'])): ?&gt;
      &lt;aside class="col-sm-3" role="complementary"&gt;
        &lt;?php print render($page['sidebar_first']); ?&gt;
      &lt;/aside&gt;  &lt;!-- /#sidebar-first --&gt;
    &lt;?php endif; ?&gt;

............

&lt;/div&gt;


After that, I uploaded some images to content types. When I view the node in mobile, I still see those images in original sizes. How do I update the tpl file so all the images in main container class become responsive as well?
Use .image-responsive class in your tpl.php file on your image or link tag like that

&lt;div class="container"&gt;
  &lt;h2&gt;Image&lt;/h2&gt;
  &lt;p&gt;The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):&lt;/p&gt;                  
  &lt;img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"&gt; 
&lt;/div&gt;


image-responsive in bootstrap