Bootstrap Elements - Components

Buttons

primary

secondary

success

danger

warning

                                        
<be-button type="primary">primary</be-button>
<be-button type="secondary">secondary</be-button>
<be-button type="success">success</be-button>
<be-button type="danger">danger</be-button>
<be-button type="warning">warning</be-button>

primary

secondary

                                        
<be-button type="primary" size="lg">primary</be-button>
<be-button type="secondary" size="sm">secondary</be-button>

primary

secondary

                                        
<be-button type="primary" size="lg" block="true">primary</be-button>
<be-button type="secondary" size="sm" block="true">secondary</be-button>

primary

secondary

                                        
<be-button type="primary"
active="true">primary</be-button>
<be-button type="secondary"
active="true">secondary</be-button>

primary

secondary

                                        
<be-button type="primary" disabled>primary</be-button>
<be-button type="secondary"
disabled>secondary</be-button>

single toggle

                                        
<be-button type="primary" toggle="true">single
toggle</be-button>

Alerts

A simple primary alert

A simple secondary alert

A warning dismissible alert

                                        
<be-alert type="primary">A simple primary alert</be-alert>
<be-alert type="secondary">A simple secondary alert</be-alert>
<be-alert type="warning" dismissible="true">A warning dismissible alert</be-alert>

Carousel

First Slide

Second Slide

Third Slide

                                        
<be-carousel>
    <div class="carousel-inner">
        <div class="carousel-item active">
         <div class="carousel-slide">First Slide</div>
        </div>
        <div class="carousel-item">
            <div class="carousel-slide">Second Slide</div>
        </div>
        <div class="carousel-item">
            <div class="carousel-slide">Third Slide</div>
        </div>    
    </div>
</be-carousel>

Crossfade

First Slide

Second Slide

Third Slide

                                        
<be-carousel crossfade="true">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="carousel-slide">First Slide</div>
        </div>
        <div class="carousel-item">
            <div class="carousel-slide">Second Slide</div>
        </div>
        <div class="carousel-item">
            <div class="carousel-slide">Third Slide</div>
        </div>
    </div>
</be-carousel>

Navigation

First Slide

Second Slide

Third Slide

                                        
<be-carousel>
<div class="carousel-inner">
    <div class="carousel-item active">
        <div class="carousel-slide">First Slide</div>
    </div>
    <div class="carousel-item">
        <div class="carousel-slide">Second Slide</div>
    </div>
    <div class="carousel-item">
        <div class="carousel-slide">Third Slide</div>
    </div>
</div>
<a class="carousel-control-prev" role="button"
data-slide="prev">
    <span class="carousel-control-prev-icon"
    aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" role="button"
data-slide="next">
    <span class="carousel-control-next-icon"
    aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>
</be-carousel>

Interval

First Slide

Second Slide

Third Slide

                                        
<be-carousel interval="500">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="carousel-slide">First Slide</div>
        </div>
        <div class="carousel-item">
            <div class="carousel-slide">Second Slide</div>
        </div>
        <div class="carousel-item">
            <div class="carousel-slide">Third Slide</div>
        </div>
    </div>
</be-carousel>

Collapse

Button with `toggletarget`

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

                                        
<be-button toggletarget="collapseExample"
type="primary">
Button with `toggletarget`
</be-button>
</be-collapsebutton>
<be-collapsible collapseid="collapseExample">
    <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
    terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
    labore wes anderson cred nesciunt sapiente ea proident.
    </div>
</be-collapsible>

Accordion

Collapsible Group Item #1

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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #2

Collapsible Group Item #3

                                        
<be-wrapper>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<be-button toggletarget="collapseOne" link="true">
Collapsible Group Item #1
</be-button>

</h5>
</div>
<be-collapsible collapseid="collapseOne"
show="true">
<div>
<div class="card-body">
...
</div>
</div>
</be-collapible>
</div>
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<be-button toggletarget="collapseTwo" link="true">
Collapsible Group Item #2
</be-button>

</h5>
</div>
<be-collapsible collapseid="collapseTwo">
<div aria-labelledby="headingTwo"
data-parent="#accordionExample">
<div class="card-body">
...
</div>
</div>
</be-collapible>
</div>
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<be-button toggletarget="collapseThree"
link="true">
Collapsible Group Item #3
</be-button>

