Bootstrap components dynamically rendered by template

You can render the most of the Bootstrap components dynamically. Here you will find the example code for those components.

Accordion

This component can also be dynamically filled with data provided by a json file or fetched from a database. You will provide an array similar to the following one:

$accordion = array(
    'id' => 'accordion1',
    'name' => 'accordion1',            
    'items' => array(
        array(
            'id' => 'accordion_item1',
            'header_id' => 'accordion_item1',
            'title' => 'An awesome title',
            'content' => 'Anim pariatur cliche reprehenderit enim eiusmod high life accusamus terry richardson ad squid.',
        ),
        array(
            'id' => 'accordion_item2',
            'header_id' => 'accordion_item2',
            'title' => 'Another awesome title',
            'content' => '3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.',
        ),
    ),
);
$this->grav['twig']->twig_vars['accordion'] = $accordion;

Then render it in your theme as follows:

{% include 'bootstrap/accordion.html.twig' with accordion %}

Alert

This component can also be dynamically filled with data provided by a json file or fetched from a database. You will provide an array similar to the following one:

$alert = array(
    'name' => 'alert1',  
    'type' => 'warning',            
    'attributes' => 'class:my-class,rel:my-rel',
    'content' => 'Anim pariatur cliche reprehenderit enim eiusmod high life accusamus terry richardson ad squid.',
);
$this->grav['twig']->twig_vars['alert'] = $alert;

Then render it in your theme as follows:

{% include 'bootstrap/alert.html.twig' with alert %}

Carousel

This component can also be dynamically filled with data provided by a json file or fetched from a database. You will provide an array similar to the following one:

$carousel = array(
    'id' => 'carousel1',
    'name' => 'carousel1',
    'previous_label' => 'Prev',
    'next_label' => 'Next',            
    'items' => array(
        array(
            'image' => 'image1.jpg',
            'caption' => 'First image caption',
        ),
        array(
            'image' => 'image2.jpg',
            'caption' => 'Second image caption',
        ),
        array(
            'image' => 'image3.jpg',
            'caption' => 'Third image caption',
        ),
    ),
);
$this->grav['twig']->twig_vars['carousel'] = $carousel;

Then render it in your theme as follows:

{% include 'bootstrap/carousel.html.twig' with carousel %}

Jumbotron

This component can also be dynamically filled with data provided by a json file or fetched from a database. You will provide an array similar to the following one:

$jumbotron = array(
    'name' => 'jumbotron1',
    'image' => 'image1.jpg',
    'fullwidth' => true,            
    'attributes' => 'class:my-class,rel:my-rel',
    'content' => 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.',
);
$this->grav['twig']->twig_vars['jumbotron'] = $jumbotron;

Then render it in your theme as follows:

{% include 'bootstrap/jumbotron.html.twig' with jumbotron %}

List group

This component can also be dynamically filled with data provided by a json file or fetched from a database. You will provide an array similar to the following one:

$listGroup = array(
    'name' => 'listgroup1',           
    'items' => array(
        array(
            'badge' => '12',
            'active' => true,        
            'attributes' => 'class:my-class,rel:my-rel',
            'content' => 'Cras mattis consectetur purus sit amet fermentum.',
        ),
        array(
            'badge' => '15',
            'content' => 'Cras mattis consectetur purus sit amet fermentum.',
        ),
        array(
            'disabled' => true,
            'content' => 'Cras mattis consectetur purus sit amet fermentum.',
        ),
        array(
            'badge' => '12',
            'type' => 'success',
            'content' => 'Cras mattis consectetur purus sit amet fermentum.',
        ),
    ),
);
$this->grav['twig']->twig_vars['list_group'] = $listGroup;

Then render it in your theme as follows:

{% include 'bootstrap/listgroup.html.twig' with list_group %}

Page header

This component can also be dynamically filled with data provided by a json file or fetched from a database. You will provide an array similar to the following one:

$pageHeader = array(
    'name' => 'pageheader1',
    'title' => 'Title',
    'subtitle' => 'Subtitle',            
    'attributes' => 'class:my-class,rel:my-rel',
);
$this->grav['twig']->twig_vars['page_header'] = $pageHeader;

Then render it in your theme as follows:

{% include 'bootstrap/pageheader.html.twig' with page_header %}

Panel

This component can also be dynamically filled with data provided by a json file or fetched from a database. You will provide an array similar to the following one:

$panel = array(
    'name' => 'panel1',
    'heading_title' => 'Title',
    //'footer_title' => Footer title,            
    'type' => 'danger',
    'content' => 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.',
);
$this->grav['twig']->twig_vars['panel'] = $panel;

Then render it in your theme as follows:

{% include 'bootstrap/panel.html.twig' with panel %}

Progressbar

This component can also be dynamically filled with data provided by a json file or fetched from a database. You will provide an array similar to the following one:

$progressbar = array(
    'name' => 'progressbar1',
    'label' => 'PHP',
    'type' => 'success',
    //'striped' => true,
    //'animated' => true,
    'value' => 80,
    'min' => 0,
    'max' => 100,
    'attributes' => 'class:my-class,rel:my-rel',
);
$this->grav['twig']->twig_vars['progressbar'] = $progressbar;

Then render it in your theme as follows:

{% include 'bootstrap/progressbar.html.twig' with progressbar %}

Tabs

• tab_item1
• tab_item2

This component can also be dynamically filled with data provided by a json file or fetched from a database. You will provide an array similar to the following one:

$tab = array(
    'name' => 'tab1',           
    'items' => array(
        array(
            'name' => 'tab_item1',
            'attributes' => 'class:my-class,rel:my-rel',
            'content' => 'Cras mattis consectetur purus sit amet fermentum.',
        ),
        array(
            'name' => 'tab_item2',
            'content' => 'Cras mattis consectetur purus sit amet fermentum.',
        ),
    ),
);
$this->grav['twig']->twig_vars['tab'] = $tab;

Then render it in your theme as follows:

{% include 'bootstrap/tab.html.twig' with tab %}

Thumbnail

This component can also be dynamically filled with data provided by a json file or fetched from a database. You will provide an array similar to the following one:

$thumbnail = array(
    'name' => 'thumbnail1',           
    'items' => array(
        array(
            'image' => 'image1.jpg',
            'url' => 'http://diblas.net',
            //'content' => 'Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.',
        ),
        array(
            'image' => 'image2.jpg',
            'url' => 'http://diblas.net',
            //'content' => 'Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.',
        ),
        array(
            'image' => 'image3.jpg',
            'url' => 'http://diblas.net',
            //'content' => 'Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.',
        ),
    ),
);
$this->grav['twig']->twig_vars['thumbnail'] = $thumbnail;

Then render it in your theme as follows:

{% include 'bootstrap/thumbnail.html.twig' with thumbnail %}

Well

This component can also be dynamically filled with data provided by a json file or fetched from a database. You will provide an array similar to the following one:

$well = array(
    'name' => 'pageheader1',
    'size' => 'large',            
    'attributes' => 'class:my-class,rel:my-rel',
    'content' => 'Cras mattis consectetur purus sit amet fermentum.',
);
$this->grav['twig']->twig_vars['well'] = $well;

Then render it in your theme as follows:

{% include 'bootstrap/well.html.twig' with well %}