Generic Bootstrap Mockup

In this example below you will see how to do a Generic Bootstrap Mockup with some HTML / CSS and Javascript

Minimal member driven website

Thumbnail
This awesome code was written by ineedthekeyboard, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ineedthekeyboard ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Generic Bootstrap Mockup</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet prefetch' href='https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Roboto:300,400,700'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="page landing">
  <div class="page-wrapper container-fluid">
    <div class="topbar">
      <div class="inner">
        <div class="row">
          <div class="col-sm-2 col-xs-12">
            <div class="brand">Bazaar</div>
          </div>
          <div class="col-sm-10 col-xs-12">
            <nav class="nav nav-masthead">
              <a class="nav-link store" href="#">Store</a>
              <a class="nav-link account" href="#">Account</a>
              <a class="nav-link signin" href="#">Sign in</a>
              <a class="nav-link admin" href="#">Admin</a>
            </nav>
          </div>
        </div>
        <!--         <div class="brand">Bazaar</div>
        <nav class="nav nav-masthead">
          <a class="nav-link store" href="#">Store</a>
          <a class="nav-link account" href="#">Account</a>
          <a class="nav-link signin" href="#">Sign in</a>
        </nav> -->
      </div>
    </div>
    <div class="hero">
      <div class="inner cover">
        <h1 class="cover-heading">Welcome to the Bazaar.</h1>
        <p class="lead">The bazaar is the best place to buy you basic doodads. Order small or large volumes now. Try us now and see what you have been missing all this time. <br> For a limited time get 10% off orders over $1 (in select countries only)</p>
        <p class="lead">
          <a href="#" class="btn btn-lg btn-secondary store">Buy Now</a>
        </p>
      </div>
    </div>


  </div>
</div>
<!-- *** -->
<div class="page login">
  <div class="page-wrapper">
    <form class="form">
      <h2 class="form-signin-heading">Sign in</h2>
      <label for="inputEmail" class="sr-only">Email</label>
      <input type="email" id="inputEmail" class="form-control" placeholder="Email" required="" autofocus="">
      <label for="inputPassword" class="sr-only">Password</label>
      <input type="password" id="inputPassword" class="form-control" placeholder="Password" required="">
      <br>
      <button class="btn btn-lg btn-primary btn-block signinBtn" type="submit">Sign in</button>
      <br>
      <label style="text-decoration:underline;">Not a memeber?</label>
      <button class="btn btn-lg btn-primary btn-block signupBtn">Sign up</button>
    </form>
  </div>
</div>
<!-- ***  -->
<div class="page signup">
  <div class="page-wrapper">
    <form class="form">
      <h2 class="form-signin-heading">Sign up</h2>
      <label for="inputEmail" class="sr-only">Email</label>
      <input type="email" id="inputEmail" class="form-control" placeholder="Email" required="" autofocus="">
      <label for="inputPassword" class="sr-only">Password</label>
      <input type="password" id="inputPassword" class="form-control" placeholder="Password" required="">
      <label for="inputPasswordConfirm" class="sr-only">Confirm Password</label>
      <input type="password" id="inputPasswordConfirm" class="form-control" placeholder="Confirm Password" required="">
      <br>
      <button class="btn btn-lg btn-primary btn-block signupBtn" type="submit">Sign up</button>
      <br>
      <label style="text-decoration:underline;">Already a memeber?</label>
      <button class="btn btn-lg btn-primary btn-block signinBtn">Sign in</button>
    </form>
  </div>
</div>
<!-- ***  -->
<div class="page store">
  <div class="container-fluid">
    <div class="topbar">
      <div class="inner">
        <div class="brand">Bazaar</div>
        <nav class="nav nav-masthead">
          <a class="nav-link store" href="#">Store</a>
          <a class="nav-link account" href="#">Account</a>
          <a class="nav-link signinBtn" href="#">Sign in</a>
        </nav>
      </div>
    </div>
    <div class="title">The Shop</div>
    <div class="subtitle">Get the latest in trending items</div>
    <div class="searchContainer">
      <label for="inputSearch" class="sr-only">Search</label>
      <input type="text" id="inputSearch" class="form-control search" placeholder="Search">
    </div>
    <button class="btn btn-default btn-lg btn-block disabled orderBtn">Order</button>
    <table class="table table-striped table-hover">
      <thead>
        <tr>
          <td class="name">Name</td>
          <td class="number">Number</td>
          <td class="price">Price</td>
          <td class="units">Units</td>
          <td class="del">Delete?</td>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
  </div>
