<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="d-flex justify-content-center container mt-5"> <div class="card p-3 py-4"> <h5 class="mb-0">Mobile Phone</h5> <div class="ratings"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></div><span class="text-black-50 p-description"><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been...<br></span> <div class="mt-4"> <label class="radio"> <input type="radio" name="p-type" value="Tomato" checked> <span>Tomato</span> </label> <label class="radio"> <input type="radio" name="p-type" value="Indigo"> <span>Indigo</span> </label> <label class="radio"> <input type="radio" name="p-type" value="Green"> <span>Green</span> </label> </div> <div class="d-flex justify-content-between align-items-center mt-4"><span>$ 99.99</span><button class="btn btn-dark btn-sm" type="button">Add to cart</button></div> </div> </div>

.card { box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); float: left; font-family: 'Lato', Arial, sans-serif; font-size: 16px; margin: 10px 1%; max-width: 310px; min-width: 250px; overflow: hidden; position: relative; text-align: left; width: 100% } body { background: #eee } .ratings i { font-size: 14px; margin-right: 2px } .p-description { font-size: 12px; margin-top: 11px } label.radio { cursor: pointer } label.radio input { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none } label.radio span { padding: 3px 9px; border: 1px solid #8f37aa; display: inline-block; color: #8f37aa; border-radius: 5px; font-size: 11px; text-transform: uppercase } label.radio input:checked+span { border-color: #8f37aa; background-color: #8f37aa; color: #fff }