Create a Bootstrap Form
Create a Bootstrap Form , in this Article i will step through on how to create a Bootstrap form by going through the sample HTML and CSS Code that i have made.
HTML Code
- First before starting up the Project you will need to create an environment for your bootstrap Code . check out here
- After Setting up the Bootstrap starter Template. I have created a class named “signin” for the body tag , that i will need to style it later in CSS.
- The Next Step is to Create a container to hold the Row and Column of your Form
- Create the row, then the column.
- After created your row and column , create the “card-block”by referring the sample code here at Bootstrap Site
- Insert the image into the “card-block”
- Create the form div
- Create the Input text
- Add in the Bitton
- Add in the Check box
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap-4.0.0-dist/css/bootstrap-grid.min.css" >
<link rel="stylesheet" href="bootstrap-4.0.0-dist/css/bootstrap.min.css" >
<link rel="stylesheet" href="style.css" >
</head>
<body class="signin">
<div class="container signin-container">
<div class="row">
<div class="col-sm-12 col-sm-8">
<div class="card signin-card">
<div class="card-block">
<img src="assets/image.png" class="img-fluid signin-img">
<form class="signin-form">
<div class="form-group">
<input type="email" class="form-control" id="emailinput" placeholder="email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="passwordinput" placeholder="password">
</div>
<button type="button" class="btn btn-signin btn-lg">sign in</button>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">Remember me</label>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.2.1.slim.min.js%22%20integrity%3D%22sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr%2FrE9%2FQpg6aAZGJwFDMVNA%2FGpGFF93hXpG5KkN%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fpopper.js%2F1.12.9%2Fumd%2Fpopper.min.js%22%20integrity%3D%22sha384-ApNbgh9B%2BY1QKtv3Rn7W3mgPxhU9K%2FScQsAP7hUibX39j7fakFPskvXusvfa0b4Q%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22bootstrap-4.0.0-dist%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
CSS Code
- Give the Body tag a color
- Give the Container some margin with reference to the top
- Add some ( padding, background color,box shadow) to the card section
- Style your image provide some ( padding , margin , wrap it in a block , “width 30%” reducing its size)
- Create a maximum width of 360px for the form
- Style the button
body.signin{
background-color:azure;
}
.signin-container{
margin-top: 15%;
}
.card.signin-card{
padding:40px 0px 20px;
background-color: #f4f4f4;
box-shadow: 2px 2px 5px rgba(0,0,0,.5);
-webkit-box-shadow:2px 2px 5px rgba(0,0,0,.5);
-moz-box-shadow:2px 2px 5px rgba(0,0,0,.5);
}
img.signin-img{
padding:0 2rem 2rem;
margin:auto;
display:block;
width:30%;
}
form.signin-form{
max-width: 360px;
margin:auto;
}
button.btn-signin{
color:white;
background-color:brown;
width:100%;
margin-bottom:1.2rem;
}
Output
Leave a Reply