Bootstrap Snippet material designnnnnnnnnnnn using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
  <form>
    <h1>Material Design formular</h1>
    <div class="form-group">
       
      <select>
          <option></option>
        <option>Value 1</option>
        <option>Value 2</option>
      </select>
      <label for="select" class="control-label">Selectbox</label><i class="bar"></i>
    </div>
    <div class="form-group">
      <input type="text" required="required"/>
      <label for="input" class="control-label">Textfield</label><i class="bar"></i>
    </div>
    <div class="form-group">
      <textarea required="required"></textarea>
      <label for="textarea" class="control-label">Textarea</label><i class="bar"></i>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" checked="checked"/><i class="helper"></i>I'm the label from a checkbox
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"/><i class="helper"></i>I'm the label from a checkbox
      </label>
    </div>
    <div class="form-radio">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(https://fonts.googleapis.com/css?family=Roboto);
body,
input,
select,
textarea,
body * {
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
}
body::after, body::before,
input::after,
input::before,
select::after,
select::before,
textarea::after,
textarea::before,
body *::after,
body *::before {
  box-sizing: border-box;
}
body {
  background-image: -webkit-linear-gradient(top, #f2f2f2, #e6e6e6);
  background-image: linear-gradient(top, #f2f2f2, #e6e6e6);
}
h1 {
  font-size: 2rem;
  text-align: center;
  margin: 0 0 2em;
}
.container {
  position: relative;
  max-width: 40rem;
  margin: 5rem auto;
  background: #fff;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"material designnnnnnnnnnnn"
Bootstrap 4.1.1 Snippet by ravic9089

Related: See More

Questions / Comments:

"material designnnnnnnnnnnn" Bootstrap 4.1.1 Snippet by ravic9089

Related: See More

Questions / Comments:

"material designnnnnnnnnnnn"
Bootstrap 4.1.1 Snippet by ravic9089