Displaying Bootstrap Model in an MVC View

In the previous posts we saw on how to create Asp.Net Core MVC Controllers and Views for CRUD operations. In this post let us add a little bit of styling. Let us create a bootstrap Model and display it on the click of a Bootstrap button.

We will add a bootstrap button and set its target to a Bootstrap model, below is the bootstrap button.

<button type="button" class="btn btn-sm btn-primary" data-target="#modalHelp" data-toggle="modal">Help</button>

Notice that we set the data-target attribute to #modelHelp, this is a DIV which represents a bootstrap model. In the model we will just display some text in this example. Below is the Bootstrap model DIV.

<div id="modalHelp" class="modal fade hidden-print" tabindex="-1" role="dialog">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">Bootstrap Model</h5>

            </div>

            <div class="modal-body">

                <div class="container">

                    <div class="row">

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

                            Sample Asp.net Core MVC with Bootstrap Model sample.

                        </div>

                    </div>

                </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

            </div>

        </div>

    </div>

</div>

Run the application and click on the Bootstrap button, the model should open up as follows.