Bootstrap Input Group Tutorial | Bootstrap Tutorials
×

Bootstrap Input Group

3549

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>

Result:




Best WordPress Hosting


Share:


Discount Coupons

Get a .COM for just $6.98

Secure Domain for a Mini Price



Leave a Reply


Comments
    Waiting for your comments