<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 ----------> <style> </style> <div class="content d-flex flex-column flex-column-fluid" id="kt_content"> <!--begin::Subheader--> <div class="subheader py-2 py-lg-4 subheader-solid" id="kt_subheader"> <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap"> <!--begin::Info--> <div class="d-flex align-items-center flex-wrap mr-2"> <!--begin::Page Title--> <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">Leads</h5> <!--end::Page Title--> <!--begin::Actions--> <div class="subheader-separator subheader-separator-ver mt-2 mb-2 mr-4 bg-gray-200"></div> <!--end::Actions--> </div> <!--end::Info--> </div> </div> <!--end::Subheader--> <!--begin::Entry--> <div class="d-flex flex-column-fluid "> <!--begin::Container--> <div class="container"> <!--begin::Dashboard--> <!--begin::Row--> <div class="row"> <div class="container"> <div class="row"> <div class="col-md-2 col-12 "> <ul class="nav nav-pills flex-column bg-white pt-3 pb-3 mt-2" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#lead" role="tab" aria-controls="home" aria-selected="true"> Lead Details </a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#call" role="tab" aria-controls="profile" aria-selected="false">Call</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#call" role="tab" aria-controls="profile" aria-selected="false">Meeting</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#call" role="tab" aria-controls="profile" aria-selected="false">Comments</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#call" role="tab" aria-controls="profile" aria-selected="false">Attachment</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#call" role="tab" aria-controls="profile" aria-selected="false">Tasks</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#call" role="tab" aria-controls="profile" aria-selected="false">Proposals</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#call" role="tab" aria-controls="profile" aria-selected="false">Reminders</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#call" role="tab" aria-controls="profile" aria-selected="false">Activities</a> </li> </ul> </div> <!-- /.col-md-4 --> <div class="col-md-10 col-12"> <div class="tab-content bg-white pt-3 pb-3 mt-2" id="myTabContent"> <div class="tab-pane fade show active" id="lead" role="tabpanel" aria-labelledby="home-tab"> <div class="row input-my"> <div class="col-md-12"> <h5 class="pl-3 ">Betting Bussiness Application Developmnt</h5> <hr/> </div> <div class="col-md-6"> <div class="lelo"> <h6>Title:</h6> </div> <div class="righto"> <h5>Betting Bussiness Application</h5> </div> </div> <div class="col-md-6"> <div class="lelo"> <h6>Lead Source:</h6> </div> <div class="righto"> <h5>Sourav</h5> </div> </div> </div> <div class="row input-my"> <div class="col-md-6"> <div class="lelo"> <h6>Contact Name:</h6> </div> <div class="righto"> <h5>Rajiv mondal</h5> </div> </div> <div class="col-md-6"> <div class="lelo"> <h6>Organization:</h6> </div> <div class="righto"> <h5>ipogo pvt ltd</h5> </div> </div> </div> <div class="row input-my"> <div class="col-md-6"> <div class="lelo"> <h6>Lead Status:</h6> </div> <div class="righto"> <h5>Completed</h5> </div> </div> <div class="col-md-6"> <div class="lelo"> <h6>Email:</h6> </div> <div class="righto"> <h5>ipgo@gmail.com</h5> </div> </div> </div> </div> <div class="tab-pane fade" id="call" role="tabpanel" aria-labelledby="profile-tab"> <ul class="nav nav-pills" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#home">All Call</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#menu1">New Call</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div id="home" class="container tab-pane active"><br> <form class="" action="" method="post"> <div class="row input-my"> <div class="col-md-6 "> <div class="form-group"> <label for="">Date</label> <input type="date" name="date" class="form-control" id="" placeholder="Enter Date" value=""> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="">Call Summary</label> <input name="call-summary" type="text" class="form-control" id="" placeholder="Enter Call Summary" value=""> </div> </div> </div> <div class="row input-my"> <div class="col-md-6"> <div class="form-group"> <label for="">Contact With</label> <input type="text" name="contact-with" class="form-control" id="" placeholder="Enter Contact With" value=""> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="">Responsible</label> <input type="date" name="dob" class="form-control" id="" placeholder="Enter date of birth" value=""> </div> </div> </div> <br/> <div class="form-group text-center"> <input type="submit" class="btn btn-primary white-txt" value="Submit"> </div> <br/> </form> </div> <div id="menu1" class="container tab-pane fade"><br> <div class="table-responsive"> <table id="example-datatable" class="table table-hover table-vcenter"> <thead> <tr> <th class="text-center" style="width: 150px;">Date</th> <th>Call Summary</th> <th>Contact With</th> <th>Responsible </th> <th>Action</th> </tr> </thead> <tbody> <tr> <td class="text-center">18-5-2020</td> <td><strong>cdcdcd</strong></td> <td>323233232323</td> <td>demo content</td> <td><a href="">Edit</a></td> </tr> <tr> <td class="text-center">18-5-2020</td> <td><strong>cdcdcd</strong></td> <td>323233232323</td> <td>demo content</td> <td><a href="">Edit</a></td> </tr> <tr> <td class="text-center">18-5-2020</td> <td><strong>cdcdcd</strong></td> <td>323233232323</td> <td>demo content</td> <td><a href="">Edit</a></td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> <!-- /.col-md-8 --> </div> </div> </div> <!--end::Row--> <!--end::Dashboard--> </div> <!--end::Container--> </div> <!--end::Entry--> </div> <br/> >

.lelo{ width: 35%; float: left; text-align:right; padding:6px 0px; } .lelo h6{ color:#red; font-size:14px; } .righto{ width:63%; float: left; padding: 6px 0px 6px 3px; } .righto h5{ color:#333; font-size:15px; }