Vue Bootstrap Components - examples & tutorial

Buttons

Basic buttons

Additional buttons

Gradient buttons

Outline buttons

Rounded buttons

Rounded outline buttons

Floating buttons

Sizes

Checkbox and Radio buttons

Checkbox 1 (pre-checked) Checkbox 2 Checkbox 3

Radio 1 (preselected) Radio 2 Radio 3

Social Buttons

Full name social buttons

Simple social buttons

Floating social buttons

Full name social counters

22 22 22 22 22 22 22 22 22 22 22 22 22 22

Simple social counters

22 22 22 22 22 22 22 22 22 22 22 22 22 22

Social icons

Cards

Cascading cards

Alison Belmont

Graffiti Artist

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Culinary

Cheat day inspirations

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.

Button

Billy Coleman

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Cascading panels

Ally Cook

Follow me

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.

Title of the news

26.07.2017

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex minis recusandae. Facere modi sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium veritatis sequi.Ut enim ad minima veniam, quis nostrum.

Marta

Deserve for her own card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.

Reversed cascade card

My adventure

Photography

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem perspiciatis voluptatum a, quo nobis, non commodi quia repellendus sequi nulla voluptatem dicta reprehenderit, placeat laborum ut beatae ullam suscipit veniam.

Cards with action button

Card title

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

05/10/2015
12
21
5

Card title

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

Button

Card title

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

Testimonial cards

Anna Doe

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci

Anna Doe

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci

Image overlay cards

Marketing

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project

Software

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project

Rotating cards

Jonathan Doe

Web developer

Click here to rotate

About me

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?

Click here to rotate back

Maria Portman

Web designer

Click here to rotate

About me

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?

Click here to rotate back

Anna Smith

Photographer

Click here to rotate

About me

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?

Click here to rotate back

Ecommerce

Product cards

Shirt

Denim shirt NEW

120$

Sport wear

Sweatshirt

139$

Sport wear

Grey blouse bestseller

99$

Outwear

Black jacket

219$

Camera

GoPro

Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit.

1439$

Photography

Camera

Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit.

1160$

Smartphone

iPhone 6S

Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit.

2160$

Red trousers

Sweatshirt

Accessories

Sweatshirt

Inputs

Input fields

Basic example

Small input

Example label

Prefilling text inputs

Disabled input

Type your email

Type your password

Error or Success Messages

Type your email

Type your password

Textarea

Basic textarea

Icon Prefix

Checkboxes and Radio

Classic checkbox

Filled-in checkbox

Option 1

Option 2

Option 3

Off On

File input

Range

Character counters

Input text

Type your text

Navbars

Breadcrumbs

Forms

Forms with header

Login:

Your email

Your password

Register:

Your name

Your email

Your password

Forms without header

Login:

Your email

Your password

Subscribe:

We'll write rarely, but only the best content.

Your name

Your email

Naked forms

Login:

Your email

Your password

Write to us:

We'll write rarely, but only the best content.

Your name

Your email

Subject

Icon Prefix

Or would you prefer to call?
+ 01 234 565 280

Elegant forms

Sign in

Your email

Your password

Forgot Password?

or Sign in with:

SIGN UP

Your email

Your password

Accept the Terms and Conditions

Have an account? Log in

Progress bars

Basic example

Contextual alternatives

Infinite loading

Circles

Tabs & Pills

Basic example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Active
Link
Link
Help

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Classic tabs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.