How to write page.tpl.php file for bootstrap site

Question

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?

Answer 1

Use .image-responsive class in your tpl.php file on your image or link tag like that

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

image-responsive in bootstrap

Answer 2

The image itself needs an .img-responsive class on it to scale.

Answer 3

This helped me solving the problem:

For the bootstrap theme, under appearances > visit the settings page for the theme. Under the default tab ("general") and open the "Images" fieldset and check "Responsive Images "