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

Anim pariatur cliche reprehenderit enim eiusmod high life accusamus terry richardson ad squid.
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

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

Title
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

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

PHP
80% Complete

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

Cras mattis consectetur purus sit amet fermentum.
Cras mattis consectetur purus sit amet fermentum.

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

Cras mattis consectetur purus sit amet fermentum.

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 %}