https://github.com/kdcloudy/BootstrapBoilerplates
Quick and basic starters code for basic static layouts in HTML/CSS such as signup forms, grids, gradients and basic neumorphic designs.
https://github.com/kdcloudy/BootstrapBoilerplates
bootstrap cheatsheet ui-design
Last synced: over 1 year ago
JSON representation
Quick and basic starters code for basic static layouts in HTML/CSS such as signup forms, grids, gradients and basic neumorphic designs.
- Host: GitHub
- URL: https://github.com/kdcloudy/BootstrapBoilerplates
- Owner: kdcloudy
- Created: 2020-07-29T15:33:21.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-07-30T12:25:26.000Z (almost 6 years ago)
- Last Synced: 2024-10-24T00:22:52.877Z (over 1 year ago)
- Topics: bootstrap, cheatsheet, ui-design
- Homepage:
- Size: 22.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BootstrapBoilerplates
Quick and basic starters code for basic static layouts in HTML/CSS such as signup forms, grids, gradients using Bootstrap. This is for delivering a quick testable, clean UI while you can still focus on your backend and before you jump to React or Vue.
## Dependencies:
`link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"`
### A Login Jumbotron card
CSS:
```
.basic-card{
height: 90%;
width: 60%;
position: absolute;
top: 65%;
left: 50%;
padding:1%;
transform: translate(-50%, -50%);
border-radius: 10px 10px;
background: #e0e5ec;
display: flex;
justify-content: center;
}
```
### Gradients
CSS:
(Add this to any class or body for full gradient background)
`background-image: linear-gradient(to bottom right, #2EC866, #0E141E);`
### Gradient Text
CSS:
```
#gradtext{
background: linear-gradient(to bottom right, #E73C7E, #EE7752);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
```
### Basic Dark Navbar:
HTML:
```
```
### Neumorphic UI:
```
body{
background: #e0e5ec;
}
.neu-components{
box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6),
-9px -9px 16px rgba(255, 255, 255, 0.5);
border: 0;
background: #e0e5ec;
border-radius: 10px;
padding: 10px;
}
```
### Basic Sign up Form
```
Sign Up
Gender:
Male
Female
Prefer not to say
Select Difficulty Level
Beginner
Intermediate
Pro
Birthday:
Enroll me part of the newsletter
I accept to the terms of the end user license agreement.
Create Account
Reset
Already a member?
Login now
```
### Bootstrap Grid Sample:
Two columns taking 6 units, one row.
```
```