What's the default workflow for layouts in Drupal Bootstrap theme?

Question

Panels/Page Manager and Display Suite are probably the two most popular approaches to layout of items in Drupal. Both, however, are officially not supported by the popular Bootstrap theme (as opposed to Zurb Foundation, which actively recommends both Panels and Display Suite).

I've been right through the Drupal Bootstrap documention, and beyond this "what not to do", I can't find anything on what to do. I know how to work with vanilla-Bootstrap's rows, columns etc using classes; I'm just struggling to find the standard, going-with-the-flow expected approach to doing this in the context of Drupal.

Is there any official guidance on best-practise layout in Drupal Bootstrap, or failing that, what's the expected approach to applying the row and column classes to elements?

I've seen Views Bootstrap, which is kinda-sorta supported. It's the next step up from that I'm not sure about, and I'm wary of just attempting something then finding I'm going against how the theme is designed and expected to work.

Answer 1

I see your concern with the "unsupported" classification, just because that's an immediate red flag when looking for a module to provide some sort of core-like functionality. Since Bootstrap is really a frontend tool, I'm less concerned, since I'm generally just using it for its responsive behavior. In the past, I've simply used templates and preprocess functions to wrap or 'bootstrap' my content. Also, I've always used Display Suite Bootstrap layouts, which has been helpful in previous projects that are handed off to clients. Since it's a theme of choice, I'm interested to hear other comments.

EDIT

Before anything, you'll need to reference the Bootstrap CDN in your header OR install a Bootstrap Starter theme. Then, you'll need to install Display Suite and the Bootstrap layouts (linked above). You can then manage the display of a content type and choose a Bootstrap grid layout to add responsive behavior to your content type. If you prefer to use a template file e.g., you can copy the page.tpl.php from the core systems folder to your theme's template folder and add Bootstrap classes and elements to the markup. For more specific elements, such as menus and images, use preprocess functions in your template.php file to alter the markup. See the example below:

Bootstrap a menu:

function THEMENAME_menu_tree__MENU_MACHINE_NAME($variables) {
    return '<ul class="wrapper clearfix col-sm-12 col-md-6">' . $variables['tree'] . '</ul>';
}

Bootstrap a block:

function THEMENAME_preprocess_block(&$variables) {
    $elements = $variables['elements'];
    $classes = &$variables['classes_array'];
    if ($elements['#block']->subject == 'BLOCKNAME') {
         $classes[] = 'col-sm-6' . ' ' . 'col-md-3';
    }
}

Hope that's helpful.