<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" checked>
<label class="form-check-label" for="exampleCheck1" >Check me out</label>
</div>
<input type="submit" class="btn btn-primary" value="Submit" />
<input type="reset" class="btn btn-primary" value="Reset" />
</form>
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 2vw;
background: #eaeaea;
}
form {
border-radius: 8px;
padding: 20px;
background: #fff;
border: 1px solid #aeaeae;
margin: 10px;
}
input:default {
border: 2px solid red;
}
View Compiled
This Pen doesn't use any external JavaScript resources.