Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
​
<div class="bs-example">
    <form>
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Search</button>
        <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Search</button>
    </form>
</div>
  
<hr>
  
<div class="bs-example">
    <h3>Tabs with icons</h3>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>  Home</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Messages</a></li>
    </ul>
    <hr>
    <h3>Pills nav with icons</h3>
    <ul class="nav nav-pills">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>  Home</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Messages</a></li>
    </ul>
</div>
 
<hr>
  
<div class="bs-example">
    <div class="btn-group">
        <button class="btn btn-info"><span class="glyphicon glyphicon-file"></span> Document</button>
        <button data-toggle="dropdown" class="btn btn-info dropdown-toggle"><span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-share"></span> Share</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-print"></span> Print</a></li>
            <li class="divider"></li>
            <li><a href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a></li>
        </ul>
    </div>
</div>
​
<hr>
  
<div class="bs-example">
  <form class="form-inline">
    <div class="row">
      <div class="col-xs-4">
        <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-xs-4">
        <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 class="col-xs-4">
        <button type="submit" class="btn btn-primary">Login</button>
      </div>
    </div>
  </form>
</div>
  
<hr>
​
​
  
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
timdrichardspro
0viewers