Hey, molecules!

Wrap a series of buttons with .btn in .btn-group.

Use the same classes as in bootstrap. All the custom styling is adjusted on the original classes. So use .form-control for all inputs. Wrap label, input and optional descripton in a <div> with class .form-group

If you want to group a number of inputs to a form, wrap your inputs in a <form> and start working on your epic inputs.

Use the same structure as in bootstrap. This is only a showcase for the style.

No bullshit. Give your nav element a class of nav, and your links inside the class of nav-link

Give your nav element a class of nav nav-grey, and your links inside the class of nav-link

Sometimes you need to change your directions, in life as in navs. Add the class flex-column to your nav, and woop!

Use a or buttons to create actionable list group items with hover, disabled, and active states by adding class list-group-item-action. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like lis or divs) don’t provide a click or tap affordance. Be sure to not use the standard .btn classes here.

Inside your list item, add a span with the classes of badge badge-primary badge-pill. Make sure to use bootstraps flex classes to align your items

• Cras justo odio 14
• Dapibus ac facilisis in 2
• Morbi leo risus 1

Add nearly any HTML within, even for linked list groups like the one below, with the help of bootstraps flex classes.

Toast are notification. If you are working with a dynamic application, where notifications are importent, make sure to check out Bootstraps toasts.

To futher explain what happened, you can add either a error-toast, warning-toast or a success-toast, depending on if it went good or bad.