Buttons
Primary Buttons
<button type="button" class="btn btn-primary">
Button
</button>
<button type="button" class="btn btn-primary btn-icon">
Button Icon
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17L17 7" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 7H17V17" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button type="button" class="btn btn-primary btn-sm">
Button sm
</button>
<button type="button" class="btn btn-primary btn-disabled">
Button disabled
</button>
Secondary Buttons
<button type="button" class="btn btn-secondary">
Button
</button>
<button type="button" class="btn btn-secondary btn-icon">
Button Icon
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17L17 7" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 7H17V17" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button type="button" class="btn btn-secondary btn-sm">
Button sm
</button>
<button type="button" class="btn btn-secondary btn-disabled">
Button disabled
</button>
Light Buttons
<button type="button" class="btn btn-light">
Button
</button>
<button type="button" class="btn btn-light btn-icon">
Button Icon
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17L17 7" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 7H17V17" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button type="button" class="btn btn-light btn-sm">
Button sm
</button>
<button type="button" class="btn btn-light btn-disabled">
Button disabled
</button>
Dark Buttons
<button type="button" class="btn btn-dark">
Button
</button>
<button type="button" class="btn btn-dark btn-icon">
Button Icon
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17L17 7" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 7H17V17" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button type="button" class="btn btn-dark btn-sm">
Button sm
</button>
<button type="button" class="btn btn-dark btn-disabled">
Button disabled
</button>
Outline Buttons
<button type="button" class="btn btn-outline">
Button
</button>
<button type="button" class="btn btn-outline btn-icon">
Button Icon
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17L17 7" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 7H17V17" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button type="button" class="btn btn-outline btn-sm">
Button sm
</button>
<button type="button" class="btn btn-outline btn-disabled">
Button disabled
</button>
Filter Buttons
<button type="button" class="btn filter-button">
Button Filter
</button>
<button type="button" class="btn filter-button active btn-icon">
Button Filter Icon
<svg class="filter-button--close" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.364 15.364C11.8492 18.8787 6.15075 18.8787 2.63604 15.364C-0.87867 11.8493 -0.878691 6.15077 2.63604 2.63604C6.15077 -0.878691 11.8493 -0.87867 15.364 2.63604C18.8787 6.15075 18.8787 11.8492 15.364 15.364ZM11.1213 5.46447C11.5119 5.07393 12.145 5.07395 12.5355 5.46447C12.9261 5.85499 12.9261 6.48814 12.5355 6.87868L10.4142 9L12.5355 11.1213C12.9261 11.5118 12.9261 12.145 12.5355 12.5355C12.145 12.9261 11.5118 12.9261 11.1213 12.5355L9 10.4142L6.87868 12.5355C6.48814 12.9261 5.85499 12.9261 5.46447 12.5355C5.07395 12.145 5.07393 11.5119 5.46447 11.1213L7.58579 9L5.46447 6.87868C5.07395 6.48816 5.07393 5.85501 5.46447 5.46447C5.85501 5.07393 6.48816 5.07395 6.87868 5.46447L9 7.58579L11.1213 5.46447Z" fill="black"/>
</svg>
</button>
<button type="button" class="btn filter-button btn-disabled">
Button Filter disabled
</button>
Text Only Buttons
<a href="javascript:void(0)" class="link-text">
Button Text
</a>
<a href="javascript:void(0)" class="link-text active">
Button Text
</a>
<a href="javascript:void(0)" class="link-text disabled">
Button Text
</a>
Checkbox
Checkbox
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
Checked checkbox
</label>
</div>
Toggles
Toggles
<div class="color-toggle">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="colorToggle">
</div>
</div>
<div class="color-toggle">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="colorToggle">
<label class="form-check-label" for="colorToggle">Switch Color</label>
</div>
</div>
<div class="color-toggle">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="colorToggle" checked disabled>
<label class="form-check-label" for="colorToggle">Disabled Switch</label>
</div>
</div>
Forms
Forms
<form class="row gy-4 gx-5">
<div class="col-md-6">
<label for="inputNameT" class="form-label">Texts Fields*</label>
<input type="text" class="form-control" id="inputNameT">
</div>
<div class="col-md-6">
<label for="inputEmailT" class="form-label">Email*</label>
<input type="email" class="form-control" id="inputEmailT" >
</div>
<div class="col-md-6">
<label for="inputNumberT" class="form-label">Number*</label>
<input type="number" class="form-control" id="inputNumberT" >
</div>
<div class="col-md-6">
<label for="inputDisabledT" class="form-label">Disabled Form item*</label>
<input type="text" class="form-control" id="inputDisabledT" disabled>
</div>
<div class="col-12">
<label for="floatingTextareaT" class="form-label">Textarea*</label>
<textarea class="form-control form-textarea" placeholder="Please describe your project in detail (data type, volume, timeline, budget, etc.)" id="floatingTextareaT" rows="5"></textarea>
</div>
</form>
Badges
Primary Badges
badge Primary
badge icon
badge danger
badge Primary
<span class="badge badge-primary">
badge primary
</span>
<span class="badge badge-primary">
<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.1013 2.33227L5.61717 4.17375L4.18513 5.90696L2.10672 8.49292H4.82988C5.1981 8.49292 5.49655 8.7914 5.49655 9.15958V13.8833L8.48188 10.1401L9.84384 8.47589L10.5641 7.55518H7.76797C7.39979 7.55518 7.1013 7.25669 7.1013 6.88851V2.33227ZM7.64966 0.732977C8.10304 0.894146 8.43464 1.32917 8.43464 1.8788V6.22185H10.8427C11.3782 6.22185 11.7349 6.5786 11.8889 6.9298C12.0386 7.27127 12.0557 7.72305 11.8209 8.10558C11.8077 8.12709 11.7933 8.1478 11.7778 8.16763L10.8895 9.30318L10.8804 9.3146L9.51646 10.9813L6.37602 14.919C6.34633 14.9562 6.31277 14.9901 6.27588 15.0202C5.89184 15.333 5.38904 15.4121 4.95917 15.2545C4.5077 15.089 4.16322 14.6662 4.16322 14.1025V9.82625H1.82348C1.28802 9.82625 0.931274 9.46949 0.777323 9.11834C0.627625 8.77687 0.610531 8.32509 0.845331 7.94251C0.860047 7.91856 0.87626 7.89554 0.893883 7.87358L3.15433 5.06114L4.58668 3.32762L6.34704 1.14335C6.66926 0.695474 7.20628 0.575363 7.64966 0.732977Z"/>
</svg>
badge icon
</span>
<span class="badge badge-danger">
<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.1013 2.33227L5.61717 4.17375L4.18513 5.90696L2.10672 8.49292H4.82988C5.1981 8.49292 5.49655 8.7914 5.49655 9.15958V13.8833L8.48188 10.1401L9.84384 8.47589L10.5641 7.55518H7.76797C7.39979 7.55518 7.1013 7.25669 7.1013 6.88851V2.33227ZM7.64966 0.732977C8.10304 0.894146 8.43464 1.32917 8.43464 1.8788V6.22185H10.8427C11.3782 6.22185 11.7349 6.5786 11.8889 6.9298C12.0386 7.27127 12.0557 7.72305 11.8209 8.10558C11.8077 8.12709 11.7933 8.1478 11.7778 8.16763L10.8895 9.30318L10.8804 9.3146L9.51646 10.9813L6.37602 14.919C6.34633 14.9562 6.31277 14.9901 6.27588 15.0202C5.89184 15.333 5.38904 15.4121 4.95917 15.2545C4.5077 15.089 4.16322 14.6662 4.16322 14.1025V9.82625H1.82348C1.28802 9.82625 0.931274 9.46949 0.777323 9.11834C0.627625 8.77687 0.610531 8.32509 0.845331 7.94251C0.860047 7.91856 0.87626 7.89554 0.893883 7.87358L3.15433 5.06114L4.58668 3.32762L6.34704 1.14335C6.66926 0.695474 7.20628 0.575363 7.64966 0.732977Z"/>
</svg>
badge danger
</span>
<span class="badge badge-primary badge-disabled">
badge primary
</span>
Outline Badges
badge outline
badge icon
badge danger
badge outline
<span class="badge badge-outline">
badge outline
</span>
<span class="badge badge-outline">
<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.1013 2.33227L5.61717 4.17375L4.18513 5.90696L2.10672 8.49292H4.82988C5.1981 8.49292 5.49655 8.7914 5.49655 9.15958V13.8833L8.48188 10.1401L9.84384 8.47589L10.5641 7.55518H7.76797C7.39979 7.55518 7.1013 7.25669 7.1013 6.88851V2.33227ZM7.64966 0.732977C8.10304 0.894146 8.43464 1.32917 8.43464 1.8788V6.22185H10.8427C11.3782 6.22185 11.7349 6.5786 11.8889 6.9298C12.0386 7.27127 12.0557 7.72305 11.8209 8.10558C11.8077 8.12709 11.7933 8.1478 11.7778 8.16763L10.8895 9.30318L10.8804 9.3146L9.51646 10.9813L6.37602 14.919C6.34633 14.9562 6.31277 14.9901 6.27588 15.0202C5.89184 15.333 5.38904 15.4121 4.95917 15.2545C4.5077 15.089 4.16322 14.6662 4.16322 14.1025V9.82625H1.82348C1.28802 9.82625 0.931274 9.46949 0.777323 9.11834C0.627625 8.77687 0.610531 8.32509 0.845331 7.94251C0.860047 7.91856 0.87626 7.89554 0.893883 7.87358L3.15433 5.06114L4.58668 3.32762L6.34704 1.14335C6.66926 0.695474 7.20628 0.575363 7.64966 0.732977Z"/>
</svg>
badge icon
</span>
<span class="badge badge-outline-danger">
<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.1013 2.33227L5.61717 4.17375L4.18513 5.90696L2.10672 8.49292H4.82988C5.1981 8.49292 5.49655 8.7914 5.49655 9.15958V13.8833L8.48188 10.1401L9.84384 8.47589L10.5641 7.55518H7.76797C7.39979 7.55518 7.1013 7.25669 7.1013 6.88851V2.33227ZM7.64966 0.732977C8.10304 0.894146 8.43464 1.32917 8.43464 1.8788V6.22185H10.8427C11.3782 6.22185 11.7349 6.5786 11.8889 6.9298C12.0386 7.27127 12.0557 7.72305 11.8209 8.10558C11.8077 8.12709 11.7933 8.1478 11.7778 8.16763L10.8895 9.30318L10.8804 9.3146L9.51646 10.9813L6.37602 14.919C6.34633 14.9562 6.31277 14.9901 6.27588 15.0202C5.89184 15.333 5.38904 15.4121 4.95917 15.2545C4.5077 15.089 4.16322 14.6662 4.16322 14.1025V9.82625H1.82348C1.28802 9.82625 0.931274 9.46949 0.777323 9.11834C0.627625 8.77687 0.610531 8.32509 0.845331 7.94251C0.860047 7.91856 0.87626 7.89554 0.893883 7.87358L3.15433 5.06114L4.58668 3.32762L6.34704 1.14335C6.66926 0.695474 7.20628 0.575363 7.64966 0.732977Z"/>
</svg>
badge icon
</span>
<span class="badge badge-outline badge-disabled">
badge outline
</span>
Alert
Alert Success
Connect to the internet
We solve business problems related to natural human language and speech.
Connect to the internet
We solve business problems related to natural human language and speech.
<div class="alert alert-success alert-dismissible fade show" role="alert">
<h4 class="alert-heading">Connect to the internet</h4>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<p>We solve business problems related to natural human language and speech.</p>
</div>
<div class="alert alert-success alert-dismissible fade show d-flex" role="alert">
<div class="alert-icon flex-shrink-0">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.8 23C2.3 23 1 21.7 1 20.2V16.6C1 15 2.3 13.8 3.8 13.8C5.4 13.8 6.6 15.1 6.6 16.6V20.2C6.6 21.7 5.4 23 3.8 23Z" fill="black"/>
<path d="M12.0007 23.0001C10.4007 23.0001 9.20068 21.7001 9.20068 20.2001V11.1C9.20068 9.50005 10.5007 8.30005 12.0007 8.30005C13.6007 8.30005 14.8007 9.60005 14.8007 11.1V20.2001C14.8007 21.7001 13.6007 23.0001 12.0007 23.0001Z" fill="black"/>
<path d="M20.1999 23C18.5999 23 17.3999 21.7 17.3999 20.2V3.8C17.3999 2.2 18.6999 1 20.1999 1C21.6999 1 22.9999 2.3 22.9999 3.8V20.2C22.9999 21.7 21.6999 23 20.1999 23Z" fill="black"/>
</svg>
</div>
<div class="flex-grow-1 ms-3">
<h4 class="alert-heading">Connect to the internet</h4>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<p>We solve business problems related to natural human language and speech.</p>
</div>
</div>
Alert Danger
Connect to the internet
We solve business problems related to natural human language and speech.
Connect to the internet
We solve business problems related to natural human language and speech.
<div class="alert alert-success alert-dismissible fade show" role="alert">
<h4 class="alert-heading">Connect to the internet</h4>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<p>We solve business problems related to natural human language and speech.</p>
</div>
<div class="alert alert-success alert-dismissible fade show d-flex" role="alert">
<div class="alert-icon flex-shrink-0">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_b_461_2989)">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.9"/>
<circle cx="23" cy="23" r="22.5" stroke="#D31313"/>
</g>
<path d="M14.8 34C13.3 34 12 32.7 12 31.2V27.6C12 26 13.3 24.8 14.8 24.8C16.4 24.8 17.6 26.1 17.6 27.6V31.2C17.6 32.7 16.4 34 14.8 34Z" fill="#D31313"/>
<path d="M23.0007 34.0001C21.4007 34.0001 20.2007 32.7001 20.2007 31.2001V22.1C20.2007 20.5 21.5007 19.3 23.0007 19.3C24.6007 19.3 25.8007 20.6 25.8007 22.1V31.2001C25.8007 32.7001 24.6007 34.0001 23.0007 34.0001Z" fill="#D31313"/>
<path d="M31.1999 34C29.5999 34 28.3999 32.7 28.3999 31.2V14.8C28.3999 13.2 29.6999 12 31.1999 12C32.6999 12 33.9999 13.3 33.9999 14.8V31.2C33.9999 32.7 32.6999 34 31.1999 34Z" fill="#D31313"/>
<defs>
<filter id="filter0_b_461_2989" x="-5" y="-5" width="56" height="56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImageFix" stdDeviation="2.5"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_461_2989"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_461_2989" result="shape"/>
</filter>
</defs>
</svg>
</div>
<div class="flex-grow-1 ms-3">
<h4 class="alert-heading">Connect to the internet</h4>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<p>We solve business problems related to natural human language and speech.</p>
</div>
</div>
Breadcrumb
Default Breadcrumb
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="javascript:void(0)">Library</a></li>
</ol>
</nav>
Tooltip
Tooltips
<button type="button" class="btn btn-primary btn-sm"
data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-custom-class="tooltip-primary"
data-bs-title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-primary btn-sm"
data-bs-toggle="tooltip"
data-bs-placement="right"
data-bs-custom-class="tooltip-primary"
data-bs-title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-primary btn-sm"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
data-bs-custom-class="tooltip-primary"
data-bs-title="Tooltip on Bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-primary btn-sm"
data-bs-toggle="tooltip"
data-bs-placement="left"
data-bs-custom-class="tooltip-primary"
data-bs-title="Tooltip on left">
Tooltip on left
</button>
Tooltips Success
<button type="button" class="btn btn-secondary btn-sm"
data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-custom-class="tooltip-success"
data-bs-title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary btn-sm"
data-bs-toggle="tooltip"
data-bs-placement="right"
data-bs-custom-class="tooltip-success"
data-bs-title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary btn-sm"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
data-bs-custom-class="tooltip-success"
data-bs-title="Tooltip on Bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary btn-sm"
data-bs-toggle="tooltip"
data-bs-placement="left"
data-bs-custom-class="tooltip-success"
data-bs-title="Tooltip on left">
Tooltip on left
</button>
Tooltips Danger
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
<span
data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-custom-class="tooltip-danger"
data-bs-title="Tooltip on top">
Tooltip on top
</span>
<span
data-bs-toggle="tooltip"
data-bs-placement="right"
data-bs-custom-class="tooltip-danger"
data-bs-title="Tooltip on right">
Tooltip on right
</span>
<span
data-bs-toggle="tooltip"
data-bs-placement="bottom"
data-bs-custom-class="tooltip-danger"
data-bs-title="Tooltip on Bottom">
Tooltip on bottom
</span>
<span
data-bs-toggle="tooltip"
data-bs-placement="left"
data-bs-custom-class="tooltip-danger"
data-bs-title="Tooltip on left">
Tooltip on left
</span>
Progress Bar
Progress Bar
<div class="progress">
<div class="progress-bar w-25" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
Progress Bar Animated stripes
<div class="progress">
<div class="progress-bar w-25 progress-bar-striped progress-bar-animated" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
Pagination
Pagination
<div class="color-toggle">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="colorToggle">
</div>
</div>
<div class="color-toggle">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="colorToggle">
<label class="form-check-label" for="colorToggle">Switch Color</label>
</div>
</div>
Accordion
Accordion
Frequently asked
questions
When you subscribe to the monthly plan, you will automatically be charged monthly until you cancel. We offer a 13% discount on annual plans. When you subscribe to the annual plan, you will automatically be charged annually, and your subscription will automatically renew annually until you cancel.
When you subscribe to the monthly plan, you will automatically be charged monthly until you cancel. We offer a 13% discount on annual plans. When you subscribe to the annual plan, you will automatically be charged annually, and your subscription will automatically renew annually until you cancel.
When you subscribe to the monthly plan, you will automatically be charged monthly until you cancel. We offer a 13% discount on annual plans. When you subscribe to the annual plan, you will automatically be charged annually, and your subscription will automatically renew annually until you cancel.
<div class="accordion" id="accordionExample">
<h2 class="accordion-title">
Frequently asked <br> questions
</h2>
<div class="accordion-item">
<h4 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
How many users are included in Pro and Team plans?
</button>
</h4>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>When you subscribe to the monthly plan, you will automatically be charged monthly until you cancel. We offer a 13% discount on annual plans. When you subscribe to the annual plan, you will automatically be charged annually,
and your subscription will automatically renew annually until you cancel.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h4 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
How do monthly and annual pricing differ?
</button>
</h4>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>When you subscribe to the monthly plan, you will automatically be charged monthly until you cancel. We offer a 13% discount on annual plans. When you subscribe to the annual plan, you will automatically be charged annually,
and your subscription will automatically renew annually until you cancel.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h4 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Is there a minimum contract length?
</button>
</h4>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>When you subscribe to the monthly plan, you will automatically be charged monthly until you cancel. We offer a 13% discount on annual plans. When you subscribe to the annual plan, you will automatically be charged annually,
and your subscription will automatically renew annually until you cancel.</p>
</div>
</div>
</div>
</div>
Accordion Bordered
Frequently asked
questions
When you subscribe to the monthly plan, you will automatically be charged monthly until you cancel. We offer a 13% discount on annual plans. When you subscribe to the annual plan, you will automatically be charged annually, and your subscription will automatically renew annually until you cancel.
When you subscribe to the monthly plan, you will automatically be charged monthly until you cancel. We offer a 13% discount on annual plans. When you subscribe to the annual plan, you will automatically be charged annually, and your subscription will automatically renew annually until you cancel.
When you subscribe to the monthly plan, you will automatically be charged monthly until you cancel. We offer a 13% discount on annual plans. When you subscribe to the annual plan, you will automatically be charged annually, and your subscription will automatically renew annually until you cancel.
<div class="accordion accordion-border" id="accordionExampleBorder">
<h2 class="accordion-title">
Frequently asked <br> questions
</h2>
<div class="accordion-item">
<h4 class="accordion-header" id="headingOneBorder">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOneBorder" aria-expanded="true" aria-controls="collapseOneBorder">
How many users are included in Pro and Team plans?
</button>
</h4>
<div id="collapseOneBorder" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExampleBorder">
<div class="accordion-body">
<p>When you subscribe to the monthly plan, you will automatically be charged monthly until you cancel. We offer a 13% discount on annual plans. When you subscribe to the annual plan, you will automatically be charged annually,
and your subscription will automatically renew annually until you cancel.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h4 class="accordion-header" id="headingTwoBorder">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwoBorder" aria-expanded="false" aria-controls="collapseTwoBorder">
How do monthly and annual pricing differ?
</button>
</h4>
<div id="collapseTwoBorder" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExampleBorder">
<div class="accordion-body">
<p>When you subscribe to the monthly plan, you will automatically be charged monthly until you cancel. We offer a 13% discount on annual plans. When you subscribe to the annual plan, you will automatically be charged annually,
and your subscription will automatically renew annually until you cancel.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h4 class="accordion-header" id="headingThreeBorder">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThreeBorder" aria-expanded="false" aria-controls="collapseThreeBorder">
Is there a minimum contract length?
</button>
</h4>
<div id="collapseThreeBorder" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExampleBorder">
<div class="accordion-body">
<p>When you subscribe to the monthly plan, you will automatically be charged monthly until you cancel. We offer a 13% discount on annual plans. When you subscribe to the annual plan, you will automatically be charged annually,
and your subscription will automatically renew annually until you cancel.</p>
</div>
</div>
</div>
</div>
Tabs
Tabs
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
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.
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
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.
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">
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.
</div>
</div>
Modal
Modal
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<div class="modal-body--header">
<h2 class="modal-title" id="exampleModalLabel">Are you sure, you want this?</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<p> We solve business problems related to natural human language and speech.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-light">Save changes</button>
</div>
</div>
</div>
</div>
Modal With Image
<!-- Button trigger modal With Image -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal1">
Modal With Image
</button>
<!-- Modal ith Image-->
<div class="modal fade modal-image" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="d-flex modal-image--body">
<div class="flex-shrink-0">
<img src="{{ "images/modal.png" | absURL }}" alt="modal">
</div>
<div class="flex-grow-1 ms-2">
<div class="modal-body ">
<div class="modal-body--header">
<h2 class="modal-title" id="exampleModalLabel">Are you sure, you want this?</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<p> We solve business problems related to natural human language and speech.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-light">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
Tabs
Cookies
<div class="cookies">
<div class="cookies-text">
<p>We use cookies to give you the best experience and improve our website.</p>
</div>
<div class="cookies-btn">
<a href="" class="btn btn-secondary"> Privacy Policy </a>
<a href="" class="btn btn-primary"> I Accept </a>
</div>
</div>