<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 text-center"> <h1> Click Me </h1> <!-- Large modal --> <button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div id="modal-body"> <div class="col-lg-4 col-md-4 col-sm-6 border-right"> <div style="border:solid 1px black; width:100%;height: 450px;"> @* <img id="searchImage" src="@routes.Assets.versioned("images/thumbnail-default.jpg")"/> *@ </div> </div> <div class="col-lg-8 col-md-8 col-sm-6" style="overflow: auto;max-height: 580px;"> <fieldset class="legend-border"> <legend class="legend-border">Patient</legend> <div class="legend-row"> <table class="table borderless"> <tbody> <tr> <td><span class="font-normal">Name</span></td> <td> <input type="" value="" id="" class="form-control" name="" placeholder="abc" name="name"> </td> <td><span class="font-normal">Age</span></td> <td> <input type="" value="" id="" class="form-control" name="" placeholder="00" name="age"> </td> </tr> <tr> <td><span class="font-normal">Gender</span></td> <td> <label class="radio-inline"> <input type="radio" name="gender" value="option1" id="male"> Male </label> <label class="radio-inline"><input type="radio" name="gender" value="option2" id="female"> Female </label> </td> </tr> </tbody> </table> </div> </fieldset> <fieldset class="legend-border"> <legend class="legend-border">Prescriber</legend> <div class="legend-row"> <table class="table borderless"> <tbody> <tr> <td><span class="font-normal">Name</span></td> <td> <input type="text" value="" id="" class="form-control" name="" placeholder="Dr. abc" name="name"> </td> <td><span class="font-normal">Contact</span></td> <td> <input type="text" value="" id="" class="form-control" name="" placeholder="91-0000000000" name="conatct"> </td> </tr> <tr> <td><span class="font-normal">Email</span></td> <td> <input type="email" value="" id="" class="form-control" name="" placeholder="abc@@abc.com" name="email"> </td> <td><span class="font-normal">Education</span></td> <td> <input type="text" value="" id="" class="form-control" name="" placeholder="Education" name="education"> </td> </tr> <tr> <td><span class="font-normal">Designation</span></td> <td> <input type="email" value="" id="" class="form-control" name="" placeholder="Designation" name="designation"> </td> <td><span class="font-normal">Place of Work</span></td> <td> <input type="text" value="" id="" class="form-control" name="" placeholder="Location" name="place"> </td> </tr> </tbody> </table> </div> </fieldset> <fieldset class="legend-border"> <legend class="legend-border">Prescription</legend> <fieldset class="legend-border"> <legend class="legend-border">Medication</legend> <div class="legend-row"> <table class="table borderless"> <tbody> <tr> <td><span class="font-normal">Drug Type</span></td> <td> <select class="form-control m-b" name="account"> <option>Tablet</option> <option>Capsule</option> <option>Syrup</option> <option>Drink</option> <option>Cream/Lotion</option> </select> </td> <td><span class="font-normal">Drug Name</span></td> <td> <input type="text" value="" id="" class="form-control" name="" placeholder="Medicine name" name="drugName"> </td> </tr> <tr> <td><span class="font-normal">Drug period</span></td> <td> <div class="col-md-6 col-sm-6" style="padding-left: 0px!important"><input type="text" value="" id="" class="col-md-8 form-control" name="" placeholder="00" name="unit"></div> <div class="col-md-6 col-sm-6" style="padding-right: 0px!important"><select class="col-md-4 form-control m-b" name="account"> <option>Days</option> <option>Month</option> <option>Year</option> </select></div> </td> <td><span class="font-normal">Drug Duration</span></td> <td> <div class="col-md-3 col-sm-3" style="padding-left: 0px!important"><input type="text" value="" id="" class="col-md-8 form-control" name="" placeholder="00" name="unit"></div> <div class="col-md-2 col-sm-2" style="padding-left: 1px!important;padding-right: 1px!important">per day</div> <div class="col-md-7 col-sm-7" style="padding-right: 0px!important"><select class="col-md-4 form-control m-b" name="account"> <option>Before Meal</option> <option>After Meal</option> </select></div> </td> </tr> </tbody> </table> </div> </fieldset> <div class="legend-row"> <table class="table borderless"> <tbody> <tr> <td><span class="font-normal">Test</span></td> <td><textarea type="email" value="" id="" rows="2" class="form-control" name="" placeholder="Designation" name="test"></textarea></td> <td><span class="font-normal">Precautions</span></td> <td><textarea type="text" value="" id="" rows="2" class="form-control" name="" placeholder="Location" name="precautions"></textarea></td> </tr> </tbody> </table> </div> </fieldset> <fieldset class="legend-border"> <legend class="legend-border">HealthCentre</legend> <div class="legend-row"> <table class="table borderless"> <tbody> <tr> <td><span class="font-normal">Name</span></td> <td> <input type="text" value="" id="" class="form-control" name="" placeholder="Dr. abc" name="name"> </td> <td><span class="font-normal">Address</span></td> <td> <input type="text" value="" id="" class="form-control" name="" placeholder="91-0000000000" name="conatct"> </td> </tr> <tr> <td><span class="font-normal">Contact</span></td> <td> <input type="email" value="" id="" class="form-control" name="" placeholder="abc@@abc.com" name="email"> </td> <td><span class="font-normal">Email</span></td> <td> <input type="text" value="" id="" class="form-control" name="" placeholder="Education" name="education"> </td> </tr> </tbody> </table> </div> </fieldset> <fieldset class="legend-border"> <legend class="legend-border">Others</legend> <div class="legend-row"> <table class="table borderless"> <tbody> <tr> <td><span class="font-normal">Disease</span></td> <td> <input type="text" value="" id="" class="form-control" name="" placeholder="Dr. abc" name="name"> </td> </tr> </tbody> </table> </div> </fieldset> </div> </div> </div> <div class="item"> <img class="img-responsive" src="http://placehold.it/1200x600/fffccc/000&text=Two" alt="..."> <div class="carousel-caption"> Another Image </div> </div> <div class="item"> <img class="img-responsive" src="http://placehold.it/1200x600/fcf00c/000&text=Three" alt="..."> <div class="carousel-caption"> Another Image </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </div> </div> </div>

body { padding-top: 20px; } .btn-default { top: 25%; left:25%; color: #999; background: #fffccc; }