Create dashboad with colurful card using Bootstrap in ASP.Net

Hi arvindasp,

You need to design your page as per your need to inorder to create a dashbord.

I am sharing a sample which displays the data using Bootstrap Card populated using database.

Database

I have made use of the following table Customers with the schema as follows.

I have already inserted few records in the table.

You can download the database table SQL by clicking the download link below.

Download SQL file

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>

<div class="container">
    <asp:DataList runat="server" ID="dlCustomers" RepeatDirection="Vertical" RepeatColumns="1">
        <ItemTemplate>
            <div class="row">
                <div class="col-md-4">
                    <div class="card mb-3">
                        <div class="card-body">
                            <h5 class="card-title">Id</h5>
                            <p class="card-text"><%#Eval("CustomerId") %></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card bg-success text-white mb-3">
                        <div class="card-body" style="width: 300px">
                            <h5 class="card-title">Name</h5>
                            <p class="card-text"><%#Eval("Name") %></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card bg-danger text-white mb-3">
                        <div class="card-body" style="width: 300px">
                            <h5 class="card-title">Country</h5>
                            <p class="card-text"><%#Eval("Country") %></p>
                        </div>
                    </div>
                </div>
            </div>
        </ItemTemplate>
    </asp:DataList>
</div>

Namespaces

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlDataAdapter adapter = new SqlDataAdapter("SELECT * FROM Customers", con))
            {
                using (DataTable dt = new DataTable())
                {
                    adapter.Fill(dt);
                    dlCustomers.DataSource = dt;
                    dlCustomers.DataBind();
                }
            }
        }
    }
}

Screenshot