<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="box"> <div class="box-header"> <div class="col-8"><h2>TECHNOLGY TYPE</h2></div> <div class="col-4 squaredFour"><input type="checkbox" value="None" id="" name="check" checked /> <label for="squaredFour"></label></div> </div> <div class="col-12 box-subheader"> <h2>CITY,<strong>ST</strong></h2> </div> <div class="row"> <div class="col-12 box-circle"> <div class="circle"> <div class="circle-stat"><100k</div> </div> </div> </div> <div class="row"> <div class="col-12 "mx-auto" style="width: 240px;""><center> <p>This is about 75 char tortor id lectus hendrerit imperdiet. Morbi velit magna...<a href="url">more</a></p></center> </div> </div> <div class="row"> <div class="col-md-4"> <div class="card card-block text-center"> <h5 class="card-title"></h5> <p class="card-title ">#LEAD000000</p> <br> <p class="card-text">Added</p> <strong><p class="card-text">7/27/2017</p></strong> </div><!-- end .card --> </div><!-- end .col --> <div class="col-md-3"> <div class="card card-block center"> </div><!-- end .card --> </div><!-- end .col --> <div class="col-md-4"> <div class="card card-block text-center"> <h5 class="card-title"></h5> <p class="card-title"># Bids Requested</hp> <p class="card-text">Expires</p> <strong><p class="card-text">7/27/2018</p></strong> </div><!-- end .card --> </div><!-- end .col --> </div><!-- end .row --> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Nunito:400,700'); body { font-family: 'Nunito', sans-serif; } .box { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background-color: #f9f9f9; border: solid #3088C4; width: 100%; max-width: 300px; margin: 0 auto 1.2em auto; } .box-header { width: 100%; color: white; background-color: #3088C4; display: flex; flex-direction: row; align-items: center; padding: .1em 1; } .box-subheader { width: 100%; color: #000; background-color: #c6c6c6; font-size: 16px; display: flex; flex-direction: row; justify-content: center; padding: 1em 0; } .box-circle { width: 100%; color: black; background-color: #ffffff; display: flex; flex-direction: row; align-items: center; padding: 1em 0; justify-content: center; } .box-header h3 { text-align: center; color: #fff; font-size: 18px; } .box-header .header-item { margin: 0 1.2em; font-size: 16px; } .box-header .header-item span { margin-right: 1em; color: white; font-size: 16px; } .content { display: flex; flex-direction: row; width: 100%; height: 380px; border-bottom: 1px solid #414EF9; } .center{ display: flex; text-align: center; width:90%; } .left, .right { width: 50%; } .right { padding: 0 1em 0 1em; display: flex; flex-direction: column; justify-content: space-between; align-items: center; font-size: 14px; } table { width: 100%; color: #000; } table tr { padding: 0.6em 1em 0.6em 1em; } table td { width: 33.3%; text-align: center; } table tr:nth-of-type(1) td { font-weight: 700; } .footer { padding: 1em 0; } /* .squaredFour */ .squaredFour { width: 20px; position: relative; margin: 20px auto; label { width: 20px; height: 20px; cursor: pointer; position: absolute; top: 0; left: 0; background: #fcfff4; background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); border-radius: 4px; box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); &:after { content: ''; width: 9px; height: 5px; position: absolute; top: 4px; left: 4px; border: 3px solid #333; border-top: none; border-right: none; background: transparent; opacity: 0; transform: rotate(-45deg); } &:hover::after { opacity: 0.5; } } input[type=checkbox] { visibility: hidden; &:checked + label:after { opacity: 1; } } } /* end .squaredFour */ /** * Circle Styles */ .circle { border-radius: 70%; width: 6em; height: 6em; padding: 6em; background-color: #3088C4; border: 3px solid #3088C4; margin-right:auto; margin-left:auto; } .circle-stat { color: #fff; font-weight: bold; position: relative; font-size: 2.5em; top: -0.7em; right: 1.4em; font-family: "Bebas", Arial, sans-serif; } input[type="checkbox"]{ cursor: pointer; -webkit-appearance: none; appearance: none; background: #000000; border-radius: 1px; box-sizing: border-box; position: absolute; box-sizing: content-box ; width: 20px; height: 20px; border-width: 0; transition: all .3s linear; } input[type="checkbox"]:checked{ background-color: #c3c3c3; } input[type="checkbox"]:focus{ outline: 0 none; box-shadow: none; }