SQL query with bootstrap cards

check the below code only for refernce purpose:

<head>
<meta charset="utf-8" />
<title>title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js">script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js">script>
head>
<body>
<div class="col-md-12 pt-1">
<div class="card">
<div class="card-header">
<h3>Perfumes enviados na embalagem originalh3>
div>
<div class="card-body">
<asp:ListView ID="ListView1" runat="server" GroupItemCount="4" GroupPlaceholderID="groupPlaceHolder1" ItemPlaceholderID="itemPlaceHolder1">
<EmptyDataTemplate>
<table runat="server" style="">
<tr>
<td>td>
tr>
table>
EmptyDataTemplate>
<LayoutTemplate>
<div class="row text-center">
<asp:PlaceHolder runat="server" ID="groupPlaceHolder1">asp:PlaceHolder>
div>
LayoutTemplate>
<GroupTemplate>
<hr />
<div class="row text-center">
<asp:PlaceHolder runat="server" ID="itemPlaceHolder1">asp:PlaceHolder>
div>
GroupTemplate>
<ItemTemplate>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-flex align-items-stretch">
<div class="card">
<div class="card-header">
<asp:Label ID="Label2" runat="server" Text='<%#Eval("sku")%>'>asp:Label>
div>
<div class="card-body">
<asp:Image ID="Image1" class="img-fluid max-width: 100%;" runat="server" ImageUrl='<%#Eval("imagem") %>' AlternateText='<%# Eval("descricao") %>' ToolTip='<%# Eval("descricao") %>' />
div>
<div class="card-footer">
<asp:Label ID="Label1" runat="server" Text='<%#Eval("descricao")%>'>asp:Label>
div>
div>
div>
ItemTemplate>
<AlternatingItemTemplate>
<div class="col-lg-3 d-flex align-items-stretch">
<div class="card">
<div class="card-header">
<asp:Label ID="Label3" runat="server" Text='<%#Eval("sku")%>'>asp:Label>
div>
<div class="card-body">
<asp:Image ID="Image1" class="img-fluid max-width: 100%;" runat="server" ImageUrl='<%#Eval("imagem") %>' AlternateText='<%# Eval("descricao") %>' ToolTip='<%# Eval("descricao") %>' />
div>
<div class="card-footer">
<asp:Label ID="Label1" runat="server" Text='<%#Eval("descricao")%>'>asp:Label>
div>
div>
div>
AlternatingItemTemplate>
asp:ListView>
div>
div>
div>
body>

find the below link for more details.

https://forums.asp.net/t/2139750.aspx?ListView+and+Card+Bootstrap

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Bidyasagar Mishra7y ago
check the below code only for refernce purpose:
<head>
    <meta charset="utf-8" />
    <title>title>
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js">script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js">script>
head>
<body>
    <div class="col-md-12 pt-1">
        <div class="card">
            <div class="card-header">
                <h3>Perfumes enviados na embalagem originalh3>
            div>
            <div class="card-body">
                <asp:ListView ID="ListView1" runat="server" GroupItemCount="4" GroupPlaceholderID="groupPlaceHolder1" ItemPlaceholderID="itemPlaceHolder1">
                    <EmptyDataTemplate>
                        <table runat="server" style="">
                            <tr>
                                <td>td>
                            tr>
                        table>
                    EmptyDataTemplate>
                    <LayoutTemplate>
                        <div class="row text-center">
                            <asp:PlaceHolder runat="server" ID="groupPlaceHolder1">asp:PlaceHolder>
                        div>
                    LayoutTemplate>
                    <GroupTemplate>
                        <hr />
                        <div class="row text-center">
                            <asp:PlaceHolder runat="server" ID="itemPlaceHolder1">asp:PlaceHolder>
                        div>
                    GroupTemplate>
                    <ItemTemplate>
                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-flex align-items-stretch">
                            <div class="card">
                                <div class="card-header">
                                    <asp:Label ID="Label2" runat="server" Text='<%#Eval("sku")%>'>asp:Label>
                                div>
                                <div class="card-body">
                                    <asp:Image ID="Image1" class="img-fluid max-width: 100%;" runat="server" ImageUrl='<%#Eval("imagem") %>' AlternateText='<%# Eval("descricao") %>' ToolTip='<%# Eval("descricao")  %>' />
                                div>
                                <div class="card-footer">
                                    <asp:Label ID="Label1" runat="server" Text='<%#Eval("descricao")%>'>asp:Label>
                                div>
                            div>
                        div>
                    ItemTemplate>
                    <AlternatingItemTemplate>
                        <div class="col-lg-3 d-flex align-items-stretch">
                            <div class="card">
                                <div class="card-header">
                                    <asp:Label ID="Label3" runat="server" Text='<%#Eval("sku")%>'>asp:Label>
                                div>
                                <div class="card-body">
                                    <asp:Image ID="Image1" class="img-fluid max-width: 100%;" runat="server" ImageUrl='<%#Eval("imagem") %>' AlternateText='<%# Eval("descricao") %>' ToolTip='<%# Eval("descricao")  %>' />
                                div>
                                <div class="card-footer">
                                    <asp:Label ID="Label1" runat="server" Text='<%#Eval("descricao")%>'>asp:Label>
                                div>
                            div>
                        div>
                    AlternatingItemTemplate>
                asp:ListView>
            div>
        div>
    div>
body>
find the below link for more details.
https://forums.asp.net/t/2139750.aspx?ListView+and+Card+Bootstrap
+1