Quickly get a project started with our pre-made landing pages, save time and get inspired.

devices mock up

Huge collection of Bootstrap 4 UI Components, easier to install and customisable using SCSS.

features
Clean & Unique

ZKIN Comes with a lots of unique and useful features, smart and practical use of variables.

features
Quickly start

Quickly get a project started with essential components of Bootstrap 4 including unique skin.

features
Easy to use

Fully restyled default Bootstrap functionality. Easier to install and customisable using SCSS.

features
Extra elements

Includes extra components to help you building impressive websites and applications.

A beautiful premium

Bootstrap 4 UI Kit

Massive Bootstrap 4 Skin with a lots of unique and useful features, smart and practical use of variables. ZKIN comes with essential components of Bootstrap 4 that fully restyled default functionality, also includes extra components such as meta component, section title, dividers and more to help you building impressive websites and applications. ZKIN is an excellent choice for starting work on your new project.

Theme Colors

Many of Bootstrap’s various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets. We use a subset of all colors to create a smaller color palette for generating color schemes.

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Shadows

Add or remove shadows to elements with box-shadow utilities, you can quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and four default sizes (which have associated variables to match).

No shadow
Small shadow
Regular shadow
Medium shadow
Larger shadow

Headings

All HTML headings, <h1> through <h6>, are available.

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading-a larger, slightly more opinionated heading style.

Display 1

Display 2

Display 3

Display 4

Blockquote

For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote. Add a <footer class="blockquote-footer"> for identifying the source. Wrap the name of the source work in <cite>, also use text utilities as needed to change the alignment of your blockquote.

Lorem ipsum dolor sit nare neca ectetur adipiscine gravida.

Someone famous in Source Title

Lorem ipsum dolor sit nare neca ectetur adipiscine arcu rutrum gravida.

Someone famous in Source Title

Lorem ipsum dolor sit nare neca ectetur adipiscine gravida.

Someone famous in Source Title

Lorem ipsum dolor sit nare neca ectetur adipiscine arcu rutrum gravida.

Someone famous in Source Title

Lorem ipsum dolor sit nare neca ectetur adipiscine gravida.

Someone famous in Source Title

Lorem ipsum dolor sit nare neca ectetur adipiscine arcu rutrum gravida.

Someone famous in Source Title

Images

Examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them-all via classes.

Responsive image
Image default

Image default

Image rounded

Image rounded

Image rounded circle

Image rounded circle

Image thumbnail

Image thumbnail

Image square shadow

Image square shadow

Image circle shadow

Image circle shadow

Tables

Examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin.

Badges

Examples for badges, our small count and labeling component. Badges scale to match the size of the immediate parent element by using relative font sizing and em units, also can be used as part of links or buttons to provide a counter.

Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark

Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Sizes

Types

Social media

Icon buttons

Button group

Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.

Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

Featured
Special title treatment

Maecenas a rutrum nunc. Integer aliquet magna non tellus volutpat, quis pretium neque iaculis cras laoreet tellus urna bibendum commodo.

Go somewhere
Featured
Special title treatment

Maecenas a rutrum nunc. Integer aliquet magna non tellus volutpat, quis pretium neque iaculis cras laoreet tellus urna bibendum commodo.

Go somewhere
Featured
Special title treatment

Maecenas a rutrum nunc. Integer aliquet magna non tellus volutpat, quis pretium neque iaculis cras laoreet tellus urna bibendum commodo.

Go somewhere

Lorem ipsum dolor ectetur gravida.

John DOe

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Featured

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Phasellus viverra arcu

Maecenas a rutrum nunc. Integer aliquet magna intellus volutpat quis pretium neque iaculis cras laoreet tellus bibendum commodo diam vitae convallis luctus massa augue vestibulum.

Go somewhere
Fusce maecenas mauris

Convallis laoreet tellus a rna bibendum commodo iaculis ligula commodo etiam convallis ante quis interdum urna aliquam eget nisl laoreet sollicitudin dolor magna gravida libero.

Go somewhere
Aliquam commodo diam

Nullam fringilla erat ut nulla volutpat, eget tempor leo sagittis. Vestibulum sodales luctus nunc, et lobortis leo hendrerit sed id ultrices mauris suscipit lectus praesent luctus tellus.

Go somewhere
Phasellus viverra arcu

Maecenas a rutrum nunc. Integer aliquet magna intellus volutpat quis pretium neque iaculis cras laoreet tellus bibendum commodo diam vitae convallis luctus massa augue vestibulum.

