I want to create bootstrap modal and image container from c# code behind as per the Number of items and images i'm getting from database.
Kindly suggest me how should i do it. how to do html code in c#..

I want to show like below and generate only n number of image container as per images coming from database. Thanks in advance.
[![Image Container](https://i.stack.imgur.com/zONrd.jpg)](https://i.stack.imgur.com/zONrd.jpg)

[![Modal](https://i.stack.imgur.com/D56LQ.jpg)](https://i.stack.imgur.com/D56LQ.jpg)

```
<div class="row">
    <asp:Panel ID="pnl" runat="server">
        <div class="col-md-12" style="margin-top: -60px">
            <div class="container">
                <div class="jumbotron" style="background: rgba(200, 54, 54, 0.0);">
                    <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                            <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-image="images/r5.jpg"
                                data-target="#image-gallery">
                                <asp:Image runat="server" ID="img1" class="img-responsive" ImageUrl="images/r5.jpg"
                                    alt="Short alt text" />
                            </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <asp:Button ID="btnSave" class="form-control" runat="server" Text="Book Now" BackColor="#3465aa"
                                ForeColor="White" />
                            <p>
                            </p>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                            <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-image="images/r1.jpg"
                                data-target="#image-gallery">
                                <img class="img-responsive" src="images/r1.jpg" alt="Short alt text">
                            </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <asp:Button ID="Button1" class="form-control" runat="server" Text="Book Now" BackColor="#3465aa"
                                ForeColor="White" />
                            <p>
                            </p>
                        </div>
                    </div>
              </div>
        </div>
    </asp:Panel>
</div>
<div class="row">
    <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="image-gallery-title"></h4>
        </div>
                <div class="modal-body">
                    <img id="image-gallery-image" class="img-responsive" src="">
                </div>
                <div class="modal-footer">
                    <div class="col-md-2">
                        <button type="button" class="btn btn-primary" id="show-previous-image">
                            Previous</button>
                    </div>
                    <div class="col-md-8 text-justify" id="image-gallery-caption">

                    </div>
                    <div class="col-md-2">
                        <button type="button" id="show-next-image" class="btn btn-default">
                            Next</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

```