Bootstrap components for Grav CMS

A comprehensive list of all the Bootstrap components, you can use for free as shortcodes in your website.

Accordion

Code definition

[g-accordion id=accordion1 name=accordion1]
[g-accordion-item id=accordion_item1 header_id=accordion_header1 title="Open me"]

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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

[/g-accordion-item]
[g-accordion-item id=accordion_item2 header_id=accordion_header2 title="Open me too"]

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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

[/g-accordion-item]
[/g-accordion]

Read the component documentation

Alert

Code definition

[g-alert name=alert1 type=warning]
# Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

[Take this action](#) {.btn .btn-danger}
[Or do this](#) {.btn .btn-default}
[/g-alert]

Read the component documentation

Carousel

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Cras mattis consectetur purus sit amet fermentum.

Cras mattis consectetur purus sit amet fermentum.

Previous Next

Code definition

[g-carousel id="carousel1" name=carousel1]

[g-carousel-item image="image1.jpg"]
**Duis mollis**, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
[/g-carousel-item]

[g-carousel-item image="image2.jpg"]
Cras mattis consectetur purus sit amet fermentum.
[/g-carousel-item]

[g-carousel-item image="image3.jpg"]
Cras mattis consectetur purus sit amet fermentum.
[/g-carousel-item]
[/g-carousel]

Read the component documentation

Collapse

Code definition

[g-collapse id="collapse1" name=collapse1 button_label="Collapse" attributes="aria-expanded:false,aria-controls:collapse"]
[g-well name=well2]
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
[/g-well]
[/g-collapse]

Read the component documentation

Dropdown

Code definition

[g-dropdown name=dropdown1 label="Dropdown"]
    [g-dropdown-item icon_type="fontawesome" ]
        [g-link url="http://example.com" menu="Products" icon="cog"][/g-link]
        [g-link url="http://example.com" menu="Contacts" icon="gavel"][/g-link]
    [/g-dropdown-item]
[/g-dropdown]

Read the component documentation

Jumbotron

Code definition

[g-jumbotron name="jumbotron1" image="image1.jpg"]
# Gravstrap theme

Gravstrap Theme helps you to start a new Grav CMS site with Bootstrap support and several ready to use modules. It is also perfect to start a new Bootstrap custom theme, to create your unique design.

[/g-jumbotron]

Read the component documentation

List group

Code definition

[g-listgroup name=listgroup1]

[g-listgroup-item badge=12 active=true]
Cras mattis consectetur purus sit amet fermentum.
[/g-listgroup-item]

[g-listgroup-item badge=15]
Cras mattis consectetur purus sit amet fermentum.
[/g-listgroup-item]

[g-listgroup-item disabled=true]
Cras mattis consectetur purus sit amet fermentum.
[/g-listgroup-item]

[g-listgroup-item badge=2]
Cras mattis consectetur purus sit amet fermentum.
[/g-listgroup-item]
[/g-listgroup]

Read the component documentation

Modal component

Launch demo modal

Please note that here the button is just used to launch the modal.

Code definition

[g-modal id="modal" name="modal" title="Awesome"]
Cras **mattis** consectetur purus sit amet fermentum.

[g-modal-buttons]
[g-button button_type="primary" button_label="Click Me" remove=true][/g-button]
[g-button button_label="Close Me" button_attributes="data-dismiss:modal"][/g-button]
[/g-modal-buttons]

[/g-modal]

Read the component documentation

Navbar component

Code definition

[g-navbar id="navbar3" name="navbar3" centering=none brand_text="Gravstrap theme"]
    [g-navbar-menu name=menu00 alignment="center" submenu="internal,components"][/g-navbar-menu]    
    [g-navbar-menu name=menu01 icon_type="fontawesome" alignment="right" attributes="class: my-class,rel:my-rel"]
        [g-link url="https://facebook.com/gravstrap" icon_type="fontawesome" icon="facebook"][/g-link]
        [g-link url="https://twitter.com/gravstrap" icon="twitter"][/g-link]
        [g-link url="https://github.com/giansi/gravstrap" icon="github"][/g-link]
    [/g-navbar-menu]
[/g-navbar]

Read the component documentation

Page header

Code definition

[g-pageheader title="Title" subtitle="Subtitle"][/g-pageheader]

Read the component documentation

Panel

Code definition

[g-panel heading_title="Title"]
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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
[/g-panel]

Read the component documentation

Progressbar

Code definition

[g-progressbar label="Php" type="success" value="80" min="0" max="100"][/g-progressbar]

Read the component documentation

Splitbutton

Code definition

[g-splitbutton name=splitbutton1 label="Splitbutton" type=primary]
    [g-splitbutton-item icon_type="fontawesome" ]
        [g-link url="http://example.com" menu="Twitter" icon="twitter"][/g-link]
        [g-link url="http://example.com" menu="Facebook" icon="facebook"][/g-link]
    [/g-splitbutton-item]
[/g-splitbutton]

Read the component documentation

Tab

• tab_item1
• tab_item2

Code definition

[g-tab name=tab1 attributes="class:myclass,rel:myrel"]

[g-tab-item name="tab_item1" attributes="class:myclass,rel:myrel"]
**Cras mattis** consectetur purus sit amet fermentum.
[/g-tab-item]

[g-tab-item name="tab_item2"]
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
[/g-tab-item]

[/g-tab]

Read the component documentation

Thumbnail

Linked thumbnail:

[g-thumbnail name=thumbnail1]
[g-thumbnail-item image="image1.jpg" url="http://diblas.net"][/g-thumbnail-item]
[g-thumbnail-item image="image2.jpg" url="http://diblas.net"][/g-thumbnail-item]
[g-thumbnail-item image="image3.jpg" url="http://diblas.net"][/g-thumbnail-item]
[/g-thumbnail]

Thumbnails with contents:

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Take this action

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Take this action

[g-thumbnail name=thumbnail2]
[g-thumbnail-item image="image1.jpg" class="col-md-6"]
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

[Take this action](#) {.btn .btn-primary}
[/g-thumbnail-item]

[g-thumbnail-item image="image2.jpg" class="col-md-6"]
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

[Take this action](#) {.btn .btn-danger}
[/g-thumbnail-item]

[/g-thumbnail]

Read the component documentation

Well

Code definition

[g-well name=well1]
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
[/g-well]

Read the component documentation