<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="navbar navbar-default navbar-static-top" role="navigation"> <!--<div class="navbar navbar-default">--> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="<?php echo site_url('web');?>">Tukar Buku</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="<?php echo site_url('web');?>"><i class="glyphicon glyphicon-home"></i> Home</a></li> <li><a href="<?php echo site_url('web/howtoswap');?>">How to Swap Books</a></li> <!-- controller pada web dengan function howtoswap --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Top 100 <b class="caret"></b></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Top 100 Wishlisted Books</a></li> <li><a href="#">Top 100 Posted Books</a></li> <li><a href="#">Top 100 Swappers</a></li> <!--<li><a href="#">Top 100 Referres</a></li>--> <li class="divider"></li> </ul> </li> <li><a href="<?php echo site_url('web/contactus');?>">Contact us</a></li> <!--controller pada web dengan function contactus --> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="<?php echo site_url('web/register');?>">Sign Up</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown">Sign in <b class="caret"></b></a> <ul class="dropdown-menu" style="padding: 15px;min-width: 250px;"> <li> <div class="row"> <div class="col-md-12"> <form class="form" role="form" action="<?php echo site_url('web/proses');?>" method="post"> <?php echo $this->session->flashdata('message');?> <div class="form-group"> <label class="sr-only" for="InputEmail3">Username</label> <input type="text" name="username" class="form-control" id="InputEmail3" placeholder="Username" required> </div> <div class="form-group"> <label class="sr-only" for="inputPassword3">Password</label> <input type="password" name="password" class="form-control" id="inputPassword3" placeholder="Password" required> </div> <div class="checkbox"> <label> <input type="checkbox"> Test Cookies </label> </div> <div class="form-group"> <button type="submit" class="btn btn-success btn-block">Sign in</button> </div> <li class="divider"></li> <li> <input class="btn btn-primary btn-block" type="button" id="sign-in-google" value="Coba Facebook"> <input class="btn btn-primary btn-block" type="button" id="sign-in-twitter" value="Coba Twitter"> </li> </form> </div> </div> </li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </div> <!-- <div class="jumbotron"> <div class="container"> <div class="row"> <div class="col-md-8"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> </div> <div class="col-md-3"> <div class="input-group custom-search-form"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button"> <span class="glyphicon glyphicon-search"></span> </button> </span> </div><!-- /input-group </div> </div> </div> </div> --> <div class="container"> <div class="row"> <div class="col-md-3 col-md-offset-4"> <!-- Tengah --> <form class="form" role="form" action="<?php echo site_url('web/register');?>" method="post"> <legend><h1>SIGN UP for FREE !</h1></legend> <p class="teks">Punya buku yang tidak dibaca lagi ?</p> <p>Bosen bukunya itu-itu aja ?</p> <p>Ayo daftarkan diri Anda secara GRATIS !</p> <br/> <br/> <button type="submit" class="btn btn-success btn-block">Sign Up</button> </form> </div> </div> </div> <div class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> <p class="navbar-text pull-left">Copyright © 2014 Tukar Buku. All Right Reserved. <!-- <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a> </p> <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right"> <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a> --> </div> </div>

.custom-search-form{ margin-top:30px; }