Go somewhere
Fusce maecenas mauris

Convallis laoreet tellus a rna bibendum commodo iaculis ligula commodo etiam convallis ante quis interdum urna aliquam eget nisl laoreet sollicitudin dolor magna gravida libero.

Go somewhere
Aliquam commodo diam

Nullam fringilla erat ut nulla volutpat, eget tempor leo sagittis. Vestibulum sodales luctus nunc, et lobortis leo hendrerit sed id ultrices mauris suscipit lectus praesent luctus tellus.

Go somewhere
Card image

Fusce pretium

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Go somewhere
Card image

Fusce pretium

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Go somewhere

Card background and color

Lorem ipsum cursus ectetur gravida.

John Arthur

Cras in fringilla egestas condimentum morbi ut urna nec nunc.

Lorem ipsum cursus ectetur gravida.

John Casey

Cras in fringilla egestas condimentum morbi ut urna nec nunc.

Lorem ipsum cursus ectetur gravida.

Cindy Davis

Cras in fringilla egestas condimentum morbi ut urna nec nunc.

Lorem ipsum cursus ectetur gravida.

John Arthur

Cras in fringilla egestas condimentum morbi ut urna nec nunc.

Lorem ipsum cursus ectetur gravida.

John Casey

Cras in fringilla egestas condimentum morbi ut urna nec nunc.

Lorem ipsum cursus ectetur gravida.

Cindy Davis

Cras in fringilla egestas condimentum morbi ut urna nec nunc.

Lorem ipsum cursus ectetur gravida.

John Arthur

Cras in fringilla egestas condimentum morbi ut urna nec nunc.

Lorem ipsum cursus ectetur gravida.

John Casey

Cras in fringilla egestas condimentum morbi ut urna nec nunc.

Lorem ipsum cursus ectetur gravida.

Cindy Davis

Cras in fringilla egestas condimentum morbi ut urna nec nunc.

Gallery cards

Blog cards

Card blog
Aliquam neca sapien

Morbi ut urna nec nunc pretium iaculis duis porta dui vel dictum tortor lectus iaculis dui quis volutpat eros

Lorem ipsum cursus ectetur gravida.

John Casey

Cras in fringilla egestas condimentum morbi ut urna nec nunc.

Vivamus erat neque

Morbi ut urna nec nunc pretium iaculis duis porta dui vel dictum tortor lectus iaculis dui quis volutpat eros

Card blog
Morbi urna sapien

Morbi ut urna nec nunc pretium iaculis duis porta dui vel dictum tortor lectus iaculis dui quis volutpat eros

Card blog
Mauris dolor lacus

Morbi ut urna nec nunc pretium iaculis duis porta dui vel dictum tortor lectus iaculis dui quis volutpat eros

Price table cards

$
49
/ year
Basic
  • Lorem ipsum dolor
  • Aliquam ullamcorper
  • Maecenas rutrum nunc
  • Vestibulum ante
  • Morbi nunc pretium
Purchase
$
79
/ year
Standard
  • Lorem ipsum dolor
  • Aliquam ullamcorper
  • Maecenas rutrum nunc
  • Vestibulum ante
  • Morbi nunc pretium
Purchase
$
99
/ year
Premium
  • Lorem ipsum dolor
  • Aliquam ullamcorper
  • Maecenas rutrum nunc
  • Vestibulum ante
  • Morbi nunc pretium
Purchase
$
119
/ year
Diamond
  • Lorem ipsum dolor
  • Aliquam ullamcorper
  • Maecenas rutrum nunc
  • Vestibulum ante
  • Morbi nunc pretium
Purchase
$
49
/ year
Basic
  • Lorem ipsum dolor
  • Aliquam ullamcorper
  • Maecenas rutrum nunc
  • Vestibulum ante
  • Morbi nunc pretium
Purchase
$
79
/ year
Standard
  • Lorem ipsum dolor
  • Aliquam ullamcorper
  • Maecenas rutrum nunc
  • Vestibulum ante
  • Morbi nunc pretium
Purchase
$
99
/ year
Premium
  • Lorem ipsum dolor
  • Aliquam ullamcorper
  • Maecenas rutrum nunc
  • Vestibulum ante
  • Morbi nunc pretium
Purchase
$
119
/ year
Diamond
  • Lorem ipsum dolor
  • Aliquam ullamcorper
  • Maecenas rutrum nunc
  • Vestibulum ante
  • Morbi nunc pretium
