<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Second navbar for search -->
<nav class="navbar">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-3">
</button>
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Catastro</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-3">
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Buscar por código o rut" />
</div>
<button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>
</ul>
<div class="collapse nav navbar-nav nav-collapse" id="nav-collapse3">
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
<div class="wrapper">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
</div>
<footer></footer>
.navbar-brand { position: relative; z-index: 1;font-family: 'Lora', serif; font-size: x-large; top: 0.1em }
.navbar-nav.navbar-right .btn { position: relative; z-index: ; padding: 4px 20px; margin: 10px auto; transition: transform 0.3s; }
.navbar{background-color:#FCFEFF; border: 100px; border-color:#15233F;padding: 4px 20px;
}
.btn.btn-circle { border-radius: 50px; }
.btn.btn-outline { background-color: transparent; }
.navbar-nav.navbar-right .btn:not(.collapsed) {
background-color: #4775D1;
border-color: rgb(111, 84, 153);
color: rgb(252, 254, 255);
}
body { height: 100%;
background:#609
}
#wrapper{
background:#633
height: 100%;
}
footer{
position: relative;
margin-top: 50px; /* altura en px del footer con valor negativo */
height: 100px; /* Altura del Footer en px*/
clear: both;
background: rgba(75,80,232,1);
background: -moz-linear-gradient(left, rgba(75,80,232,1) 0%, rgba(32,124,229,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(75,80,232,1)), color-stop(100%, rgba(32,124,229,1)));
background: -webkit-linear-gradient(left, rgba(75,80,232,1) 0%, rgba(32,124,229,1) 100%);
background: -o-linear-gradient(left, rgba(75,80,232,1) 0%, rgba(32,124,229,1) 100%);
background: -ms-linear-gradient(left, rgba(75,80,232,1) 0%, rgba(32,124,229,1) 100%);
background: linear-gradient(to right, rgba(75,80,232,1) 0%, rgba(32,124,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b50e8', endColorstr='#207ce5', GradientType=1 );
}
