description:Bootstrap provides an easy way to create predefined alert messages.
description:Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.
bootstrap-link:components/alerts/
---
## Default markup
Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action.
Add the `alert-link` class to any links inside the alert box to create "matching colored links":
Add a link to your alert message to redirect users to the details they need to complete or additional information they should read.
{% capture code %}
{% for variant in site.variants %}
...
...
@@ -34,7 +36,9 @@ Add the `alert-link` class to any links inside the alert box to create "matching
{% include example.html code=code %}
## Dismissible Alerts
## Dismissible alerts
Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.
{% capture code %}
{% for variant in site.variants %}
...
...
@@ -49,6 +53,8 @@ Add the `alert-link` class to any links inside the alert box to create "matching
## Alerts with icons
Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.
{% capture code %}
{% for variant in site.variants %}
{% capture variant-text %}
...
...
@@ -62,6 +68,8 @@ Add the `alert-link` class to any links inside the alert box to create "matching
## Alert with avatar
Add an avatar to your alert modal to make it more personalised.
{% capture code %}
{% for variant in site.variants %}
{% capture variant-text %}
...
...
@@ -75,6 +83,8 @@ Add the `alert-link` class to any links inside the alert box to create "matching
## Alert with buttons
Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message.
@@ -49,7 +49,7 @@ Make buttons look inactive to show that an action is possible once the user meet
{% include example.html code=code wrapper="btn-list" centered=true %}
## Color variations
## Colour variations
Choose the right colour for your button to make it go well with your design and draw users' attention. Button colours can have a big influence on users' decisions, which is why it's important to choose them based on the intended purpose.
description:The Carousel is a slideshow for cycling through elements.
description:A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.
bootstrap-link:components/carousel/
---
## Default markup
Use a carousel to make your website design more visually appealing for users. In the default carousel design, respective elements slide automatically and users can go to the next slide by clicking an arrow.
{% capture code %}
{% include ui/carousel.html show-indicators=true show-controls=true id="carousel-sample" %}
description:Empty states/blanks are commonly used as placeholders for first time use, empty data or error screens.
description:Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.
---
## Default markup
Use the default empty state to engage users in the critical moments of their experience with your website or app. A good empty state screen should let users know what is happening and what they should do next as well as encourage them to take action.
{% capture code %}
{% include ui/empty.html %}
{% endcapture %}
...
...
@@ -14,6 +16,8 @@ description: Empty states/blanks are commonly used as placeholders for first tim
## Empty state with illustration
Make your empty state screen more attractive and engaging by adding an illustration. Thanks to a more personalised design, you will improve your brand image and make your website or app more user friendly.
Description:Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.
bootstrap-link:components/forms/
---
## Classic Inputs
## Classic inputs
Use classic, user-friendly inputs, label them appropriately and include input placeholders that will help users avoid confusion when completing a form.
{% capture code %}
{% include parts/form/input.html type="text" hint="Here's some more info." %}
Use a multi-line text input control to enable users to enter longer pieces of text. The control will automatically adjust to the length of the text entered.
Add one of the available selects - either a dropdown or a multiple choice select - to let users choose from a predefined set of options.
{% capture code %}
{% include parts/form/input.html type="textarea" %}
To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and resign from coloured control frames and the validation feedback.
{% capture code %}
{% include parts/form/validation-states.html lite=true %}
Choose the size of an input control that will go well with your form design. Apart from the default size, you can also use small and large input controls.
Add an image check to your form and give users visually appealing options to choose from.
{% capture code %}
{% include parts/form/input-image.html %}
{% endcapture %}
{% include example.html code=code max-width="25rem" %}
## Input color
## Input colour
Your input controls can come in a variety of colours, depending on your preferences. Click [here]({% docs_url colors %}) to see the list of available colours.
Use the ``datalist`` element to add an autocomplete feature to your input control. The list of available options will display once a user starts to type and will make it quicker to complete form sections.
Add selectboxes to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectboxes with a label, use icons only or icons with labels. Alternatively, you can use pill selectboxes if they go well with your design.
Use more advanced selectboxes to display the range of available options. You can choose selectboxes with radio buttons, if you want users to select only one option or with checkboxes, if they are allowed to choose multiple options.
{% capture code %}
{% include parts/form/selectgroup-payments.html %}
{% include parts/form/selectgroup-project-manager.html %}
description:Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.
bootstrap-link:components/spinners/
done:true
---
loading state of a component
## Default markup
Use the default spinner to notify users that an action they have taken is in progress, helping them avoid confusion.
{% capture code %}
{% include ui/spinner.html %}
{% endcapture %}
...
...
@@ -16,6 +20,8 @@ done: true
## Colors
Choose one of the available colors to customize the spinner and make it suit your design.
{% capture code %}
{% for color in site.colors %}
{% assign c = color[0] %}
...
...
@@ -27,6 +33,8 @@ done: true
## Size
Choose the size of your spinner. You can use the default size or use the `spinner-border-sm` class to display a smaller spinner.
{% capture code %}
{% include ui/spinner.html %}
{% include ui/spinner.html size="sm" %}
...
...
@@ -36,11 +44,15 @@ done: true
## Growing spinner
Use the growing spinner, if you are looking for a more original design than a border spinner. The spinner grows to show the loading state.
{% capture code %}
{% include ui/spinner.html type="grow" %}
{% endcapture %}
{% include example.html code=code %}
Growing spinners also come in a variety of colors to choose from.
{% capture code %}
{% for color in site.colors %}
{% assign c = color[0] %}
...
...
@@ -52,6 +64,8 @@ done: true
## Buttons
Use buttons with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
{% capture code %}
{% include ui/button.html spinner=true text="Button" color="primary" %}
{% include ui/button.html spinner=true text="Button" color="danger" %}
description:Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.
new:true
---
## Default markup
Steps are progress indicators of a sequence of task steps.
Steps show users where they are within a process, what steps they have already completed and what they are expected to complete. Making multi-step processes more user-friendly facilitates users' interaction with your interface.
## Default markup
Use the `steps` class to create the default progress tracker and name the steps accordingly.
{% capture code %}
{% include ui/steps.html show-title=true %}
...
...
@@ -19,13 +20,17 @@ Steps are progress indicators of a sequence of task steps.
## Tooltips
Add tooltips, if you want to provide users with additional information about the steps they are expected to complete. Tooltips will display when a user hovers over a given step and help clarify what might not be clear from the interface.
{% capture code %}
{% include ui/steps.html show-title=true show-tooltip=true %}
{% endcapture %}
{% include example.html code=code %}
## Color
## Colour
You can customise the default progress indicator by changing the colour to one that better suits your design. Click [here]({% docs_url colors %}) to see the range of available colours.
{% capture code %}
{% include ui/steps.html color="green" show-title=true %}
...
...
@@ -36,6 +41,8 @@ Steps are progress indicators of a sequence of task steps.
## Steps without title
For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.
{% capture code %}
{% include ui/steps.html show-tooltip=true %}
{% endcapture %}
...
...
@@ -44,6 +51,8 @@ Steps are progress indicators of a sequence of task steps.
## Steps with numbers
Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the colour to customise it.
{% capture code %}
{% include ui/steps.html count=5 active=2 numbers=true color="lime" %}
description:Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organisation and make it easy for users to navigate.
bootstrap-link:components/navs/
---
## Default markup
Use tabs to let users access different sections within one context quickly and with ease. In the default design, the current tab is highlighted, which makes the interface clear and user-friendly.
description:The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
description:Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action.
bootstrap-link:components/toasts/
---
## Default markup
Use the default toast message to inform users of the outcome of their action and provide additional information. It contains an `x` close button to make it possible for users to close the toast if they wish.
Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we’ll also attempt to blur the elements under a toast.
Toasts blend over the elements they appear over. If a browser supports the `backdrop-filter` CSS property, the elements under a toast will be blurred.
{% capture code %}
{% include ui/toast.html %}
...
...
@@ -26,7 +28,7 @@ Toasts are slightly translucent, too, so they blend over whatever they might app
## Stacking toasts
If you want to stack toasts just put them in the same container.
Stack multiple toasts together by putting them within one container.