Purchase

Social feed cards

Card feed
Facebook
author avatar
14 June 2020

Morbi ut urna nec nunc pretium iaculis duis porta dui vel dictum tortor lectus iaculis dui quis volutpat eros

Card feed
Youtube
author avatar
14 June 2020
Rhoncus neca sodales

Morbi ut urna nec nunc pretium iaculis duis porta dui vel dictum tortor lectus iaculis dui quis volutpat eros

Card feed
Facebook
author avatar
14 June 2020

Morbi ut urna nec nunc pretium iaculis duis porta dui vel dictum tortor

Facebook
author avatar
14 June 2020

Morbi ut urna nec nunc pretium iaculis duis porta dui vel dictum tortor lectus iaculis dui quis volutpat eros

Card feed
Twitter
author avatar
14 June 2020

Morbi ut urna nec nunc pretium iaculis duis porta dui vel dictum tortor lectus iaculis dui quis yourdomain.com

Card feed
Google Plus
author avatar
14 June 2020

Morbi ut urna nec nunc pretium iaculis duis porta dui vel dictum tortor lectus iaculis dui quis volutpat eros

Card feed
Pinterest
author avatar
14 June 2020
Aenean nec dolor vitae

Morbi ut urna nec nunc pretium iaculis duis porta dui vel dictum tortor lectus iaculis dui quis volutpat eros

Twitter
author avatar
14 June 2020

Morbi ut urna nec nunc pretium iaculis duis porta dui vel dictum tortor lectus iaculis dui quis yourdomain.com

Card feed
Instagram
author avatar
14 June 2020

Morbi ut urna nec nunc pretium iaculis duis porta dui vel dictum lectus.

Plain cards

Card blog
Aliquam neca sapien

Morbi ut urna nec nunc pretium iaculis duis porta dui vel dictum tortor lectus iaculis dui quis volutpat eros

Lorem ipsum cursus ectetur gravida.

John Casey

Cras in fringilla egestas condimentum morbi ut urna nec nunc.

Card feed
Facebook
author avatar
14 June 2020

Morbi ut urna nec nunc pretium iaculis duis porta dui vel dictum tortor lectus iaculis dui quis volutpat eros

Vivamus erat neque

Morbi ut urna nec nunc pretium iaculis duis porta dui vel dictum tortor lectus iaculis dui quis volutpat eros

Card blog
Morbi urna sapien

Morbi ut urna nec nunc pretium iaculis duis porta dui vel dictum tortor lectus iaculis dui quis volutpat eros

Card feed
Youtube
author avatar
14 June 2020
Rhoncus neca sodales

Morbi ut urna nec nunc pretium iaculis duis porta dui vel dictum tortor lectus iaculis dui quis volutpat eros

Facebook
author avatar
14 June 2020

Praesent nec luctus tellus etiam cursus sae sapien in facilisis vestibulum convallis

Card feed
Google Plus
author avatar
14 June 2020

Morbi ut urna nec nunc pretium iaculis duis porta dui vel dictum tortor lectus iaculis dui quis volutpat eros

Carousel

A slideshow component for cycling through elements-images or slides of text-like a carousel. The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

Accordion

Using the card component, you can extend the default collapse behavior to create an accordion.

Accordion default

Collapsible Group Item
Lorem ipsum dolor sit amet, consectetur adipiscing elit nec mauris magna, lacinia ac purus quis, rutrum bibendum leo. Nullam sit amet nibh eu odio ornare laoreet. Duis imperdiet est ut tristique auctor mattis condimentum ultricies.
Collapsible Group Item
Nullam fringilla erat ut nulla volutpat tempor leo sagittis semper vestibulum sodales luctus nunc, et lobortis leo hendrerit nec rhocus ultrices mauris, at suscipit lectus. Praesent nec luctus tellus. Etiam cursus nec sapien vel facilisis.
Collapsible Group Item
Donec tellus faucibus lobortis viverra nec blandit at justo molestie dolor turpis, lobortis sodales felis sed, hendrerit fermentum quama fusce mattis nibh nulla, in aliquam lorem semper eget etiam dolor amet vehicula lorem massa.

Accordion minimal

