Menu
I have this code below which consist of a simple HTML, what i am trying to accomplish is to make this form mobile responsive. I have tried to add bootstrap's grid to my code but it still doesn't seem to work when i minimize the screen.
This is what i get when i minimize my screen with my current codes.
This is what i want my form to look like when i minimize the screen. Is there an easy way to accomplish this? Any help would be greatly appreciated.
$().ready(function() {
// validate the comment form when it is submitted
$("#commentForm").validate();
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
fname: "required",
lname: "required",
password: {
required: true,
minlength: 8
},
cpassword: {
required: true,
minlength: 8,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "Your first name is required.",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Password must be 8 characters long"
},
cpassword: {
required: "Please provide a password",
minlength: "Password must be 8 characters long",
equalTo: "Password do not match!"
},
email: "Please enter a valid email address",
}
});
});* {
box-sizing:border-box;
}
input[type="text"],
input[type="email"],
input[type="password"] {
padding: 4px 20px;
height: 35px;
border: 1px solid black;
border-radius: 3px;
width:100%;
}
.form-row {
flex-direction: row;
display: flex;
}
.form-row > div {
margin: 10px;
flex-grow:1;
}
.form-panel {
margin-left: auto;
margin-right: auto;
width: 60%;
}
label{
color:#d54445;
margin-left: 2px;
margin-top: 5px;
}
input {
display: block;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
</head>
<body>
<form class="form-panel" id="signupForm">
<div class="form-row form-name">
<div class="col-sm-3"><input type="text" name="fname" id="fname" placeholder="First Name"></div>
<div class="col-sm-3"><input type="text" name="lname" id="lname" placeholder="Last Name"></div>
</div>
<div class="form-row form-email">
<div class="col-sm-6"><input type="email" name="email" id="email" placeholder="Email Address"></div>
</div>
<div class="form-row form-password">
<div class="col-sm-3"><input type="password" name="password" id="password" placeholder="Password"></div>
<div class="col-sm-3"><input type="password" name="cpassword" id="cpassword" placeholder="Comfirm Password"></div>
</div>
<input type="submit" class="btn btn-default submit-button" value="Sign up!">
</form>
</body>
</html>
405
Seems that you forgot to include the Bootsrap CDN in your HTML, besides you need to add col-sm for small devices plus col-md for medium, is this what you were trying to accomplish?
$().ready(function() {
// validate the comment form when it is submitted
$("#commentForm").validate();
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
fname: "required",
lname: "required",
password: {
required: true,
minlength: 8
},
cpassword: {
required: true,
minlength: 8,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "Your first name is required.",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Password must be 8 characters long"
},
cpassword: {
required: "Please provide a password",
minlength: "Password must be 8 characters long",
equalTo: "Password do not match!"
},
email: "Please enter a valid email address",
}
});
});* {
box-sizing:border-box;
}
input[type="text"],
input[type="email"],
input[type="password"] {
padding: 4px 20px;
height: 35px;
border: 1px solid black;
border-radius: 3px;
width:100%;
}
.form-row > div {
margin-bottom: 10px;
}
.form-panel {
margin-left: auto;
margin-right: auto;
width: 60%;
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<form class="form-panel" id="signupForm">
<div class="form-row form-name">
<div class="col-12 col-md-3"><input type="text" name="fname" id="fname" placeholder="First Name"></div>
<div class="col-12 col-md-3"><input type="text" name="lname" id="lname" placeholder="Last Name"></div>
</div>
<div class="form-row form-email">
<div class="col-12 col-md-6"><input type="email" name="email" id="email" placeholder="Email Address"></div>
</div>
<div class="form-row form-password">
<div class="col-12 col-md-3"><input type="password" name="password" id="password" placeholder="Password"></div>
<div class="col-12 col-md-3"><input type="password" name="cpassword" id="cpassword" placeholder="Comfirm Password"></div>
</div>
<input type="submit" class="btn btn-default submit-button" value="Sign up!">
</form>
</body>
</html> 
answered Mar 12 '26 05:03
You don't need bootstrap for this, you should use media queries : https://www.w3schools.com/css/css3_mediaqueries_ex.asp
For exemple, you could change width to 100% when screen is lower than 600px.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