</div>
<!-- ** -->
<div class="page account">
  <div class="topbar">
    <div class="inner">
      <div class="brand">Bazaar</div>
      <nav class="nav nav-masthead">
        <a class="nav-link store" href="#">Store</a>
        <a class="nav-link account" href="#">Account</a>
        <a class="nav-link signin" href="#">Sign in</a>
      </nav>
    </div>
  </div>
  <div class="container-fluid">
    <div class="card">
      <div class="card-contents">
        <div class="row">
          <div class="col-sm-12 text-center">
            <i class="material-icons header">accessibility</i>
          </div>
        </div>
        <div class="row">
          <h3 class="text-center">YourName @gmail.com</h3>
        </div>
        <div class="row toolbar">
          <div class="col-xs-4 text-center">
            <i class="material-icons active" data-id="account">settings_applications</i>
          </div>
          <div class="col-xs-4 text-center">
            <i class="material-icons" data-id="order">reorder</i>
          </div>
          <div class="col-xs-4 text-center">
            <i class="material-icons" data-id="payment">credit_card</i>
          </div>
        </div>
      </div>
    </div>
    <div class="card details">
      <h3 class="hero account">Account Details</h3>
      <h3 class="hero order" style="display:none;">Order History</h3>
      <h3 class="hero payment" style="display:none;">Payment Settings</h3>
      <div class="details-content account">
        <div class="row">
          <div class="col-xs-12">
            <span>Email Address:</span><input style="display:inline;" class="form-control" type="text" value="yourname@gmail.com" disabled/>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <span>Member Since:</span><input style="display:inline;" class="form-control" type="date" value="2016-09-17" disabled/>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
<!-- ** -->
<div class="page admin">
  <div class="page-wrapper container-fluid">
    <div class="topbar">
      <div class="row">
        <div class="col-sm-2 col-xs-12">
          <div class="brand">Bazaar</div>
        </div>
        <div class="col-sm-10 col-xs-12">
          <nav class="nav nav-masthead">
            <a class="nav-link store" href="#">Store</a>
            <a class="nav-link account" href="#">Account</a>
            <a class="nav-link signin" href="#">Sign in</a>
            <a class="nav-link admin" href="#">Admin</a>
          </nav>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 text-center hero"><h3>Admin Panel</h3></div>
    </div>
    <div class="content-container">
      <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Dashboard</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Orders</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Products</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Debug</a>
        </li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div class="tab-pane active" id="home" role="tabpanel">...</div>
        <div class="tab-pane" id="profile" role="tabpanel">...</div>
        <div class="tab-pane" id="messages" role="tabpanel">...</div>
        <div class="tab-pane" id="settings" role="tabpanel">...</div>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ineedthekeyboard/generic-bootstrap-mockup-ObzRYP */
html,
body {
  font-size: 1em;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 3px;
  height: 100%;
  background-color: rgba(45, 45, 25, 0.01);
}

.text-center {
  text-align: center;
}

.ui-menu-item-wrapper {
  text-transform: capitalize;
  letter-spacing: 0rem;
}

.page.admin {
  background-color: #113838;
  height: 100%;
  overflow: auto;
}
.page.admin .topbar {
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem;
  color: white;
}
.page.admin .topbar .brand {
  font-weight: 700;
  text-transform: uppercase;
  float: left;
  margin-bottom: 0rem;
}
.page.admin .topbar .nav-masthead {
  font-weight: 400;
}
.page.admin .topbar .nav-masthead .nav-link {
  margin: 0 .5rem 0 .5rem;
  color: white;
}
.page.admin .topbar .nav-masthead .nav-link:hover {
  font-weight: 700;
}
.page.admin .topbar .nav-masthead .nav-link.active {
  text-decoration: underline;
  border-bottom-color: black;
}
.page.admin .hero {
  color: white;
  padding: 1rem;
}
.page.admin .content-container .nav .nav-item a:not(.active) {
  color: white;
}
.page.admin .content-container .tab-content .tab-pane {
  color: white;
}