</h5>
</div>
<be-collapsible collapseid="collapseThree">
<div aria-labelledby="headingOne" data-...
</div>
</div>
</be-collapible>
</div>
</div>
</be-wrapper>

Dropdown

primary

                                        
<be-dropdown>
    <be-button type="primary" toggletarget="dropdownmenu">primary</be-button>
        <be-dropdownmenu toggleid="dropdownmenu">
            <a class="dropdown-item" href="#" onclick="console.log('link clicked')">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </be-dropdownmenu>
</be-dropdown>

Modal

show modal

                                        
<be-button toggletarget="modal1" type="primary">show modal</be-button> 
<be-modal toggleid="modal1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <be-button toggletarget="modal1"  close="true">
                    <span aria-hidden="true">&times;</span>
                </be-button>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <be-button toggletarget="modal1" type="secondary">Close</be-button>
                <be-button type="primary">Save</be-button>
            </div>
        </div>
    </div>
</be-modal>

Popover

Click to toggle popover

                                            
<be-button type="primary" toggletarget="popover" popoverplacement="top" popovercontent="content" popovertitle="popover title" >Click to toggle popover</be-button>

                                
<be-tooltip placement="top" title="Tooltip on top">
    <button type="button" class="btn btn-secondary" >
        Tooltip on top
    </button>
</be-tooltip>
<be-tooltip placement="right" title="Tooltip on right">
    <button type="button" class="btn btn-secondary">
        Tooltip on right
    </button>
</be-tooltip>
<be-tooltip placement="bottom" title="Tooltip on bottom">
    <button type="button" class="btn btn-secondary">
        Tooltip on bottom
    </button>
</be-tooltip>
<be-tooltip placement="left" title="Tooltip on left">
    <button type="button" class="btn btn-secondary">
        Tooltip on left
    </button>
</be-tooltip>

Nav

Basic Nav

item 1

item 2

item 3

item 4

                                
<be-nav>
    <be-navitem>item 1</be-navitem>
    <be-navitem>item 2</be-navitem>
    <be-navitem>item 3</be-navitem>
    <be-navitem disabled="true">item 4</be-navitem>
</be-nav>

Justify Center

item 1

item 2

item 3

item 4

                                
<be-nav justifycontent="center">
    <be-navitem>item 1</be-navitem>
    <be-navitem>item 2</be-navitem>
    <be-navitem>item 3</be-navitem>
    <be-navitem disabled="true">item 4</be-navitem>
</be-nav>

Justify End

item 1

item 2

item 3

item 4

                                
<be-nav justifycontent="end">
    <be-navitem>item 1</be-navitem>
    <be-navitem>item 2</be-navitem>
    <be-navitem>item 3</be-navitem>
    <be-navitem disabled="true">item 4</be-navitem>
</be-nav>

Vertical

item 1

item 2

item 3

item 4

                                
<be-nav flexcolumn="true">
    <be-navitem>item 1</be-navitem>
    <be-navitem>item 2</be-navitem>
    <be-navitem>item 3</be-navitem>
    <be-navitem disabled="true">item 4</be-navitem>
</be-nav>

Tabs

item 1

item 2

item 3

item 4

                                
<be-nav tabs="true">
    <be-navitem active="true" tab="true">item 1</be-navitem>
    <be-navitem tab="true">item 2</be-navitem>
    <be-navitem tab="true">item 3</be-navitem>
    <be-navitem disabled="true" tab="true">item 4</be-navitem>
</be-nav>

Pills

item 1

item 2

item 3

item 4

                                
<be-nav pills="true">
    <be-navitem active="true" tab="true">item 1</be-navitem>
    <be-navitem tab="true">item 2</be-navitem>
    <be-navitem tab="true">item 3</be-navitem>
    <be-navitem disabled="true" tab="true">item 4</be-navitem>
</be-nav>

Fill

item 1

item 2

item 3

item 4

                                
<be-nav pills="true" fill="true">
    <be-navitem active="true" pill="true" fill="true">item 1</be-navitem>
    <be-navitem pill="true" fill="true">item 2</be-navitem>
    <be-navitem pill="true" fill="true">item 3</be-navitem>
    <be-navitem disabled="true" pill="true" fill="true">item 4</be-navitem>
</be-nav>

Fill and Justify

item 1

