Hi there!

This is an example for customizing Bootstrap 4

I tried to make some components have the same style as Material Design

I hope this will help you. Good day!

Colors

We've enhanced Bootstrap’s semantic color selection with brighter color variations in order to improve the contrast and accessibility.

Primary #6200EE
Primary Variant #3700B3
Secondary #03DAC7
Secondary Variant #018786
Background #FFFFFF
Surface #FFFFFF
Error #B00020
On Primary #FFFFFF
On Secondary #000000
On Background #000000
On Surface #000000
On Error #FFFFFF

Typography

Shards uses Roboto as its primary typeface for headings and the system’s UI font with a Roboto-first fallback (only on non-Apple devices) for the remaining content.

Type Font Font Size Line Height

Headline 1

Roboto Light 6 REM 6 REM

Headline 2

Roboto Light 3.75 REM 3.75 REM

Headline 3

Roboto 3 REM 3.125 REM

Headline 4

Roboto 2.125 REM 2.5 REM
Headline 5
Roboto 1.5 REM 2 REM
Headline 6
Roboto Medium 1.25 REM 2 REM

Paragraph

Roboto 1 REM 1.5 REM

Form Controls

All form controls are improved with micro-transitions and shadows that bring depth and improve the overall user experience.

Simple Forms
Custom Controls

The default custom form fields are improved and extended. One of the new additions being the toggle switch control.

Checkboxes
Radio Buttons
Custom Dropdown
Custom File Input

Cards

We wanted cards to stand out and bring depth without changing their original structure. All of this while allowing them to play well with the other components.

Card image cap

Sample Card Title

He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed in his length hid...

Read More
Card image cap

Sample Card Title

He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed in his length hid...

Read More
Card image cap

Sample Card Title

He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed in his length hid...

Read More
Card image cap

Sample Card Title

He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed in his length hid...

Read More

Buttons

Two new button modifiers are introduced in Shards that allow you to create pill-shaped and squared buttons for both filled and outlined variations for an extended range of possible combinations.

Normal
Outline

Progress Bars

In addition to the default styles Shards allows you to adjust the width and add labels to your progress bars.

Widths
Labels
20%
50%
70%

Modals

Display confirmation messages, forms or any type of content to your users using beautiful and non-disruptive modals.

Badges

Badges are similar to buttons and are available in all theme colors with filled and outlined modes and also with three variation styles: rounded, pill-shaped and squared.

Default Primary Secondary Success Danger Warning Info

Alerts