Bootstrap Input Group

0 3884

Bootstrap Input Group is use for login password section in website or webpage. We can do it in simple html easily, but why we are using bootstrap. Because in bootstrap, we don't need to give the sizes as per computer screens, through bootstrap input group it's auto adjust as per computer screen.opy paste below example in your website or web page and see the result.. You can modify the code as per your requirement.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-Bootstrap css file->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>

<body>

<div class="container">
<h1> Bootstrap Input Group </h1>

<form>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"> </span></span>
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon"> <span class="glyphicon glyphicon-lock"></span> </span>
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
</div>
</div>
</form>

</div>

<!- End Container ->

<!- Bootstrap js file ->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>

</body>

</html>