item 2

item 3
much longer

item 4

                                
<be-nav pills="true" fill="true">
    <be-navitem active="true" pill="true" fill="true" justified="true">item
    1</be-navitem>
    <be-navitem pill="true" fill="true" justified="true">item 2</be-navitem>
    <be-navitem pill="true" fill="true" justified="true">item 3<br>much
    longer</be-navitem>
    <be-navitem disabled="true" pill="true" fill="true" justified="true">item
    4</be-navitem>
</be-nav>

Tabs with dropdown

item 1

item 2

item 3

item 4

                                
<be-nav tabs="true">
    <be-navitem active="true" tab="true">item 1</be-navitem>
    <be-navitem tab="true">
        <be-dropdown>
            <be-button type="link" dropdown="true" nopadding="true" toggletarget="dropdownmenu">item 2</be-button>
            <be-dropdownmenu toggleid="dropdownmenu">
                <a class="dropdown-item" href="#"
                    onclick="console.log('link clicked')">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
            </be-dropdownmenu>
        </be-dropdown>
    </be-navitem>
    <be-navitem tab="true">item 3</be-navitem>
    <be-navitem disabled="true" tab="true">item 4</be-navitem>
</be-nav>

Dynamic Tabs

item 1

item 2

item 3

item 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac orci rhoncus, placerat odio id, sollicitudin erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus volutpat ipsum massa, in fermentum felis commodo eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vulputate rutrum pretium. Phasellus elementum dui eu leo pretium volutpat. Maecenas non posuere lacus. Nullam sagittis pulvinar sapien, a aliquam ligula luctus sed. Nam diam ante, aliquet a scelerisque vel, pharetra et nisi. Donec sagittis nunc nec velit fringilla imperdiet. Aenean suscipit leo sit amet leo tempus gravida.

In posuere, elit vitae semper scelerisque, lorem ligula cursus tellus, non commodo lorem odio quis erat. Proin nec fringilla nulla. Nam in eros eu magna vehicula hendrerit eget ac metus. Vestibulum a varius risus. Phasellus condimentum felis lectus. Praesent non tincidunt magna. Sed non nulla diam. Praesent nec libero ipsum. Quisque eu pellentesque enim, a vestibulum mi. Donec eu mi ut arcu facilisis mollis ac quis ligula. Nunc non tellus eget nibh bibendum tempus non vel ligula. Proin eros sem, tincidunt tincidunt placerat a, tincidunt non sapien. Proin consectetur nisl fermentum ligula iaculis, sit amet suscipit nisi tincidunt.

Cras fringilla dapibus quam, eu eleifend ante gravida nec. Ut cursus, dui sit amet placerat commodo, mauris nunc porta turpis, vel mattis orci turpis eget dolor. Vivamus eleifend, velit vel ullamcorper rhoncus, ligula velit euismod nisi, id suscipit diam lectus vitae arcu. Pellentesque vitae neque in lorem convallis lobortis. Duis vel metus velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at augue scelerisque, finibus mauris tincidunt, accumsan nisl. Vestibulum blandit urna sed porta rutrum. Vestibulum porta, felis sed sodales rhoncus, orci lacus tincidunt diam, sed cursus lorem diam id est.

                                
<be-nav tabs="true">
    <be-navitem active="true" tab="true" tagertid="tabpane1">item 1</be-navitem>
    <be-navitem tab="true" tagertid="tabpane2">item 2</be-navitem>
    <be-navitem tab="true" tagertid="tabpane3">item 3</be-navitem>
    <be-navitem disabled="true" tab="true" tagertid="tabpane4">item 4</be-navitem>
</be-nav>
<be-tabcontent tabpaneid="tabpane1">
    <be-tabpane paneid="tabpane1" show="true">hello world 1</be-tabpane>
    <be-tabpane paneid="tabpane2">hello world 2</be-tabpane>
    <be-tabpane paneid="tabpane3">hello world 3</be-tabpane>
</be-tabcontent>

Toast

Bootstrap 11 mins ago

Hello, world! This is a toast message.

                                    
<be-toast show="true">
    <div slot="header">
        <strong class="mr-auto">Bootstrap</strong>
        <small>11 mins ago</small>
    </div>
    <div slot="body">
        Hello, world! This is a toast message.
    </div>
</be-toast>