+90 (850) 000 00 00

Element

Buttons

BASIC BUTTONS

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


SHADOW BUTTONS

OUTLINE BUTTONS

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.


ROUNDED BUTTONS


BUTTONS SIZES

Use the auxiliary classes to set the button sizes. .btn-sm, .btn-md or .btn-lg


BUTTON BLOCK

Block button to set Add Classes .btn-block

Form Elements

INPUTS



mail@example.com





@

@gmail.com

$ 0.00

Progress

BASIC PROGRESS

Use the custom progress component to display simple or complex progress bars. We need inline css when using progress bars. Click for Documentation

  • We use the .progress as a wrapper to indicate the max value of the progress bar.
  • We use the inner .progress-bar to indicate the progress so far.
  • The .progress-bar requires an inline style, utility class, or custom CSS to set their width.
  • The .progress-bar also requires some role and aria attributes to make it accessible.

BACKGROUND PROGRESS

STRIPED PROGRESS

Add a .progress-bar-striped class to a .progress-bar to add a gradient line to the progress bar.


PROGRESS SIZES

Add a .progress-bar-striped class to a .progress-bar to add a gradient line to the progress bar.


MULTIPLE BARS

Add multiple progress bars into a progress component.


LABEL

Insert text into the progress bar.

60%

CUSTOM PROGRESS

Insert text into the progress bar.

Progress 70%
Progress 70%

Pagination

BASIC

We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Learn more about pagination in Bootstrap Click Here


SEPERATE

.pagination-seperate

ROUND

.pagination-round

FLAT

.pagination-fill-rounded


COLORED
Use helper classes to add pagination color. The following table lists the values that can be retrieved. (e. g. .pagination-primary)
Class Value
class="pagination pagination-[value]" primary | secondary | success | danger | warning | info | dark | purple | cyan | pink | brown