Components

Modal

Work on Template

Structure code

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"> Modal body.. </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div>

Tooltips

Work on Template

Hover over me

Structure code

<a href="#" data-toggle="tooltip" title="Lorem Ipsum is simply dummy text">Hover over me</a>

Popovers

Work on Template

Structure code

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Popover on top"> Popover on top </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Popover on right"> Popover on right </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Popover on bottom"> Popover on bottom </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Popover on left"> Popover on left </button>

Toasts

Work on Template

Toast Header 5 mins ago
Some text inside the toast body

Structure code

<div class="toast" data-autohide="false"> <div class="toast-header"> <strong class="mr-auto text-primary">Toast Header</strong> <small class="text-muted">5 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button> </div> <div class="toast-body"> Some text inside the toast body </div> </div>

Blockquotes

Work on Editor(source code)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Structure code

<blockquote> <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <div class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></div> </blockquote>

Scrollspy

Work on Template

@fat

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

Structure code

<nav id="navbar-example2" class="navbar navbar-light bg-light border"> <a class="navbar-brand" href="#">Navbar</a> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link" href="#fat">@fat</a> </li> <li class="nav-item"> <a class="nav-link" href="#mdo">@mdo</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#one">one</a> <a class="dropdown-item" href="#two">two</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#three">three</a> </div> </li> </ul> </nav> <div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example" style=" position: relative; height: 200px; margin-top: 0.5rem; overflow: auto;"> <h4 id="fat">@fat</h4> <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p> <h4 id="mdo">@mdo</h4> <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p> <h4 id="one">one</h4> <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p> <h4 id="two">two</h4> <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p> <h4 id="three">three</h4> <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p> </div>

Media object

Work on Editor(Source code)

Top-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Center-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Bottom-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Structure code

<div class="media"> <img class="align-self-start mr-3" style="width: 60px;" src="img_avatar1.png" alt="" /> <div class="media-body"> <h5 class="mt-0">Top-aligned media</h5> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div> <div class="media"> <img class="align-self-center mr-3" style="width: 60px;" src="img_avatar1.png" alt="" /> <div class="media-body"> <h5 class="mt-0">Center-aligned media</h5> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> <p class="">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div> <div class="media"> <img class="align-self-end mr-3" style="width: 60px;" src="img_avatar1.png" alt="" /> <div class="media-body"> <h5 class="mt-0">Bottom-aligned media</h5> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div>

Filters

Work on Template

Filter data table comes form editor

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
Anja Ravendale [email protected]

Note: We need to put one script for filters which is shown to structure code widget

Structure code

<input class="form-control" id="myInput" type="text" placeholder="Search.."> <table class="table table-bordered"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody id="myTable"> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@mail.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@greatstuff.com</td> </tr> <tr> <td>Anja</td> <td>Ravendale</td> <td>a_r@test.com</td> </tr> </tbody> </table> <p><strong>Here is the script for Filters</strong><p> <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script>

Nav Tabs

Work on Template

Home tab content...
Profile tab content...
Contact tab content...

Structure code

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">Home tab content...</div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Profile tab content...</div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">Contact tab content...</div> </div>

Badges

Work on Editor(Source code)

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Structure code

<h1>Example heading <span class="badge badge-secondary">New</span></h1> <h2>Example heading <span class="badge badge-secondary">New</span></h2> <h3>Example heading <span class="badge badge-secondary">New</span></h3> <h4>Example heading <span class="badge badge-secondary">New</span></h4> <h5>Example heading <span class="badge badge-secondary">New</span></h5> <h6>Example heading <span class="badge badge-secondary">New</span></h6>

Progress

Work on Editor(Source code)

Structure code

<div class="progress my-2"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress my-2"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress my-2"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress my-2"> <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress my-2"> <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>

Card

Work on Editor(Source code)

Card image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Structure code

<article class="card"> <img class="card-img-top" src="..." alt="Card image cap" /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-secondary btn-sm">Go somewhere</a> </div> </article>

Event Card

Work on Template

Structure code

<article class="card card-events bg-gray-mystic position-relative p-2"> <div class="image card-img-top position-relative"> <a href="#"> <img class="w-100 card-img" src="..." alt="Event" /> </a> </div> <div class="card-body details w-100 py-2 px-0"> <div class="inner-text"> <div class="top-panel mt-2"> <div class="top-panel-lft"> <div class="ribbon bg-primary text-white px-4 py-2"> <i class="fas fa-calendar-alt mr-1" aria-hidden="true"></i> December 08, 2022 <br> <i class="fas fa-clock mr-1" aria-hidden="true"></i> 01:00 PM </div> </div> </div> <div class="bottom-panel mt-3"> <div class="bottom-panel-rgt"> <i class="fas fa-user text-purple-deluge" aria-hidden="true"></i> Peter McHugh </div> <div class="bottom-panel-lft"> <i class="fas fa-map-marker-alt text-purple-deluge" aria-hidden="true"></i> Google Meet </div> </div> <div class="inner-cont py-3 float-none d-inline-block w-100"> <h4 class="font-weight-bold mb-0"><a href="#">Holiday Trivia</a></h4> </div> </div> <div class="card-footer p-0 w-100 border-0"> <a class="text-green-accessible chevron-link read-more mt-3" href="#">Read more</a> </div> </div> </article>

TAG Card

Work on Template

Latest News
Freedom of Flavors

Card title

18 February 2022

Card Description

Structure code

<article class="card card-news-tags border-0"> <div class="card-image-panel position-relative"> <div class="card-img-top position-relative overflow-hidden"> <a href="#"> <img src="..." alt="Latest News" /> </a> </div> <div class="card-tag badge-primary py-1 px-3">Post Tag</div> </div> <div class="card-body p-4 details position-relative text-dark"> <div class="cont"> <h4> <a class="text-dark" href="#">Card title</a> </h4> <h6 class="date float-none d-inline-block text-uppercase my-3"> 18 February 2022 </h6> <p class="mb-0">Card Description</p> </div> </div> </article>

News Card

Work on Template

News card image
September 08, 2022

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Structure code

<article class="card card-news shadow"> <div class="card-img-top position-relative overflow-hidden p-0"> <a href="#"> <img src="..." alt="News card image" /> </a> </div> <div class="card-body position-relative p-4 text-dark"> <h6 class="post-date bg-secondary px-4 py-3 font-weight-bold mt-n5 w-auto float-left"> <i class="far fa-calendar-alt mr-1" aria-hidden="true"></i> September 08, 2022 </h6> <h3 class="my-3 w-100 "> <a class="text-secondary" href="#">Card title</a> </h3> <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p> <p class="mt-2"> <a class="btn btn-sm btn-secondary" href="#">Go somewhere</a> </p> </div> </article>

Gallery Card

Work on Template

Gallery cards image

Card title

18 February 2022

Some quick example text to build on the card title and make up the bulk of the card's content.

Structure code

<article class="card card-gallery shadow"> <div class="card-img-top"> <a href="#"> <img class="" src="..." alt="Gallery cards image" /> </a> </div> <div class="card-body details position-relative p-4"> <div class="cont"> <h4 class="mb-0"> <a class="text-dark" href="#">Card title</a> </h4> <h6 class="date float-none d-inline-block text-uppercase my-3"> 18 February 2022 </h6> <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </article>

Do you like this page?