Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
Bootstrap Horizontal Forms Example
Keywords : form, bootstrap, bootstrap form, bootstrap forms, bootstrap form examples, bootstrap form group, bootstrap form controls, bootstrap horizontal forms, bootstrap horizontal forms examples
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Horizontal Forms Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .bcontent { margin-top: 10px; } </style> </head> <body> <div class="container-fluid bcontent"> <h2>Bootstrap Horizontal Forms</h2> <hr /> <form> <div class="form-group row"> <label for="email" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> </div> <div class="form-group row"> <label for="password" class="col-sm-2 col-form-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> </div> <div class="form-group row"> <label for="gender" class="col-sm-2 col-form-label">Gender</label> <div class="col-sm-10"> <div class="form-check"> <input class="form-check-input" type="radio" name="genderadios" id="rdbmale" value="male" checked> <label class="form-check-label" for="gridRadios1">Male</label> </div> <div class="form-check"> <input type="radio" class="form-check-input" name="genderadios" id="rdbfemal" value="female"> <label class="form-check-label" for="gridRadios2">Female</label> </div> </div> </div> <div class="form-group row"> <label for="fileupload" class="col-sm-2 col-form-label">Profile Pic</label> <div class="col-sm-10"> <input type="file" class="form-control-file" id="imgUpload"> </div> </div> <div class="form-group row"> <div class="col-sm-10 offset-sm-2"> <div class="form-check"> <input type="checkbox" class="form-check-input" id="chkletters"> <label class="form-check-label" for="NewlettersCheck">Subscribe to newsletters</label> </div> </div> </div> <div class="form-group row"> <div class="col-sm-10 offset-sm-2"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </form> </div> </body> </html>
Click Here to See Result
Result
Previous
Next