.page.landing {
  display: table;
  width: 100%;
  height: 100%;
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.5);
}
.page.landing .page-wrapper {
  background-image: url("http://www.shadesofdepth.com/spicetrade/stock.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  display: table-cell;
  vertical-align: top;
  text-align: center;
}
.page.landing .page-wrapper .topbar {
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem;
  color: white;
}
.page.landing .page-wrapper .topbar .brand {
  font-weight: 700;
  text-transform: uppercase;
  float: left;
  margin-bottom: 0rem;
}
.page.landing .page-wrapper .topbar .nav-masthead {
  font-weight: 400;
}
.page.landing .page-wrapper .topbar .nav-masthead .nav-link {
  margin: 0 .5rem 0 .5rem;
  color: white;
}
.page.landing .page-wrapper .topbar .nav-masthead .nav-link:hover {
  font-weight: 700;
}
.page.landing .page-wrapper .topbar .nav-masthead .nav-link.active {
  text-decoration: underline;
  border-bottom-color: black;
}
.page.landing .page-wrapper .hero {
  color: white;
  padding: 1rem;
}

.page.store {
  background-color: #113838;
  height: 100%;
  overflow: auto;
}
.page.store .topbar {
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem;
  color: white;
}
.page.store .topbar .brand {
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  float: left;
  margin-bottom: 0rem;
}
.page.store .topbar .nav-masthead {
  font-weight: 400;
}
.page.store .topbar .nav-masthead .nav-link {
  margin: 0 .5rem 0 .5rem;
  color: white;
}
.page.store .topbar .nav-masthead .nav-link:hover {
  font-weight: 700;
}
.page.store .topbar .nav-masthead .nav-link.active {
  text-decoration: underline;
  border-bottom-color: black;
}
.page.store .title {
  color: white;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
  padding: 1rem 0 0 0;
}
.page.store .subtitle {
  color: white;
  text-transform: none;
  letter-spacing: 2px;
  font-size: 1rem;
  font-weight: 300;
  text-align: center;
  padding: 0 0 1rem 0;
}
.page.store .searchContainer {
  padding: 0 0 1rem 0;
}
.page.store .searchContainer .search {
  width: 100%;
}
.page.store .orderBtn {
  margin: 0rem auto 1rem auto;
  width: 10rem;
}
.page.store table {
  color: white;
}

.page.account {
  background-color: #113838;
  height: 100%;
  overflow: auto;
  color: white;
}
.page.account .topbar {
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem;
  color: white;
}
.page.account .topbar .brand {
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  float: left;
  margin-bottom: 0rem;
}
.page.account .topbar .nav-masthead {
  font-weight: 400;
}
.page.account .topbar .nav-masthead .nav-link {
  margin: 0 .5rem 0 .5rem;
  color: white;
}
.page.account .topbar .nav-masthead .nav-link:hover {
  font-weight: 700;
}
.page.account .topbar .nav-masthead .nav-link.active {
  text-decoration: underline;
  border-bottom-color: black;
}
.page.account .card {
  width: 100%;
  background-color: #316f6f;
  padding: 1rem;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 4px;
}
.page.account .card i.header {
  font-size: 5rem;
}
.page.account .card .toolbar {
  padding-top: 1rem;
}
.page.account .card .toolbar i {
  font-size: 2.4rem;
}
.page.account .card .toolbar i.active {
  color: #113838;
}
.page.account .card .toolbar i:hover {
  color: #051f1f;
  cursor: pointer;
  cursor: hand;
}
.page.account .details .hero {
  text-align: center;
  padding-bottom: 1rem;
}
.page.account .details .details-content .row {
  margin-bottom: 1rem;
}

.page.login,
.page.signup {
  display: table;
  width: 100%;
  height: 100%;
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.5);
}
.page.login .page-wrapper,
.page.signup .page-wrapper {
  background-color: #113838;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  display: table-cell;
  vertical-align: top;
  text-align: center;
}
.page.login .page-wrapper.blur,
.page.signup .page-wrapper.blur {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}
.page.login .page-wrapper .form,
.page.signup .page-wrapper .form {
  width: 100%;
  padding: 15px;
  margin: auto;
  background: rgba(255, 255, 255, 0.75);
}
.page.login .page-wrapper .form label,
.page.signup .page-wrapper .form label {
  font-weight: 400;
}
.page.login .page-wrapper .form input,
.page.signup .page-wrapper .form input {
  text-align: center;
  margin: .5rem 0 0 0;
}

@media (min-width: 40em) {
  .page.landing .page-wrapper .hero {
    margin: 10rem auto;
    padding: 0rem;
    width: 100%;
  }
  .page.landing .page-wrapper .topbar {
    width: 100%;
  }
  .page.landing .page-wrapper .topbar nav {
    float: right;
  }

  .page.login .page-wrapper,
  .page.signup .page-wrapper {
    vertical-align: middle;
  }
  .page.login .page-wrapper .form,
  .page.signup .page-wrapper .form {
    width: 30rem;
  }

  .page.store .topbar {
    width: 100%;
  }
  .page.store .topbar nav {
    float: right;
  }
  .page.store .searchContainer {
    width: 30rem;
    margin: 0 auto;
  }
  .page.store .searchContainer .search {
    width: 30rem;
  }

  .page.account .topbar {
    width: 100%;
  }
  .page.account .topbar nav {
    float: right;
  }
  .page.account .card {
    width: 30rem;
    margin: 1rem auto;
  }
}
@media (min-width: 62em) {
  .page.store .topbar {
    width: 43rem;
  }

  .page.landing .page-wrapper .hero {
    width: 43rem;
  }
  .page.landing .page-wrapper .topbar {
    width: 43rem;
  }

  .page.login .page-wrapper .form,
  .page.signup .page-wrapper .form {
    width: 42rem;
  }

  .page.account .topbar {
    width: 43rem;
  }
}


