title: How to use Bootstrap modal in Blazor client app?
body: <p>I am trying to show bootstrap modal then bind its buttons. But I cannot pass the first step showing the modal. I am using Blazor client template of .net core 3.1.  I have a page named Modal.razor which contains the bootstrap modal I found from getbootstrap.com. </p>
  
  <pre><code>@if (Show)
  {
      &lt;div class="modal" tabindex="-1" role="dialog"&gt;
          &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;h5 class="modal-title"&gt;Modal title&lt;/h5&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                          &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;p&gt;Modal body text goes here.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
                      &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  @code {
      [Parameter]
      public bool Show { get; set; } = false;
  }
  </code></pre>
  
  <p>An I called the modal in the index.razor file</p>
  
  <pre><code>@page "/"
  
  &lt;button @onclick="(()=&gt;switchModal=!switchModal)"&gt;Switch Modal&lt;/button&gt;
  
  &lt;Modal Show="switchModal"/&gt;
  
  @code{
      bool switchModal = false;
  }
  </code></pre>
  
  <p>You might say StateHasChanged should be called here. But even if I copy and paste the modal code in the index.razor, I won't see anything.</p>