<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="col-lg-12 col-md-12"> <form> <div class="add_listing_info"> <h3>Basic Informations</h3> <div class="form-group"> <label class="label-title">Listing Title</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label class="label-title">Listing Tag Line</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label class="label-title">Category</label> <div class="select"> <select class="form-control"> <option>Real Estate</option> <option>Restaurant</option> <option>Real Estate</option> <option>Health & Fitness</option> <option>Beauty & Spas</option> <option>Hotels & Travel</option> <option>Automotive</option> </select> </div> </div> </div> <div class="add_listing_info"> <h3>Contact Info</h3> <div class="form-group"> <label class="label-title">Address</label> <input type="text" class="form-control"> </div> <div class="row"> <div class="form-group col-sm-6"> <label class="label-title">City</label> <div class="select"> <select class="form-control"> <option>Montgomery</option> <option>Sacramento</option> <option>Austin</option> <option>Houston/option> </option><option>Sacramento</option> <option>Los Angeles</option> </select> </div> </div> <div class="form-group col-sm-6"> <label class="label-title">State</label> <div class="select"> <select class="form-control"> <option>Alabama</option> <option>California</option> <option>Hawaii</option> <option>Louisiana</option> <option>Texas</option> </select> </div> </div> </div> <div class="row"> <div class="form-group col-sm-6"> <label class="label-title">Zip-Code</label> <input type="text" class="form-control"> </div> <div class="form-group col-sm-6"> <label class="label-title">Phone Number</label> <input type="text" class="form-control"> </div> </div> <div class="row"> <div class="form-group col-sm-6"> <label class="label-title">Email <span>(optional)</span></label> <input type="text" class="form-control"> </div> <div class="form-group col-sm-6"> <label class="label-title">Website <span>(optional)</span></label> <input type="text" class="form-control"> </div> </div> <div class="row"> <div class="form-group col-md-3 col-sm-6"> <label class="label-title">Facebook <span>(optional)</span></label> <input type="text" class="form-control"> </div> <div class="form-group col-md-3 col-sm-6"> <label class="label-title">Linkdin <span>(optional)</span></label> <input type="text" class="form-control"> </div> <div class="form-group col-md-3 col-sm-6"> <label class="label-title">Twitter <span>(optional)</span></label> <input type="text" class="form-control"> </div> <div class="form-group col-md-3 col-sm-6"> <label class="label-title">Google Plus <span>(optional)</span></label> <input type="text" class="form-control"> </div> </div> </div> <div class="add_listing_info"> <h3>Listing Details</h3> <div class="form-group"> <label class="label-title">Description</label> <textarea class="form-control"></textarea> </div> <div class="form-group"> <label class="label-title">Amenities <span>(optional)</span></label> <div class="checkbox"> <p><input type="checkbox" value="Accepts Credit cards" id="amenities1" name="check"> <label for="amenities1">Accepts Credit cards</label></p> <p><input type="checkbox" value="Accepts Credit cards" id="amenities2" name="check"> <label for="amenities2">No Smoking</label></p> <p><input type="checkbox" value="Accepts Credit cards" id="amenities3" name="check"> <label for="amenities3">Street Parking</label></p> <p><input type="checkbox" value="Accepts Credit cards" id="amenities4" name="check"> <label for="amenities4">Wheelchair Accessible</label></p> <p><input type="checkbox" value="Accepts Credit cards" id="amenities5" name="check"> <label for="amenities5">Pets Friendly</label></p> <p><input type="checkbox" value="Accepts Credit cards" id="amenities6" name="check"> <label for="amenities6">Air Conditioning</label></p> <p><input type="checkbox" value="Accepts Credit cards" id="amenities7" name="check"> <label for="amenities7">Wireless Internet</label></p> </div> </div> </div> <div class="add_listing_info"> <h3>Opening Hours</h3> <div class="row"> <div class="form-group col-sm-2"> <label class="label-title">Monday</label> </div> <div class="form-group col-sm-5"> <div class="select"> <select class="form-control"> <option>Opening Time</option> <option>1 AM</option> <option>2 AM</option> <option>3 AM</option> <option>4 AM</option> <option>5 AM</option> <option>6 AM</option> <option>7 AM</option> <option>8 AM</option> <option>9 AM</option> <option>10 AM</option> <option>11 AM</option> <option>12 AM</option> <option>1 PM</option> <option>2 PM</option> <option>3 PM</option> <option>4 PM</option> <option>5 PM</option> <option>6 PM</option> <option>7 PM</option> <option>8 PM</option> <option>9 PM</option> <option>10 PM</option> <option>11 PM</option> <option>12 PM</option> <option>Closed</option> </select> </div> </div> <div class="form-group col-sm-5"> <div class="select"> <select class="form-control"> <option>Closing Time</option> <option>1 AM</option> <option>2 AM</option> <option>3 AM</option> <option>4 AM</option> <option>5 AM</option> <option>6 AM</option> <option>7 AM</option> <option>8 AM</option> <option>9 AM</option> <option>10 AM</option> <option>11 AM</option> <option>12 AM</option> <option>1 PM</option> <option>2 PM</option> <option>3 PM</option> <option>4 PM</option> <option>5 PM</option> <option>6 PM</option> <option>7 PM</option> <option>8 PM</option> <option>9 PM</option> <option>10 PM</option> <option>11 PM</option> <option>12 PM</option> <option>Closed</option> </select> </div> </div> </div> <div class="row"> <div class="form-group col-sm-2"> <label class="label-title">Tuesday</label> </div> <div class="form-group col-sm-5"> <div class="select"> <select class="form-control"> <option>Opening Time</option> <option>1 AM</option> <option>2 AM</option> <option>3 AM</option> <option>4 AM</option> <option>5 AM</option> <option>6 AM</option> <option>7 AM</option> <option>8 AM</option> <option>9 AM</option> <option>10 AM</option> <option>11 AM</option> <option>12 AM</option> <option>1 PM</option> <option>2 PM</option> <option>3 PM</option> <option>4 PM</option> <option>5 PM</option> <option>6 PM</option> <option>7 PM</option> <option>8 PM</option> <option>9 PM</option> <option>10 PM</option> <option>11 PM</option> <option>12 PM</option> <option>Closed</option> </select> </div> </div> <div class="form-group col-sm-5"> <div class="select"> <select class="form-control"> <option>Closing Time</option> <option>1 AM</option> <option>2 AM</option> <option>3 AM</option> <option>4 AM</option> <option>5 AM</option> <option>6 AM</option> <option>7 AM</option> <option>8 AM</option> <option>9 AM</option> <option>10 AM</option> <option>11 AM</option> <option>12 AM</option> <option>1 PM</option> <option>2 PM</option> <option>3 PM</option> <option>4 PM</option> <option>5 PM</option> <option>6 PM</option> <option>7 PM</option> <option>8 PM</option> <option>9 PM</option> <option>10 PM</option> <option>11 PM</option> <option>12 PM</option> <option>Closed</option> </select> </div> </div> </div> <div class="row"> <div class="form-group col-sm-2"> <label class="label-title">Wednesday</label> </div> <div class="form-group col-sm-5"> <div class="select"> <select class="form-control"> <option>Opening Time</option> <option>1 AM</option> <option>2 AM</option> <option>3 AM</option> <option>4 AM</option> <option>5 AM</option> <option>6 AM</option> <option>7 AM</option> <option>8 AM</option> <option>9 AM</option> <option>10 AM</option> <option>11 AM</option> <option>12 AM</option> <option>1 PM</option> <option>2 PM</option> <option>3 PM</option> <option>4 PM</option> <option>5 PM</option> <option>6 PM</option> <option>7 PM</option> <option>8 PM</option> <option>9 PM</option> <option>10 PM</option> <option>11 PM</option> <option>12 PM</option> <option>Closed</option> </select> </div> </div> <div class="form-group col-sm-5"> <div class="select"> <select class="form-control"> <option>Closing Time</option> <option>1 AM</option> <option>2 AM</option> <option>3 AM</option> <option>4 AM</option> <option>5 AM</option> <option>6 AM</option> <option>7 AM</option> <option>8 AM</option> <option>9 AM</option> <option>10 AM</option> <option>11 AM</option> <option>12 AM</option> <option>1 PM</option> <option>2 PM</option> <option>3 PM</option> <option>4 PM</option> <option>5 PM</option> <option>6 PM</option> <option>7 PM</option> <option>8 PM</option> <option>9 PM</option> <option>10 PM</option> <option>11 PM</option> <option>12 PM</option> <option>Closed</option> </select> </div> </div> </div> <div class="row"> <div class="form-group col-sm-2"> <label class="label-title">Thrusday</label> </div> <div class="form-group col-sm-5"> <div class="select"> <select class="form-control"> <option>Opening Time</option> <option>1 AM</option> <option>2 AM</option> <option>3 AM</option> <option>4 AM</option> <option>5 AM</option> <option>6 AM</option> <option>7 AM</option> <option>8 AM</option> <option>9 AM</option> <option>10 AM</option> <option>11 AM</option> <option>12 AM</option> <option>1 PM</option> <option>2 PM</option> <option>3 PM</option> <option>4 PM</option> <option>5 PM</option> <option>6 PM</option> <option>7 PM</option> <option>8 PM</option> <option>9 PM</option> <option>10 PM</option> <option>11 PM</option> <option>12 PM</option> <option>Closed</option> </select> </div> </div> <div class="form-group col-sm-5"> <div class="select"> <select class="form-control"> <option>Closing Time</option> <option>1 AM</option> <option>2 AM</option> <option>3 AM</option> <option>4 AM</option> <option>5 AM</option> <option>6 AM</option> <option>7 AM</option> <option>8 AM</option> <option>9 AM</option> <option>10 AM</option> <option>11 AM</option> <option>12 AM</option> <option>1 PM</option> <option>2 PM</option> <option>3 PM</option> <option>4 PM</option> <option>5 PM</option> <option>6 PM</option> <option>7 PM</option> <option>8 PM</option> <option>9 PM</option> <option>10 PM</option> <option>11 PM</option> <option>12 PM</option> <option>Closed</option> </select> </div> </div> </div> <div class="row"> <div class="form-group col-sm-2"> <label class="label-title">Friday</label> </div> <div class="form-group col-sm-5"> <div class="select"> <select class="form-control"> <option>Opening Time</option> <option>1 AM</option> <option>2 AM</option> <option>3 AM</option> <option>4 AM</option> <option>5 AM</option> <option>6 AM</option> <option>7 AM</option> <option>8 AM</option> <option>9 AM</option> <option>10 AM</option> <option>11 AM</option> <option>12 AM</option> <option>1 PM</option> <option>2 PM</option> <option>3 PM</option> <option>4 PM</option> <option>5 PM</option> <option>6 PM</option> <option>7 PM</option> <option>8 PM</option> <option>9 PM</option> <option>10 PM</option> <option>11 PM</option> <option>12 PM</option> <option>Closed</option> </select> </div> </div> <div class="form-group col-sm-5"> <div class="select"> <select class="form-control"> <option>Closing Time</option> <option>1 AM</option> <option>2 AM</option> <option>3 AM</option> <option>4 AM</option> <option>5 AM</option> <option>6 AM</option> <option>7 AM</option> <option>8 AM</option> <option>9 AM</option> <option>10 AM</option> <option>11 AM</option> <option>12 AM</option> <option>1 PM</option> <option>2 PM</option> <option>3 PM</option> <option>4 PM</option> <option>5 PM</option> <option>6 PM</option> <option>7 PM</option> <option>8 PM</option> <option>9 PM</option> <option>10 PM</option> <option>11 PM</option> <option>12 PM</option> <option>Closed</option> </select> </div> </div> </div> <div class="row"> <div class="form-group col-sm-2"> <label class="label-title">Saturday</label> </div> <div class="form-group col-sm-5"> <div class="select"> <select class="form-control"> <option>Opening Time</option> <option>1 AM</option> <option>2 AM</option> <option>3 AM</option> <option>4 AM</option> <option>5 AM</option> <option>6 AM</option> <option>7 AM</option> <option>8 AM</option> <option>9 AM</option> <option>10 AM</option> <option>11 AM</option> <option>12 AM</option> <option>1 PM</option> <option>2 PM</option> <option>3 PM</option> <option>4 PM</option> <option>5 PM</option> <option>6 PM</option> <option>7 PM</option> <option>8 PM</option> <option>9 PM</option> <option>10 PM</option> <option>11 PM</option> <option>12 PM</option> <option>Closed</option> </select> </div> </div> <div class="form-group col-sm-5"> <div class="select"> <select class="form-control"> <option>Closing Time</option> <option>1 AM</option> <option>2 AM</option> <option>3 AM</option> <option>4 AM</option> <option>5 AM</option> <option>6 AM</option> <option>7 AM</option> <option>8 AM</option> <option>9 AM</option> <option>10 AM</option> <option>11 AM</option> <option>12 AM</option> <option>1 PM</option> <option>2 PM</option> <option>3 PM</option> <option>4 PM</option> <option>5 PM</option> <option>6 PM</option> <option>7 PM</option> <option>8 PM</option> <option>9 PM</option> <option>10 PM</option> <option>11 PM</option> <option>12 PM</option> <option>Closed</option> </select> </div> </div> </div> <div class="row"> <div class="form-group col-sm-2"> <label class="label-title">Sunday</label> </div> <div class="form-group col-sm-5"> <div class="select"> <select class="form-control"> <option>Opening Time</option> <option>1 AM</option> <option>2 AM</option> <option>3 AM</option> <option>4 AM</option> <option>5 AM</option> <option>6 AM</option> <option>7 AM</option> <option>8 AM</option> <option>9 AM</option> <option>10 AM</option> <option>11 AM</option> <option>12 AM</option> <option>1 PM</option> <option>2 PM</option> <option>3 PM</option> <option>4 PM</option> <option>5 PM</option> <option>6 PM</option> <option>7 PM</option> <option>8 PM</option> <option>9 PM</option> <option>10 PM</option> <option>11 PM</option> <option>12 PM</option> <option>Closed</option> </select> </div> </div> <div class="form-group col-sm-5"> <div class="select"> <select class="form-control"> <option>Closing Time</option> <option>1 AM</option> <option>2 AM</option> <option>3 AM</option> <option>4 AM</option> <option>5 AM</option> <option>6 AM</option> <option>7 AM</option> <option>8 AM</option> <option>9 AM</option> <option>10 AM</option> <option>11 AM</option> <option>12 AM</option> <option>1 PM</option> <option>2 PM</option> <option>3 PM</option> <option>4 PM</option> <option>5 PM</option> <option>6 PM</option> <option>7 PM</option> <option>8 PM</option> <option>9 PM</option> <option>10 PM</option> <option>11 PM</option> <option>12 PM</option> <option>Closed</option> </select> </div> </div> </div> </div> <div class="add_listing_info"> <h3>Add Pricing</h3> <div class="row"> <div class="form-group col-sm-6"> <label class="label-title">Min. Price</label> <input type="text" class="form-control"> </div> <div class="form-group col-sm-6"> <label class="label-title">Max. Price</label> <input type="text" class="form-control"> </div> </div> </div> <div class="add_listing_info"> <h3>Add Video</h3> <div class="form-group"> <label class="label-title">Video Youtube URL</label> <input type="text" class="form-control"> </div> </div> <div class="add_listing_info"> <h3>Add Gallery Images</h3> <div class="form-group"> <input type="file"> </div> </div> <div class="add_listing_info"> <input type="submit" value="Submit Listing" class="btn"> </div> </form> </div>

