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>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
   <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#">Start Bootstrap</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav">
            <li>
               <a href="#">About</a>
            </li>
            <li>
               <a href="#">Services</a>
            </li>
            <li>
               <a href="#">Contact</a>
            </li>
         </ul>
      </div>
      <!-- /.navbar-collapse -->
   </div>
   <!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
   <!-- Page Header -->
   <h1 class="page-header">Page Heading
      <small>Secondary Text</small>
   </h1>
   <!-- Project Row -->
   <div class="row project-row">
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
   </div>
   <!-- /.row -->
   <hr>
   <!-- Pagination -->
   <div class="text-center">
      <ul class="pagination">
         <li>
            <a href="#">&laquo;</a>
         </li>
         <li class="active">
            <a href="#">1</a>
         </li>
         <li>
            <a href="#">2</a>
         </li>
         <li>
            <a href="#">3</a>
         </li>
         <li>
            <a href="#">4</a>
         </li>
         <li>
            <a href="#">5</a>
         </li>
         <li>
            <a href="#">&raquo;</a>
         </li>
      </ul>
   </div>
   <hr>
   <!-- Footer -->
   <footer>
      <p>Copyright &copy; Your Website 2014</p>
   </footer>
</div>
<!-- /.container -->
​
​
</body>
</html>
Output

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

Dismiss x
public
Bin info
carasmopro
0viewers