Top

Popular Search:

Installing Bootstrap

We have use bootstrap to design most of the components, make sure you install it and integrate with the project.

step 1:

npm install --save bootstrap

step 2:

In your main.ts file all the following code:

import 'bootstrap/dist/css/bootstrap.css'
import "bootstrap"
import "bootstrap/dist/js/bootstrap.min.js";

Basic UI Elements

Buttons Preview link

Inside Your template tags add

<button class="btn " :class="item.classes" v-for="(item, index) in data" :key="index" type="button">{{item.title}}</button>

Inside Your script tags add

import { useCommenStore } from "@/store/commen"
import { defineAsyncComponent, ref } from 'vue'
const store = useCommenStore()
const data = store.data

Inside json add

{
 "button": [
 {
   "classes": "btn-primary",
   "title": "Primary Button"
 },
 {
   "classes": "btn-secondary",
   "title": "Secondary Button"
 },
 {
   "classes": "btn-success",
   "title": "Success Button"
 },
 {
   "classes": "btn-info",
   "title": "Info Button"
 },
 {
   "classes": "btn-warning",
   "title": "Warning Button"
 },
 {
   "classes": "btn-danger",
   "title": "Danger Button"
 },
 {
   "classes": "btn-light",
   "title": "Light Button"
 }
],  
}

Tag & pills Preview link

PrimarySecondarySuccessInfoWarningDangerLightDark

Inside Your template tags add

<span class="badge " :class="item.class" v-for="(item, index) in data" :key="index">{{item.title}}</span>

Inside Your script tags add

import { useUikitStore } from "@/store/uikit"
const store = useUikitStore()
const data = store.badges

Inside json add

{
 "badges": [
 {
   "class": "badge-primary",
   "title": "Primary"
 },
 {
   "class": "badge-secondary",
   "title": "Secondary"
 },
 {
   "class": "badge-success",
   "title": "Success"
 },
 {
   "class": "badge-info",
   "title": "Info"
 },
 {
   "class": "badge-warning text-dark",
   "title": "Warning"
 },
 {
   "class": "badge-danger",
   "title": "Danger"
 },
 {
   "class": "badge-light text-dark",
   "title": "Light"
 },
 {
   "class": "badge-dark tag-pills-sm-mb",
   "title": "Dark"
 }
 ], 
}

Progressbar Preview link

Inside Your template tags add

<div v-for="(item, index) in data" :key="index">
  <div class="progress-bar " :class="item.class" role="progressbar" :style="{ 'width': item.width }"
  aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{item.width}}</div>
</div>

Inside Your script tags add

import { useUikitStore } from "@/store/uikit"
const store = useUikitStore()
const data = store.basic

Inside json add

{
 "basic": [
 {
   "width": " 25%",
   "class": "bg-primary"
 },
 {
   "width": "50%",
   "class": "bg-secondary"
 },
 {
   "width": "75%",
   "class": "bg-success"
 },
 {
   "width": "100%",
   "class": "bg-info"
 }
],
}

Alert Preview link

Inside Your template tags add

<div class="alert alert-primary" role="alert">This is a info alert—check it out!</div>
<div class="alert alert-secondary" role="alert">This is a light alert—check it out!</div>
<div class="alert alert-success" role="alert">This is a success alert—check it out!</div>
<div class="alert alert-info" role="alert">This is a danger alert—check it out!</div>
<div class="alert alert-warning" role="alert">This is a secondary alert—check it out!</div>
<div class="alert alert-danger" role="alert">This is a warning alert—check it out!</div>
<div class="alert alert-light" role="alert">This is a dark alert—check it out!</div>
<div class="alert alert-dark" role="alert">This is a dark alert—check it out!</div>

Popover Preview link

Dismissible popover

Inside Your template tags add

<button class="btn btn-primary example-popover" type="button" ref="tolek" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
                  <a class="example-popover btn btn-primary" tabindex="0" role="button" ref="tole" data-bs-toggle="popover" data-bs-trigger="focus" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
                  <button class="example-popover btn btn-primary" type="button" ref="to" data-bs-trigger="hover" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" title="Popover title" data-offset="-20px -20px" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." >On Hover Tooltip</button>

Inside Your script tags add

import { Popover } from "bootstrap";
import { ref, onMounted, defineAsyncComponent } from "vue";
onMounted(() => {
  new Popover(document.body, {
      selector: "[data-bs-toggle='popover']",
  })

})

Tooltip Preview link

Inside Your template tags add

<button class="example-popover btn btn-primary" type="button" data-container="body"
data-bs-toggle="tooltip" data-bs-placement="top" title="Popover title" ref="hover">Hover Me</button>

Inside Your script tags add

import { Tooltip } from "bootstrap";
import { ref, onMounted } from "vue";
onMounted(() => {
tooltiplist.value = new Tooltip(hover.value!)
})

Dropdown Preview link

ActionAnother ActionSomething Else Here

Inside Your template tags add

<div class="dropdown-basic">
  <div class="dropdown">
    <button type="button" class="dropbtn btn-primary">Dropdown Button <span><i class="icofont icofont-arrow-down"></i></span></button>
    <div class="dropdown-content">
      <a href="#">Action</a>
      <a href="#">Another Action</a>
      <a href="#">Something Else Here</a>
    </div>
  </div>
</div>

Tab Preview link

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

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

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

Inside Your template tags add

 <ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"><a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle bg-transparent border-none" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"  @click="open()">Dropdown</a>
  <div class="dropdown-menu" :class="filter ? 'show' : ''"><a class="dropdown-item" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Separated link</a></div>
</li>
<li class="nav-item"><a class="nav-link" id="profile-tabs" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a></li>
<li class="nav-item"><a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a></li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
  <p class="mb-0 m-t-30">{{desc}}</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
  <p class="mb-0 m-t-30">{{desc}}</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
  <p class="mb-0 m-t-30">{{desc}}</p>
</div>
</div>

Inside Your script tags add

import { ref } from 'vue';
 const filter = ref(false)
 const desc = ref <string >("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")
 function open() {
     filter.value = !filter.value
 }

Accordion Preview link

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.
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.
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 aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

Inside Your template tags add

 <div class="default-according" id="accordion">
<div class="card">
  <div class="card-header" id="headingOne">
    <h5 class="mb-0">
      <button class="btn btn-link ps-0" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #<span>1</span></button>
    </h5>
  </div>
  <div class="collapse show" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordion">
    <div class="card-body">{{desc}}</div>
  </div>
</div>
<div class="card">
  <div class="card-header" id="headingTwo">
    <h5 class="mb-0">
      <button class="btn btn-link ps-0 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #<span>2</span></button>
    </h5>
  </div>
  <div class="collapse" id="collapseTwo" aria-labelledby="headingTwo" data-bs-parent="#accordion">
    <div class="card-body">{{desc}}</div>
  </div>
</div>
<div class="card">
  <div class="card-header" id="headingThree">
    <h5 class="mb-0">
      <button class="btn btn-link ps-0 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Collapsible Group Item #<span>3</span></button>
    </h5>
  </div>
  <div class="collapse" id="collapseThree" aria-labelledby="headingThree" data-bs-parent="#accordion">
    <div class="card-body">{{desc}}</div>
  </div>
</div>
</div>

Inside Your script tags add

import { ref } from 'vue';
const desc = ref<string>("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.")