Collapsible Group Item
Lorem ipsum dolor sit amet, consectetur adipiscing elit nec mauris magna, lacinia ac purus quis, rutrum bibendum leo. Nullam sit amet nibh eu odio ornare laoreet. Duis imperdiet est ut tristique auctor mattis condimentum ultricies.
Collapsible Group Item
Nullam fringilla erat ut nulla volutpat tempor leo sagittis semper vestibulum sodales luctus nunc, et lobortis leo hendrerit nec rhocus ultrices mauris, at suscipit lectus. Praesent nec luctus tellus. Etiam cursus nec sapien vel facilisis.
Collapsible Group Item
Donec tellus faucibus lobortis viverra nec blandit at justo molestie dolor turpis, lobortis sodales felis sed, hendrerit fermentum quama fusce mattis nibh nulla, in aliquam lorem semper eget etiam dolor amet vehicula lorem massa.

Accordion default

Collapsible Group Item
Lorem ipsum dolor sit amet, consectetur adipiscing elit nec mauris magna, lacinia ac purus quis, rutrum bibendum leo. Nullam sit amet nibh eu odio ornare laoreet. Duis imperdiet est ut tristique auctor mattis condimentum ultricies.
Collapsible Group Item
Nullam fringilla erat ut nulla volutpat tempor leo sagittis semper vestibulum sodales luctus nunc, et lobortis leo hendrerit nec rhocus ultrices mauris, at suscipit lectus. Praesent nec luctus tellus. Etiam cursus nec sapien vel facilisis.
Collapsible Group Item
Donec tellus faucibus lobortis viverra nec blandit at justo molestie dolor turpis, lobortis sodales felis sed, hendrerit fermentum quama fusce mattis nibh nulla, in aliquam lorem semper eget etiam dolor amet vehicula lorem massa.

Accordion minimal

Collapsible Group Item
Lorem ipsum dolor sit amet, consectetur adipiscing elit nec mauris magna, lacinia ac purus quis, rutrum bibendum leo. Nullam sit amet nibh eu odio ornare laoreet. Duis imperdiet est ut tristique auctor mattis condimentum ultricies.
Collapsible Group Item
Nullam fringilla erat ut nulla volutpat tempor leo sagittis semper vestibulum sodales luctus nunc, et lobortis leo hendrerit nec rhocus ultrices mauris, at suscipit lectus. Praesent nec luctus tellus. Etiam cursus nec sapien vel facilisis.
Collapsible Group Item
Donec tellus faucibus lobortis viverra nec blandit at justo molestie dolor turpis, lobortis sodales felis sed, hendrerit fermentum quama fusce mattis nibh nulla, in aliquam lorem semper eget etiam dolor amet vehicula lorem massa.

Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin. Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin.

Forms and Input group

Examples form control styles, layout options, input group and custom components for creating a wide variety of forms. Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Inputs

Select

File browser

Input group icon

Addon

@example.com
@example.com

Search

Icon with button

Icon with dropdown

Custom file input

Upload
Upload

Checkboxes

Radio Buttons

Switches

Textarea

Inputs

Select

File browser

Input group icon

Addon

@example.com
@example.com

Search

Icon with button

Icon with dropdown

Custom file input

Upload
Upload

Checkboxes

Radio Buttons

Switches

Textarea

Jumbotron

A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

Modal

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Navs

Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style. The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.

Tabs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with tab JavaScript plugin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit mauris magna lacinia ac purus quis, rutrum bibendum leo. Nullam sit amet nibh eu odio ornare laoreet duis imperdiet est ut tristique auctor. Suspendisse mattis condimentum ultricies.
Vestibulum tincidunt facilisis ultrices. Aliquam ullamcorper dolor et risus ultrices gravida. Maecenas a rutrum nunc. Integer aliquet magna non tellus volutpat, quis pretium neque iaculis. Cras laoreet tellus a urna bibendum commodo iaculis ligula.
Aenean et tortor vitae diam cursus ornare sit amet id mi. In tempor libero nec risus porta, in convallis purus pellentesque nulla facilisi sem nunc scelerisque, justo sit amet porta mollis, arcu diam sodales lectus, porttitor vestibulum velit enim a diam.
Lorem ipsum dolor sit amet adipiscing elit mauris magna, lacinia ac purus quis, rutrum bibendum leo nullam sit amet nibh eu odio ornare laoreet duis imperdiet est ut tristique auctor ullamcorper mattis condimentum ultricies in consectetur.
Vestibulum tincidunt ultrices ullamcorper dolor et risus ultrices gravida. Maecenas a rutrum nunc. Integer aliquet magna nec tellus volutpat, quis pretium neque iaculis. Cras laoreet tellus a urna bibendum, commodo iaculis ligula.
Aenean et tortor vitae diam cursus ornare amet in tempor libero risus porta, in convallis purus pellentesque nulla facilisi cursus turpis scelerisque, justo sit amet porta mollis, arcu in sodales lectus porttitor vestibulum velit enim dignissim viverra.
Lorem ipsum dolor sit amet adipiscing elit mauris magna, lacinia ac purus quis, rutrum bibendum leo nullam sit amet nibh eu odio ornare laoreet duis imperdiet est ut tristique auctor ullamcorper mattis condimentum ultricies in consectetur.
Vestibulum tincidunt ultrices ullamcorper dolor et risus ultrices gravida. Maecenas a rutrum nunc. Integer aliquet magna nec tellus volutpat, quis pretium neque iaculis. Cras laoreet tellus a urna bibendum, commodo iaculis ligula.
Aenean et tortor vitae diam cursus ornare amet in tempor libero risus porta, in convallis purus pellentesque nulla facilisi cursus turpis scelerisque, justo sit amet porta mollis, arcu in sodales lectus porttitor vestibulum velit enim dignissim viverra.

