Part 20 Bootstrap Forms

Developer
Size
2,186 Kb
Views
16,192

How do I make an part 20 bootstrap forms?

This are examples for Form layout provided by bootstrap. Basically 3 form layout is provided 1. Vertical 2.InLine 3. Horizontal.. What is a part 20 bootstrap forms? How do you make a part 20 bootstrap forms? This script and codes were developed by Venkatesh on 22 November 2022, Tuesday.

Part 20 Bootstrap Forms Previews

Part 20 Bootstrap Forms - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Part 20 Bootstrap Forms</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body> <div class="container"> <div class="row"> <div class="col-sm-12"> <h1>Bootstrap Forms</h1> <p>Form layout provided by bootstrap are</p> <ol> <li>Vertical</li> <li>Horizontal</li> <li>Inline</li> </ol> <p>Following classes used to style forms</p> <table class="table table-bordered"> <tr> <th>Class</th> <th>Description</th> </tr> <tr> <td><code>form-group</code></td> <td>Wrap labels around the form control for optimum spacing</td> </tr> <tr> <td><code>form-control</code></td> <td>class for all textual elements</td> </tr> <tr> <td><code>form-inline</code></td> <td></td> </tr> <tr> <td><code>form-horizontal</code></td> <td></td> </tr> <tr> <td><code>control-label</code></td> <td></td> </tr> </table> </div> </div> <div class="row"> <div class="col-sm-12"> <h4>Form without any bootstrap classes</h4> <form action=""> <div><label for="inputUserName">User Name</label> <input type="text" id="inputUserName" /> </div> <div><label for="inputPassword" class="for">Password</label> <input type="password" id="inputPassword" /> </div> <div> <input type="submit" value="Login" /> </div> </form> </div> </div> <div class="row"> <div class="col-sm-12"> <h4>Default bootstrap form (Vertical) </h4> <form action=""> <div class="form-group"> <label for="inputUName">User Name</label> <input type="text" id="inputUName" class="form-control" placeholder="Enter User Name" /> </div> <div class="form-group"> <label for="inputUserPassword">Password</label> <input type="password" id="inputUserPassword" class="form-control" placeholder="Enter Password" /> </div> <button class="btn btn-default">Submit</button> </form> </div> <div class="row"> <div class="col-md-4"> <form action=""> <div class="form-group"> <label for="inptName">Name</label> <input type="text" id="inptName" class="form-control" placeholder="Enter Name" /> </div> <input type="submit" value="Submit" class="btn btn-default" /> </form> </div> </div> <div class="row"> <div class="col-sm-12"> <h4>In Line Form </h4> <form class="form-inline"> <div class="form-group"> <label for="inputUserName">Username</label> <input class="form-control" placeholder="Login Username" type="text" id="inputUserName" /> </div> <div class="form-group"> <label for="inputPassword">Password</label> <input class="form-control" placeholder="Login Password" type="password" id="inputPassword" /> </div> <button type="submit" class="btn btn-default">Login</button> </form> </div> </div> <div class="row"> <div class="col-sm-12"> <h4>Horizontal Form </h4> <form class="form-horizontal"> <div class="form-group"> <label for="inputUserName" class="control-label col-sm-2">Username</label> <div class="col-sm-10"> <input class="form-control" placeholder="Login Username" type="text" id="inputUserName" /> </div> </div> <div class="form-group"> <label for="inputPassword" class="control-label col-sm-2">Password</label> <div class="col-sm-10"> <input class="form-control" placeholder="Login Password" type="password" id="inputPassword" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Login</button> </div> </div> </form> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>
Part 20 Bootstrap Forms - Script Codes
Part 20 Bootstrap Forms - Script Codes
Home Page Home
Developer Venkatesh
Username venkatesha
Uploaded November 22, 2022
Rating 3
Size 2,186 Kb
Views 16,192
Do you need developer help for Part 20 Bootstrap Forms?

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!

Venkatesh (venkatesha) Script Codes
Create amazing Facebook ads 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!