I have the below code in the page.tpl.php file.
<header id="navbar" role="banner" class="<?php print $navbar_classes; ?>">
<div class="container">
<div class="navbar-header col-xs-12">
<?php if ($logo): ?>
<a class="logo navbar-btn pull-left col-xs-12 col-sm-12 col-md-2 col-lg-2" href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>">
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
</a>
<?php endif; ?>
............
</div>
</header>
As you can see, I have written bootstrap class col-xs-12 inside a class:
<a class="logo navbar-btn pull-left col-xs-12 col-sm-12 col-md-2 col-lg-2" .... </a>
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:
">
<div class="container">
<div class="navbar-header col-xs-12">
<?php if ($logo): ?>
<a class="logo navbar-btn pull-left col-xs-12 col-sm-12 col-md-2 col-lg-2" href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>">
<img src="<?php print $logo; ?>" class="img-responsive" alt="<?php print t('Home'); ?>" />
</a>
<?php endif; ?>
.....
</div>
</header>
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:
<div class = "main-container container">
/** I have added this for all the images to be responsive for main contents */
<div class="container">
<img src="..." class="img-responsive" alt="Responsive image">
</div>
<header role="banner" id="page-header">
<?php if (!empty($site_slogan)): ?>
<p class="lead"><?php print $site_slogan; ?></p>
<?php endif; ?>
<?php print render($page['header']); ?>
</header> <!-- /#page-header -->
<div class="row">
<?php if (!empty($page['sidebar_first'])): ?>
<aside class="col-sm-3" role="complementary">
<?php print render($page['sidebar_first']); ?>
</aside> <!-- /#sidebar-first -->
<?php endif; ?>
............
</div>
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?