Avatars are typically used to display a user profile as a picture, an icon. we provide avatars in different shapes and sizes
To create avatar you need to add avatar class to the element
For getting different size of avatar you can choose either avatar-lg | avatar-md | avatar-sm
To generate circular shape avatar you need to add avatar-square class.
Alert messages can be used to notify the user about something special. The alert box takes the focus away from the current window, and forces the user to read the message.
Alert can be of many type like success, warning, error etc.
To create alert you need to add alert class to the element
For different type of avatar you can choose either alert-success | alert-warning | alert-error | alert-dark
To generate alert with outline only you need to add alert-outline class.
For different type of avatar you can choose either alert-outline-success | alert-outline-warning | alert-outline-error | alert-outline-dark
Used to add additional information to the content. For example, to display the number of notification & to display the online and offline status of user we can use Badges.
The status badge shows the online or offline status of user which needs to be displayed on the bottom right side of the profile.
To create status badge you need to add badge-status class to the element
For different type of status badge you can choose either status-online | status-offline
To generate badge with number you need to add badge-notification class.
Using Buttons we can perform some actions. Buttons are alos used to submit forms. we have variety of buttons in our library just add proper classes and your are ready to go.
To create normal button you need to add btn class to the element
For different type of buttons you can choose either btn-primary | btn-success | btn-warning | btn-danger | btn-dark
To generate button with outline you need to add btn-outline class.
For different type of buttons you can choose either btn-outline-primary | btn-outline-success | btn-outline-warning | btn-outline-danger | btn-outline-dark
To create link button you need to add btn-link class to the element
To create button with icon you need to add btn-icon class to the element
To create float button you need to add btn-float class to the element
The card component can contain a variety of content, including a heading, image, content and buttons. Card is basically Well organized collection of data related to specific topic which is easy to understand.
we have different types of card so just copy the code whichever card you want to use add your text and image init and your good to go.
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.
To add shadow to any card just add card-shadow class to the card
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
You just need to add overlay-text class to the text which you want to set over the other items.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Add card-horizontal class to the card which will help you to build your horizontal card.
Lorem Ipsum is simply dummy text.
Use badge-text to the text which you want to be treated as a badge
Labrador
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Add dismiss-item class to any icon which you want to act as dismiss icon.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
It is very important to use responsive images in our website.
To create responsive image you need to add image-responsive class to the element
To generate circular image you need to add image-cirlce class to the element.
The input tag specifies an input field where the user can enter data. The input element is the most important form element. The input element can be displayed in several ways, depending on the type attribute like text, radio, checkbox etc.
You can also disabled them by using appropriate classes
This type of field will help you to get some information from user like name, email etc.
This error styling will help you to show instant response to user when you will add some validation to your form.
Radio buttons allow the user to select only one option from all given options. one thing keep in mind while using radio button the name attribute for each input must be same
Checkboxes allow the user to select one or more option from all given options.
Our Component library has all headings from h1 to h6
Both Paragraph and Span has same font style. for paragraph you can use p tag and for span you can use span tag.
P - Creatively
Span - CreativelyThe Text align property specifies the horizontal alignment of text in an element.
we have different text alignments like text-left | text-center | text-right
This is text left example.
This is text center example.
This is text right example.
Lists allow web developers to group a set of related items in lists.
An unordered list starts with the ul tag. Each list item starts with the li tag.
By default the list items will be marked with bullets.
An ordered list starts with the ol tag. Each list item starts with the li tag.
By default the list items will be marked with numbers.
In a stacked list we put elements on top of each other vertically without giving them any markers like roman, bullets etc.
Star Rating is highly use in e-commerce website because they increase social proof and influence purchases.
thats why we are providing you star rating here just copy the below code and you are good to go
A toast is shown to users with readable message content at the top or bottom of the screen and disappears automatically after a few seconds.
Grids are used to guide the designers with how and where to place elements on the page.
We have multiple grid options in this library. you can use any of then depends on your sub-childs
Classes we provide - gird-2 | grid-3 | grid-4 | grid-5 | grid-6 | grid-responsive
grid with two items
grid with three items
grid with four items
grid with five items
grid with six items
grid with responsiveness
You can use Range silder for defining control for entering a number whose exact value is not important
This component mostly use in e-commerce website to shwocase theirs products.
you can directly add as many images you want just give class & id name properly.