/*Downloaded from https://www.codeseek.co/ineedthekeyboard/generic-bootstrap-mockup-ObzRYP */
function getShoppingItems() {
  return [{
    name: 'bannana',
    price: 10,
    units: 'lbs'
  }, {
    name: 'mango',
    price: 2,
    units: 'lbs'
  }, {
    name: 'apple',
    price: 12,
    units: 'lbs'
  }, {
    name: 'grape',
    price: 5,
    units: 'kg'
  }];
}
var data = getShoppingItems();
var comboBoxData = $.map(data, function (item, idx) {
  return item.name;
});

function getItemFromList(name) {
  var returnThis;
  $.each(data, function (idx, item) {
    if (item.name === name) {
      returnThis = item;
      return false;
    }
  });
  return returnThis;
}
function addRow(itemSelectedName) {
  var itemToAdd, alreadyAdded;
  itemToAdd = getItemFromList(itemSelectedName);
  alreadyAdded = $('.page.store table tbody [data-id="' + itemToAdd.name + '"]').length > 0;
  if (!itemToAdd || alreadyAdded) {
    $('<div> This item was already added or not found.</div>').dialog();
    return false;
  }
  $('.page.store table tbody').append('<tr data-id="' + itemToAdd.name + '">' + '<td class="name">' + itemToAdd.name + '</td>' + '<td class="number">' + '<input type="number" value="1" />' + '</td>' + '<td class="price">$' + itemToAdd.price + '</td>' + '<td class="units">' + itemToAdd.units + '</td>' + '<td class="del">' + '<button type="button" min="0" class="btn btn-sm btn-danger deleteBtn">Delete</button>' + '</td>' + '</tr>');
}
function stateManagement(stateToChangeTo) {
  var state = stateToChangeTo;
  $('.page').hide();
  $('.page' + '.' + state).fadeIn();
}

function bindListeners() {
  //Events
  $('.page.login .signinBtn').click(function (e) {
    stateManagement('landing');
  });
  $('.page.login .signupBtn').click(function (e) {
    stateManagement('signup');
  });
  $('.page.signup .signinBtn').click(function (e) {
    stateManagement('login');
  });
  $('.page.signup .signupBtn').click(function (e) {
    stateManagement('landing');
  });
  $('.page.landing .store').click(function (e) {
    stateManagement('store');
  });
  $('.page.landing .signup').click(function (e) {
    stateManagement('signup');
  });
  $('.page.landing .signin').click(function (e) {
    stateManagement('login');
  });
  $('.page.landing .account').click(function (e) {
    stateManagement('account');
  });
  $('.page.store .brand').click(function (e) {
    stateManagement('landing');
  });
  $('.page.store .signinBtn').click(function (e) {
    stateManagement('login');
  });
  $('.page.store .account').click(function (e) {
    stateManagement('account');
  });
  $('.page.store .search').autocomplete({
    source: comboBoxData,
    select: function select(event, ui) {
      addRow(ui.item.label);
      return true;
    }
  });
  $('.page.store .search').on('keypress', function (e) {
    if (e.which === 13) {
      addRow($('.page.store .search').val());
    }
  });
  $('.page.store table').on('click', '.deleteBtn', function (e) {
    $(e.currentTarget).parent().parent().remove();
  });
  $('.page.account .toolbar i').click(function (e) {
    var id = $(e.currentTarget).data('id');
    $('.page.account .toolbar i').removeClass('active');
    $(e.currentTarget).addClass('active');
    $('.page.account .card.details h3').hide();
    $('.page.account .card.details .details-content').hide();
    $('.page.account .card.details .details-content.' + id).show();
    $('.page.account .card.details h3.' + id).fadeIn();
  });
  $('.page.account .brand').click(function (e) {
    stateManagement('landing');
  });
  $('.page.account .brand').click(function (e) {
    stateManagement('landing');
  });
  $('.page.account .store').click(function (e) {
    stateManagement('store');
  });
  $('.page.account .signin').click(function (e) {
    stateManagement('login');
  });
}

//Inital State
stateManagement('landing');
bindListeners();

Comments