@media (max-width: 767px) .add_listing_info h3 { font-size: 28px; } .add_listing_info { background-color: #ffffff; padding: 25px 30px; margin: 20px auto 0; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.06); border-radius: 4px; } .add_listing_info h3 { font-weight: 300; margin: 0 auto 20px; border-bottom: #eee solid 1px; padding-bottom: 20px; } .checkbox label::before { background-color: rgba(0,0,0,0); border: 2px solid #ccc; content: ""; display: inline-block; height: 16px; left: 0; position: absolute; top: 4px; width: 16px; } .radio label, .checkbox label { cursor: pointer; font-size: 14px; font-weight: 400; padding-left: 26px; position: relative; line-height: 22px; } .form-group { margin: 0 auto 20px; position: relative; } .add_listing_info .label-title { margin: 0 auto 8px; color: #111; font-size: 17px; font-weight: 400; } .add_listing_info .label-title { margin: 0 auto 8px; color: #111; font-size: 17px; font-weight: 400; } .add_listing_info .form-control { background: #fff; border: #ccc solid 1px; } .form-control, form input, form textarea, form select { background: #eee none repeat scroll 0 0; border: 0 none; border-radius: 3px; box-shadow: none; color: #888; font-size: 14px; height: 50px; line-height: 30px; padding: 0 20px; width: 100%; } .add_listing_info .form-group { margin: 0 auto 20px; } .checkbox input[type=checkbox] { display: none; } .btn { background: #38ccff none repeat scroll 0 0; border: medium none; border-radius: 3px; color: #fff; font-size: 16px; font-weight: 700; line-height: 30px; margin: auto; width: auto; padding: 8px 22px; transition: all .3s linear 0; -moz-transition: all .3s linear 0; -o-transition: all .3s linear 0; -webkit-transition: all .3s linear 0; -ms-transition: all .3s linear 0; }