Bootstrap Form Fun

Developer
Thomas Hare
Size
2,424 Kb
Views
18,216
  1. Bootstrap Form Fun Previews
  2. Bootstrap Form Fun HTML Codes
  3. Bootstrap Form Fun CSS Codes
  4. Bootstrap Form Fun JS Codes

How do I make an bootstrap form fun?

What is a bootstrap form fun? How do you make a bootstrap form fun? This script and codes were developed by Thomas Hare on 17 November 2022, Thursday.

Bootstrap Form Fun Previews
IQ Test

Bootstrap Form Fun - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bootstrap Form Fun</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <form> <div class="col-xs-12" id="toggle_buttons"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input name="account" id="gold" type="radio" checked>Gold </label> <label class="btn btn-primary"> <input name="account" id="Silver" type="radio">Silver </label> <label class="btn btn-primary disabled"> <input name="account" id="bronze" type="radio">Bronze </label> </div> </div>
</form>
<form class="form-inline col-xs-12" id="formchanger"> <div class="form-group col-xs-12"> <button class="btn btn-success btn-sm" id="formchanger_btn">Change Form</button> </div> <div class="form-group col-xs-10"> <span> <label class="control-label" for="email">Email</label> </span> <input class="form-control" id="email" placeholder="Email"> <span> <label class="control-label" for="password">Password</label> </span> <input class="form-control" id="password" placeholder="Password" type="text"> </div> <div class="form-group col-xs-10"> <span> <label class="control-label" for="birthday" type="password">Birthday</label> </span> <input class="form-control" id="birthday" placeholder="Birthday" type="date"> </div>
</form>
<div class="col-xs-12"> <div class="pie-graph"> <div class="pie-slice val-5"></div> <div class="pie-slice val-25"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Bootstrap Form Fun - Script Codes CSS Codes

#toggle_buttons { margin: 2rem 3.5rem; padding: 0;
}
#formchanger { border: solid #CCC 1px; padding: 1rem 2rem;
}
#formchanger .form-group+.form-group { margin-top: 1rem;
}
.pie-graph { background-color: #DDD; border-radius: 100%; height: 100px; margin: 1rem 0; overflow: hidden; width: 100px;
}
.pie-slice { border-style: solid; height: 50%; width: 50%;
}
.pie-slice .val-5 { border-color: transparent transparent #F00 #F00; border-width: 0 50px 50px 50px; margin: 0px 0 0 0px;
}
.pie-slice .val-25 { border-color: transparent transparent #00F #00F; border-width: 0 0px 50px 50px; transform: rotate(90deg); margin: 0px 0 0 0px;
}

Bootstrap Form Fun - Script Codes JS Codes

// When someone clicks the form changer button, toggle the form layout between horizontal and inline.
$('#formchanger_btn').click(function(e) { // Prevent the page from reloading on click. e.preventDefault(); // Toggle the form's class from form-inline to its default state 'form-vertical' $('#formchanger').toggleClass('form-inline');
});
Bootstrap Form Fun - Script Codes
Bootstrap Form Fun - Script Codes
Home Page Home
Developer Thomas Hare
Username tommyhare
Uploaded November 17, 2022
Rating 3
Size 2,424 Kb
Views 18,216
Do you need developer help for Bootstrap Form Fun?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Thomas Hare (tommyhare) Script Codes
Name
Simple Passwords
Bootstrap V4 tabs
Swipe View
Simple Login
Material UI
Slate v2
Table Classes
12 Column Grid Framework In 12 Lines of Code
The Initiator
Random Drawing
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!