Flix 4 Fams

Flix 4 Fams sandbox

by clayshannon

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col">
      [Ads Left side]
    </div>
    <div class="col-6">
      <div class="middlerow">
      <h2>
      CRITERIA
      </h2>
      </div>
      <div class="middlerow">
      <p>  
      <h5>
      Select Genres
      </h5>      
      
      <input type="checkbox"  id="ckbxAllGenres" checked="checked"</input>
      <label for="ckbxAllGenres">All</label>
      <input type="checkbox"  id="ckbxAction"</input>
      <label for="ckbxAction">Action</label>
<input type="checkbox"  id="ckbxAdventure"</input>
      <label for="ckbxAdventure">Adventure</label>
<input type="checkbox"  id="ckbxComedy"</input>
      <label for="ckbxComedy">Comedy</label>
<input type="checkbox"  id="ckbxDocumentary"</input>
      <label for="ckbxDocumentary">Documentary</label>
<input type="checkbox"  id="ckbxDrama"</input>
      <label for="ckbxDrama">Drama</label>
<input type="checkbox"  id="ckbxRomcom"</input>
      <label for="ckbxRomcom">Rom-Com</label>
<input type="checkbox"  id="ckbxScifi"</input>
      <label for="ckbxScifi">Sci-Fi</label>
<input type="checkbox"  id="ckbxWestern"</input>
      <label for="ckbxWestern">Western</label>
      
      </p>
      <p>
      <h5>
      Select MPAA Rating
      </h5>
      <input type="checkbox"  id="ckbxAllMPAA"</input>
      <label for="ckbxAllMPAA">All</label>
<input type="checkbox"  id="ckbxG" checked="checked"</input>
      <label for="ckbxG">G</label>
<input...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

input[type=number] {
  width: 60px;
  margin-left: 4px;
  margin-right: 4px;
}