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.
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.
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
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
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
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 MoreProgress Bars
In addition to the default styles Shards allows you to adjust the width and add labels to your progress bars.
Widths
Labels
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.