Tabs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with tab JavaScript plugin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit mauris magna lacinia ac purus quis, rutrum bibendum leo. Nullam sit amet nibh eu odio ornare laoreet duis imperdiet est ut tristique auctor. Suspendisse mattis condimentum ultricies.
Vestibulum tincidunt facilisis ultrices. Aliquam ullamcorper dolor et risus ultrices gravida. Maecenas a rutrum nunc. Integer aliquet magna non tellus volutpat, quis pretium neque iaculis. Cras laoreet tellus a urna bibendum commodo iaculis ligula.
Aenean et tortor vitae diam cursus ornare sit amet id mi. In tempor libero nec risus porta, in convallis purus pellentesque nulla facilisi sem nunc scelerisque, justo sit amet porta mollis, arcu diam sodales lectus, porttitor vestibulum velit enim a diam.
Lorem ipsum dolor sit amet adipiscing elit mauris magna, lacinia ac purus quis, rutrum bibendum leo nullam sit amet nibh eu odio ornare laoreet duis imperdiet est ut tristique auctor ullamcorper mattis condimentum ultricies in consectetur.
Vestibulum tincidunt ultrices ullamcorper dolor et risus ultrices gravida. Maecenas a rutrum nunc. Integer aliquet magna nec tellus volutpat, quis pretium neque iaculis. Cras laoreet tellus a urna bibendum, commodo iaculis ligula.
Aenean et tortor vitae diam cursus ornare amet in tempor libero risus porta, in convallis purus pellentesque nulla facilisi cursus turpis scelerisque, justo sit amet porta mollis, arcu in sodales lectus porttitor vestibulum velit enim dignissim viverra.
Lorem ipsum dolor sit amet adipiscing elit mauris magna, lacinia ac purus quis, rutrum bibendum leo nullam sit amet nibh eu odio ornare laoreet duis imperdiet est ut tristique auctor ullamcorper mattis condimentum ultricies in consectetur.
Vestibulum tincidunt ultrices ullamcorper dolor et risus ultrices gravida. Maecenas a rutrum nunc. Integer aliquet magna nec tellus volutpat, quis pretium neque iaculis. Cras laoreet tellus a urna bibendum, commodo iaculis ligula.
Aenean et tortor vitae diam cursus ornare amet in tempor libero risus porta, in convallis purus pellentesque nulla facilisi cursus turpis scelerisque, justo sit amet porta mollis, arcu in sodales lectus porttitor vestibulum velit enim dignissim viverra.

Navbar

Examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

Pagination

Examples for showing pagination to indicate a series of related content exists across multiple pages. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.

Popovers

Examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Progress

Examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

Progress thick

Photography80%
Graphic design90%
Web design80%
Multimedia70%

Progress thick rounded

Photography80%
Graphic design90%
Web design80%
Multimedia70%

Progress thin

Photography80%
Graphic design90%
Web design80%
Multimedia70%

Progress thick

Photography80%
Graphic design90%
Web design80%
Multimedia70%

Progress thick rounded

Photography80%
Graphic design90%
Web design80%
Multimedia70%

Progress thin

Photography80%
Graphic design90%
Web design80%
Multimedia70%

Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.

Tooltips

Examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

Quickly build your impressive website with ZKIN, Bootstrap 4 UI components pack including a lots of unique components and useful features.