<div class="container mt-5 d-flex justify-content-center"> <button type="button" class="btn btn-danger px-5" data-toggle="modal" data-target="#exampleModal"> Book Hotel </button> </div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="text-right p-2 bg-white"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div>
<div class="p-1 px-3 bg-white">
<div class="d-flex flex-row align-items-center">
<h6>Park Inn by Redisson Berlin</h6> <span class="ratings ml-2"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span>
</div>
<div class="mt-0 d-flex justify-content-between"> <span>Double standard rooms, 2 Adults</span> <span class="text-primary">Cancel</span> </div>
</div>
<div class="px-5 p-2 listing">
<div class="p-2 listing-child mt-1 d-flex flex-row"> <img src="https://i.imgur.com/ZGnpeai.jpg" width="150" class="rounded">
<div class="d-flex flex-column ml-2">
<h5>Suprior Room</h5>
<div class="d-flex flex-row room-spec"> <span> <i class="fa fa-bed text-muted"></i> King Bed</span> <span><i class="fa fa-user text-muted"></i> Max 2</span> <span><i class="fa fa-wifi text-muted"></i> Free Wifi</span> </div>
</div>
</div>
<div class="p-3 bg-white border-bottom">
<div class="info"> <span><i class="fa fa-info-circle text-muted"></i> <small class="text-muted">Non Refundable</small></span> <span><i class="fa fa-car text-muted"></i> <small class="spec-text-color">Free Parking</small></span> </div>
<div class="d-flex justify-content-between mt-3">
<div class="dropdown"> <a class="more dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-expanded="false"> More info </a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div class="d-flex flex-row align-items-center spec"> <span class="text-muted"><i class="fa fa-moon-o"></i> 2</span> <span class="text-muted"><i class="fa fa-user"></i> 2</span> <span class="text-primary font-weight-bold">USD 522</span>
<div class="form-check ml-2"> <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" checked> </div>
</div>
</div>
</div>
<div class="p-3 bg-white border-bottom">
<div class="info"> <span><i class="fa fa-check text-muted"></i> <small class="spec-text-color">Free Cancellation</small></span> <span><i class="fa fa-car text-muted"></i> <small class="spec-text-color">Free Parking</small></span> </div>
<div class="d-flex justify-content-between mt-3">
<div class="dropdown"> <a class="more dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-expanded="false"> More info </a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div class="d-flex flex-row align-items-center spec"> <span class="text-muted"><i class="fa fa-moon-o"></i> 2</span> <span class="text-muted"><i class="fa fa-user"></i> 2</span> <span class="text-primary font-weight-bold">USD 522</span>
<div class="form-check ml-2"> <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"> </div>
</div>
</div>
</div>
</div>
<div class="bg-white p-2 px-3 border-bottom">
<div class="row">
<div class="col-md-6">
<div class="d-flex justify-content-between align-items-center">
<div class="check-in"> <span>Check-in</span>
<div class="d-flex flex-row align-items-center">
<h1 class="date-o">24</h1>
<div class="d-flex flex-column ml-2 date"> <span>July 20</span> <span>Friday</span> </div>
</div>
</div>
<div class="d-flex flex-column align-items-center"> <i class="fa fa-moon-o"></i> <small>2</small> </div>
<div class="check-out"> <span>Check-out</span>
<div class="d-flex flex-row align-items-center">
<h1 class="date-o">25</h1>
<div class="d-flex flex-column ml-2 date"> <span>July 20</span> <span>Friday</span> </div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="text-right d-flex flex-column mt-4"> <span class="text-primary">Change Date</span> </div>
</div>
</div>
</div>
<div class="complete p-3 mt-2">
<div class="text-left"> <span class="d-block">Cancellation Policy</span> <span class="text-success">Until 23 Dec 23:00 GMT 100% Money Back</span> </div>
<div class="text-center mt-4 mb-4"> <button class="btn btn-danger booking">Complete Booking</button> </div>
</div>
</div>
</div>
</div>
body {
background-color: #eee
}
.ratings {
bottom: 4px;
position: relative
}
.ratings i {
color: #aba8a88c
}
.listing {
background: #eee
}
.modal-content {
border: none
}
.listing-child {
background: #00000012
}
.room-spec span {
margin-right: 10px;
font-size: 12px
}
.spec-text-color {
color: #8bc34a;
font-weight: 800
}
.info span {
margin-right: 10px
}
.more {
text-decoration: none;
font-size: 15px
}
.info span i {
font-size: 12px;
color: #9e9e9e8f !important
}
.spec span {
margin-right: 10px
}
.date {
line-height: 17px;
margin-bottom: 8px
}
.date-o {
color: green
}
.booking {
padding-left: 150px !important;
padding-right: 150px !important
}