1.

Horizontal Form in Bootstrap

Answer»

The form-horizonal class is used in Bootstrap for HORIZONTAL form. The labels are aligned horizontally next to the input field on large and medium screens. However, on small screens i.e. < 767px, it will get converted to a vertical form. The form would then look like labels on top of each input).

Let us see a code to understand it:

<!DOCTYPE html&GT; <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>Horizontal Form in Bootstrap</h2>   <form class="form-horizontal" action="">   <div class="form-group">     <label class="control-label col-sm-2" for="email">USERID(Email):</label>     <div class="col-sm-10">       <input type="email" class="form-control" id="useremail" placeholder="Enter email">     </div>   </div>   <div class="form-group">     <label class="control-label col-sm-2" for="pwd">Password:</label>     <div class="col-sm-10">       <input type="password" class="form-control" id="pwd" placeholder="Enter password">     </div>   </div> </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:


Discussion

No Comment Found

Related InterviewSolutions