Question

I’ve managed to build a site using the YII framework. I also installed the Bootstrap Extension which allows me to easily implement responsive widgets. My problem comes in with the rest of the site. Let’s say I want:

• A header
• A menu
• Main Content
• A Footer

The menu is the easy part, because I simply use the Bootstrap widget like this:

<?php 
     $this->widget('bootstrap.widgets.TbMenu', array(
     'type'=>'tabs', // '', 'tabs', 'pills' (or 'list')
     'stacked'=>false, // whether this is a stacked menu
     'items'=>array(
       array('label'=>'Home', 'url'=>array('/site/index')),
       array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
       array('label'=>'Contact', 'url'=>array('/site/contact')),
     ),
   )); 
?>

So my question is around making the rest of the site responsive. So: Is there an easy way to create “blocks” that will automatically be responsive too? Or is it simply a matter of creating divs and styling it responsively? in other words, is the bootstrap extension limited to specific components and therefore the remaining layout relies on the designer to sort out using CSS?

Answer 1

This depends entirely on what your putting in your content. <div> tags are not fixed width by default, neither are any other HTML tags by default. Using a width: 100% and max-width: Xpx on your <img> tags would cover most of your bases for those too, letting them flex to their parent width with a sensible limit.

After that the only things restricting the layout are things you add. So as you’re adding content make sure you think about what you want to happen to this content as the page shrinks and expands.

If you have a more specific case where you’re struggling to find a good compromise there are a ton of resources for bootstrap and Yii.