Bootstrap datepicker only date and month - min date and max date - Start date and End date

 $("#datepicker").datepicker( {

    format: "mm-yyyy",

    startView: "months", 

    minViewMode: "months"

});

 $('[id*=txtdate]').datepicker({

        changeMonth: true,

        changeYear: true,

        format: "mm-yyyy",

        showButtonPanel: true,

        language: "tr",

        todayHighlight: true,

        autoclose: true,

        isRTL: true,

        endDate: dateTo,

        startView: "months",

        minViewMode: "months"

    });

$("#txtdate").change(function () {

        if ($("[id$=txtdate]").val() == '') {

            $("#txtdate").datepicker("setDate", month + '-' + (now.getFullYear()));

        }

    });

============================

--------------:Start Date:-------

$('[id*=txtdate]').datepicker({

        changeMonth: true,

        changeYear: true,

        format: "mm-yyyy",

        showButtonPanel: true,

        language: "tr",

        todayHighlight: true,

        autoclose: true,

        isRTL: true,

        endDate: dateTo,

        startDate: "01-1900",

        startView: "months",

        minViewMode: "months"

    });

Spinner loader masking - bootstrap - with gif image

with bootstrap class 

 .spinner-grow{

           display: block;

              position: fixed;

              z-index: 1031; /* High z-index so it is on top of the page */

              top: 50%;

              right: 50%; /* or: left: 50%; */

        }

        .model {

            display: none;

            position: fixed;

            z-index: 1200;

            top: 0;

            left: 0;

            height:

Accordion Nested in bootstrap - Ul li a - Menu sub menu - Navbar

Nested with four nested

  <div class="accordion" id="accordionMenu">

        <div class="accordion-item">

            <h2 class="accordion-header " id="headingMonthlyReports">

                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMonthlyReports" aria-expanded="false" aria-controls="collapseMonthlyReports">A. Monthly Reports</button>

            </h2>

            <div id="collapseMonthlyReports" class="accordion-collapse collapse" >

                <div class="accordion-body">

                    <div class="accordion-item">

                        <div class="accordion-body">

                            <a href="../CourtApplicationInitialDetails.aspx">1. Monthly Performance Report-I (MPR-I)</a>

                        </div>

                    </div>

                    <!-- Main Monthly Performance Report I-->

                    <div class="accordion-item">

                        <h2 class="accordion-header" id="headingMPR2">

                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMPR2" aria-expanded="false" aria-controls="collapseMPR2">2. Monthly Performance Report - II (MPR-II)</button>

Card Bootstrap - with mobile UI-

 <div class="card-group">

  <div class="card">

    

    <div class="card-body">

      <div class="card-title">Card title</div>

      <div class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</div>

        <a href="#" class="btn btn-primary">Go somewhere</a>

    </div>

    

  </div>

  <div class="card">

    

    <div class="card-body">

      <h5 class="card-title">Card title</h5>

      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>

    </div>

    

  </div>

  <div class="card">

    

    <div class="card-body">

      <h5 class="card-title">Card title</h5>

      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>

    </div>

    

  </div>

</div>

===================================================

reference:-https://getbootstrap.com/docs/5.2/components/card/

https://stackoverflow.com/questions/34140793/bootstrap-4-responsive-cards-in-card-columns

collapse show bootstrap 5

 https://www.w3schools.com/bootstrap5/bootstrap_collapse.php

https://getbootstrap.com/docs/5.0/components/collapse/?#usage

https://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse_simple&stacked=h

https://getbootstrap.com/docs/5.2/components/collapse/

https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-collapse.php

https://getbootstrap.com/docs/4.0/components/collapse/

https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_collapsible_in&stacked=h

https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=creating-collapsible-element-via-data-attributes

Bootstrap menu with toogle menu layout - Theme

 Blogger like bootstrap menu toogle menu

like https://icsil.in/app/

links

==

https://bbbootstrap.com/snippets/bootstrap-5-sidebar-menu-toggle-button-34132202

https://dev.to/codeply/bootstrap-5-sidebar-examples-38pb

AJAX UpdateProgress ASP.NET C# bootstrap masking

 https://www.aspsnippets.com/questions/269449/Hide-Ajax-UpdateProgress-loader-image-after-ResponseEnd-in-ASPNet/

https://www.aspsnippets.com/questions/758411/Hide-UpdateProgress-image-after-download-complete-ResponseEnd-using-C-and-VBNet-in-ASPNet/

https://stackoverflow.com/questions/22242871/load-mask-plugin-for-twitter-bootstrap

we have to use model div and body div etcx.

example

 <div class="modal-header">
        <h1>Processing...</h1>
    </div>
    <div class="modal-body">
        <div class="progress progress-striped active">
            <div class="bar" style="width: 100%;"></div>
        </div>
    </div>

Bootstrap 5 with Internet Explorer 11

Add the below files from the code

 https://www.jqueryscript.net/other/ie-11-bootstrap-5.html

Bootstrap row class

   <div class="row form-group">

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

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

Bootstrap 3 tutorials

 https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_list_group_active&stacked=h

https://www.quackit.com/bootstrap/bootstrap_3/tutorial/bootstrap_labels.cfm

Bootstrap 5 alert notification - asyncpostback (without refreshing a page button click)

<script type="text/javascript">

        function ShowMessage(message, messagetype) {

            debugger;

            var cssclass;

            switch (messagetype) {

                case 'Success':

                    cssclass = 'alert-success'

                    break;

                case 'Error':

                    cssclass = 'alert-danger'

                    break;

                case 'Warning':

                    cssclass = 'alert-warning'

                    break;

                default:

                    cssclass = 'alert-info'

            }

            $('#alert_container').append('<div id="alert_div" style="margin: 0 0.5%; -webkit-box-shadow: 3px 4px 6px #999;" class="alert fade in ' + cssclass + '"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>' + messagetype + '!</strong> <span>' + message + '</span></div>');

          //$("#alert_div").fadeTo(5000, 1000).slideUp(1000, function () {

              //  $("#alert_div").slideUp(1000);

        //});

         

        }

aspx.cs page code

 protected void btnPnlUpdate_Click(object sender, EventArgs e){

       try {  string messageType = "Success";

                String message = "Successfully Updated...";

                ScriptManager.RegisterStartupScript(this, this.GetType(), System.Guid.NewGuid().ToString(), "ShowMessage('" + message + "','" + messageType + "');", true);

}

 catch(Exception ex)

            {

                string messageType = "Error";

                String message = "Mail has not send successfully.";

                //dvMsg.Visible = true;dvMsg.InnerHtml = "dfdfdf";

                lblMsg.Text = "This is notification message demo";

                ScriptManager.RegisterStartupScript(this, this.GetType(), System.Guid.NewGuid().ToString(), "ShowMessage('" + message + "','" + messageType + "');", true);

            }

}

 https://mdbootstrap.com/docs/b4/jquery/javascript/notifications/

Popup model ASP.NET C# With Bootstrap class with ajaxToolkit ModalPopupExtender

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <asp:UpdatePanel ID="upPopUps" runat="server" UpdateMode="Conditional">

        <ContentTemplate>

   

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AutoGenerateEditButton="True" OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" DataKeyNames="ID,MainID" OnRowDataBound="GridView1_RowDataBound" CssClass="table table-hover table-bordered table-responsive" AllowPaging="True" OnPageIndexChanging="GridView1_PageIndexChanging" PageSize="20" FirstPageText="First" PreviousPageText="Previous" NextPageText="Next" LastPageText="Last" AllowSorting="True" OnRowDeleting="GridView1_RowDeleting" OnInit="GridView1_Init" OnRowCommand="GridView1_RowCommand" OnSelectedIndexChanged="OnSelectedIndexChanged">

      

Bootstrap dropdown with label with row

<div class="row">

 <div class="col-md-1">Discipline (Select)</div>

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

            <asp:DropDownList runat="server" ID="ddlDisciplines" CssClass="col-md-12 form-control input-sm"></asp:DropDownList>

        </div>

</div>

we can increase the width by changing the class col-md-1 to col-md-2 or col-md-3

or decrease by col-md-5 to col-md-2