Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by chrischilcoat

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<div class="ui-yakabox-drag-and-drop-wrapper">

  <div class="ui-yakabox-text-divider">
    <span>Drag & drop files bellow</span>
  </div>
  
  <div class="ui-yakabox-drag-and-drop-main text-center">
    <span class="far fa-file fa-2x"></span>
    <h3>Uplooad a Document</h3>
    <p class="text-muted">Drop Files Here</p>
    <button class="btn btn-primary" aria-label="Upload a Document">Upload</button>
  </div>
  
  <div class="ui-yakabox-drag-and-drop-search">
    <div class="input-group">
      <span class="input-group-addon"><span class="fa fa-search"></span></span>
      <input type="text" class="form-control quicksearch"  aria-label="Search Document Types" placeholder="Search">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Filter by Teams">All Teams <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right"  tabindex="-1" role="listbox">
          <li><a role="option" href="#">All Teams</a></li>
          <li><a role="option" href="#">Team 1</a></li>
          <li><a role="option" href="#">Team 2</a></li>
          <li><a role="option" href="#">Team 3</a></li>
          <li><a role="option" href="#">Team 4</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="ui-yakabox-drag-and-drop-grid ybx-proto-yakabox-drag-and-drop-grid">
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-4 text-center" role="button" aria-label="Upload File" tabIndex="0">
          <span...

SCSS

body {
    margin: 50px;
}

.ui-yakabox-drag-and-drop-wrapper {
  
  .ui-yakabox-drag-and-drop-main{
    padding:30px 0;
    h3 {
      margin: 9px;
    }
    .text-muted {
      display:none;
    }
  }
  .ui-yakabox-drag-and-drop-search {
    .input-group-addon {
      background:none;
      border:none;
      padding-right:0;
    }
    .form-control {
      background:none;
      border:none;
      box-shadow:none;
      padding-left:5px;
    }
    .form-control:focus {
      background:#d9edf7;
    }
    .input-group-btn {
      .btn {
        background:transparent;
        border:transparent;
      }
      .btn:focus {
            background:#d9edf7;
      }
    }
  }
  .ui-yakabox-drag-and-drop-grid {
    border-bottom: 1px dashed #ccc;
    .container-fluid {
      .row {
      margin:0;
        .col-xs-4 {
          min-height:169px;
          border-top: 1px dashed #ccc;
          border-right: 1px dashed #ccc;
          padding:50px 10px 10px;
          position:relative;
          .btn-link {
            padding:0;
            display:none;
            text-decoration:none;
          }
          .text-muted {
            display:none;
          }
          &:hover, &:focus {
            background:#d9edf7;
            cursor:pointer; 
            .btn-link {
              display:block;
              margin: 0 auto;
            }
          }
        }
        .col-xs-4:nth-child(3n) {
          border-right: none;
        }
      }
    }
  }
  
}



.ui-yakabox-text-divider {
  position: relative;
  border-top: 1px dashed #ccc;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  height: 5px;
  > span {
    background: white;
    position: relative;
    top: -10px;
    text-transform: uppercase;
    padding: 0 18px;
  }
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

$('.ybx-proto-yakabox-drag-and-drop-grid .col-xs-4, .ui-yakabox-drag-and-drop-main')
  .bind('dragover', function() {
    $(this).css({'box-shadow' : 'inset 0px 0px 20px rgba(0, 0, 0, 0.1)', 'border' : '4px dashed black'});
    $(this).find('.text-muted').show();
    return false;
  })
  .bind('dragleave', function() {
    $(this).css({'box-shadow' : '', 'border' : ''});
    $(this).find('.text-muted').hide();
    return false;
  });



// quick search regex
var qsRegex;

// init Isotope
var $grid = $('.ybx-proto-yakabox-drag-and-drop-grid').isotope({
  itemSelector: '.col-xs-4',
  layoutMode: 'fitRows',
  filter: function() {
    return qsRegex ? $(this).text().match( qsRegex ) : true;
  }
});

// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
  qsRegex = new RegExp( $quicksearch.val(), 'gi' );
  $grid.isotope();
}, 200 ) );

// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
  var timeout;
  threshold = threshold || 100;
  return function debounced() {
    clearTimeout( timeout );
    var args = arguments;
    var _this = this;
    function delayed() {
      fn.apply( _this, args );
    }
    timeout = setTimeout( delayed, threshold );
  };
}