Topic: change a value from 768px to 300px
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(window).resize(function(){
var winwidth =$(window).width();
// $("div").text( winwidth);
if(($(window).width() < 300) &&
($("form").hasClass("form-horizontal") == true))
{$("form").removeClass("form-horizontal");
$("label").removeClass("col-sm-2");
$(".group").removeClass("col-sm-10");}
if ( $(window).width() > 300) {
$("form").addClass("form-horizontal");
$("label").addClass("col-sm-2");
$(".group").addClass("col-sm-10");
$(".test").text( winwidth);
}
else {
// if ($("form").hasClass("form-horizontal") == true){
$("form").removeClass("form-horizontal");
$("label").removeClass("col-sm-2");
$(".group").removeClass("col-sm-10");
//$("div").text( winwidth);
}
});
</script>
<style>
.group{
color:red;
};
</style>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<div>
</div>
<form action="/action_page.php">
<div class="form-group">
<div class="test">
</div>
</div>
<div class="form-group">
<label for="email">Email:</label>
<div class="group">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<div class="group">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
Ineedto change the value of 768px to 300px, pleasehelp me,frank
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: pc
- Browser: chrome
- OS: windows 7
- Provided sample code: No
- Provided link: No
Piotr Glejzer staff commented 5 years ago
Hi,
you have an error in a console that suggests is "$" is not defined. That's mean you try to initiate jQuery function before load jQuery. You have to move that script tag with code below your last <div> tag.
Here is example.
https://mdbootstrap.com/snippets/jquery/piotr-glejzer/162919
Best,
Piotr