How to create bootstrap like popup using modelpopup extender

Question

Hii , 

 

I am trying to create bootstrap like popup using my ajax modelpopup exteder in asp.net

 

I have tried so far as below.. Please help me to make this popup much better .. 

 

There are few isssues with this , height , width , look and feels are not proper .

and every time if i want to add contents in my popup bidy i have to adjust heights and width  

 

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AddStateView.ascx.cs" Inherits="DreamTouchWebUI.controls.AddStateView" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

<style type="text/css">

.modal-header {

background-color: #f0f0f0;

}

.modal-footer {

background-color: #f0f0f0;

}

.form-control1, .form-control_2.input-sm {

width: 35%;

}

.col-sm-8 {

width: 35%;

}

.input-group {

margin: 0 0 0 13em;

}

.form-control1, .form-control_2.input-sm {

-moz-appearance: meterchunk;

height: 30px;

width: 158px;

}

tr {

max-height: 35px !important;

height: 35px !important;

overflow: hidden;

}

.btn-info {

padding: 2px 10px;

}

.table td, .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {

padding: 5px !important;

width: 10px;

}

.modalBackground {

background-color: Black;

filter: alpha(opacity=90);

opacity: 0.8;

}

.modal-dialog {

margin: -41px auto;

}

.modal-body {

padding: 29px;

position: relative;

}

</style>

<div class="xs tabls">

<div class="bs-example4" data-example-id="contextual-table">

<div style="margin-bottom: 11px" class="row">

<div class="col-md-2">

<asp:Button ID="btnCreateState" runat="server" Text="Create State" CssClass="btn btn-sm btn-info" />

</div>

</div>

<div class="table-responsive">

<asp:Repeater ID="rptState" runat="server">

<HeaderTemplate>

<table class="table table-bordered">

<thead>

<tr>

<th style="width: auto">#</th>

<th>Sr.No</th>

<th>State Name</th>

</tr>

</thead>

</HeaderTemplate>

<ItemTemplate>

<tbody>

<tr>

<th scope="row"></th>

<td><%#Container.ItemIndex+1 %></td>

<td><%#Eval("Name") %></td>

</tr>

</tbody>

</ItemTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

</div>

</div>

</div>

<!-- ModalPopupExtender -->

<ajax:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="btnCreateState"

CancelControlID="btnClose" BackgroundCssClass="modalBackground">

</ajax:ModalPopupExtender>

<asp:Panel ID="Panel1" runat="server" CssClass="modal-dialog" align="center" Style="display: none;width:600px;">

<div class="modal-content">

<div class="modal-header">

<h4 class="modal-title" id="exampleModalLabel">Create State</h4>

</div>

<div class="modal-body">

<div class="form-group">

<label for="smallinput" class="col-sm-2 control-label label-input-sm">State</label>

<div class="col-sm-8">

<asp:TextBox CssClass="form-control1 input-sm" ID="txtState" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ID="rqeState" runat="server" ControlToValidate="txtState" ErrorMessage="*" ValidationGroup="SaveState"></asp:RequiredFieldValidator>

</div>

</div>

</div>

<div class="modal-footer">

<asp:Button Style="float: left" ID="btnSave" ValidationGroup="SaveState" runat="server" Text="Save" class="btn btn-primary" OnClick="btnSave_Click" UseSubmitBehavior="false" data-dismiss="modal" />

<asp:Button Style="float: left" ID="btnClose" class="btn btn-primary" runat="server" Text="Close" />

</div>

</div>

</asp:Panel>

<!-- ModalPopupExtender -->