InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
Create Inline form in Bootstrap |
|
Answer» Inline forms are the forms in which the elements are inline and left-aligned. To CREATE an inline form, include Bootstrap class .form-inline to the <form> tag. Let us see an example: Note: Resize the web browser to see the effect <!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> </head> <body> <div class="container"> <h2>Inline Form in Bootstrap</h2> <form class="form-inline" action=""> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="PWD">Password:</label> <input type="password" class="form-control" id="pwd"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </body> </html>Here is the output when the screen size is below 767 px: Here is the output when the screen size is above 767 px. All the elements are now inline and left-aligned |
|