Flyout Demo

Lipsum .... .... ....

Webpack Bootstrap 4 UI Demo

Lightbox Demo

Loading data

Load an Image
Load JSON


Load Partial AJAX HTML
Not Found test

Embeds

Embed Youtube link
Embed Vimeo link
Embed SoundCloud link
Embed Instagram

Other

Use [data-toggle="lightbox"] attribute to attach lightbox action and [href] to specify URL.

Use [data-gallery="YOUR_GALLERY_NAME"] to group ligthboxes with next/prev arrows

Use [data-toggle="lightbox"] + [data-href] attribute to toggle lightbox on regular elements. Click me!

Content Demo

Quick start

  1. Clone quick start repository

    git clone https://github.com/a2nt/webpack-bootstrap-ui-kit-quick-start.git

  2. Install npm packages

    				cd ./webpack-bootstrap-ui-kit-quick-start.git
				npm install

  3. Edit ./src files

  4. Start development server at https://127.0.0.1:8001/:

    yarn start

    Compile:

    yarn build

Header #2

Test ImageContent Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  1. First
    • First
    • Second
      1. First
      2. Second
      3. Third
      • First
      • Second
      • Third

    • Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  2. {paragraph} Second

    {paragraph} Second #2

  3. Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Responsive Table #1: Default

Header #1Header #2Header #3
#1-1#1-2#1-3
#2-1#2-2#2-3
#3-1#3-2#3-3

Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Responsive Table #2: Border-less

Header #1Header #2Header #3
#1-1#1-2#1-3
#2-1#2-2#2-3
#3-1#3-2#3-3

Content Header

Some content ...
Some kind image
Some kind image
Some kind image
Some kind image

Accordion demo

Some content ...

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Find Location

Use _consts.js to change Google Maps to Mapbox.

Office #1
17 Lakeside Drive
U
Get Directions »
Office #2
Flower Hill Cemetery
N
Get Directions »
Office #3
555 Phoenix Road
U
Get Directions »
Office #4
15 East Hadley Road
U
Get Directions »