Drupal Bootstrap: Quick theming tips

Custom Modal Window

Place the button below in your code to trigger the modal window. Click this button for an example:

<?php
  $page
['some_region']['modal_button'] = array(
   
'#theme' => 'button',
   
'#value' => t('Open Modal'),
   
'#button_type' => 'button',
   
'#attributes' => array(
     
'class' => array('btn', 'btn-info', 'btn-lg'),
     
'data-toggle' => 'modal',
     
'data-target' => '#your-modal',
    ),
  );
?>

Place the following in code somewhere on the page.

<?php
  $page
['some_region']['modal_window'] = array(
   
'modal' => array(
     
'content' => array(
       
'header' => array(
         
'close' => array(
           
'#theme' => 'button',
           
'#value' => '&times;',
           
'#button_type' => 'button',
           
'#attributes' => array(
             
'class' => array('close'),
             
'data-dismiss' => 'modal',
            ),
          ),
         
'title' => array(
           
'#markup' => t('Your title'),
           
'#prefix' => '<h4 class="modal-title">',
           
'#suffix' => '</h4>',
          ),
         
'#prefix' => '<div class="modal-header">',
         
'#suffix' => '</div>',
        ),
       
'body' => array(
         
'para' => array(
           
'#markup' => t('Your markup'),
           
'#prefix' => '<p>',
           
'#suffix' => '</p>',
          ),
         
'#prefix' => '<div class="modal-body">',
         
'#suffix' => '</div>',
        ),
       
'footer' => array(
         
'close' => array(
           
'#theme' => 'button',
           
'#value' => t('Close'),
           
'#button_type' => 'button',
           
'#attributes' => array(
             
'class' => array('btn', 'btn-default'),
             
'data-dismiss' => 'modal',
            ),
          ),
         
'#prefix' => '<div class="modal-footer">',
         
'#suffix' => '</div>',
        ),
       
'#prefix' => '<div class="modal-content">',
       
'#suffix' => '</div>',
      ),
     
'#prefix' => '<div class="modal-dialog">',
     
'#suffix' => '</div>',
    ),
   
'#prefix' => '<div id="your-modal" class="modal fade" role="dialog">',
   
'#suffix' => '</div>',
  );
?>

Transparent primary navbar

Place the following code into your themes template.php file.

<?php
/**
 * Implements hook_preprocess_page().
 */
function THEMENAME_preprocess_page(&$vars) {
 
// Make primary navbar transparent.
 
if (($key = array_search('navbar-default', $vars['navbar_classes_array'])) !== FALSE) {
    unset(
$vars['navbar_classes_array'][$key]);
  }
}
?>

Add 'img-responsive' class to image style output

When outputting an image using image styles, we can add the class 'img-responsive' to make it responsive.

<?php
/**
 * Implements hook_preprocess_image_style();
 */
function THEMENAME_preprocess_image_style(&$vars) {
  if (
$vars['style_name'] == 'IMAGE_STYLE_NAME'){
   
$vars['attributes']['class'][] = 'img-responsive';
  }
}
?>

Equal height columns

Add the classes 'col-xs-height' and 'col-full-height' to each column. For example:

<?php
  $page
['your_region']['example'] = array(
   
'col_1' => array(
     
'content' => array(
       
'#markup' => 'your markup',
      ),
     
'#prefix' => '<div class="col col-sm-4 col-xs-height  col-full-height">',
     
'#suffix' => '</div>',
    ),
   
'col_2' => array(
     
'content' => array(
       
'#markup' => 'your markup',
      ),
     
'#prefix' => '<div class="col col-sm-5 col-xs-height  col-full-height">',
     
'#suffix' => '</div>',
    ),
   
'col_3' => array(
     
'content' => array(
       
'#markup' => 'your markup',
      ),
     
'#prefix' => '<div class="col col-sm-3 col-xs-height  col-full-height">',
     
'#suffix' => '</div>',
    ),
   
'#prefix' => '<div class="row row-full-height">',
   
'#suffix' => '</div>',
  );
?>

Now add the styling to your style sheet

.row-full-height {
  height: 100%;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}
.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}

Use classes 'col-sm-height', 'col-md-height', or 'col-lg-height' to add equal height columns to certain sized screens only