Set same width of ASP.Net DataList columns using Bootstrap and CSS

Hi Ilanocf,

With the help of DataList it is not possible. You need to use Repeater Control as sample provided below.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="row">
    <asp:Repeater ID="rptEmployees" runat="server">
        <ItemTemplate>
            <div class="col-lg-4 col-md-4 col-sm-4">
                <div>
                    <div style="background-color: #5bc0de; color: #fff; text-align: center;">
                        <asp:Image ID="dlImgBanner" runat="server" ImageUrl="https://i.imgur.com/Wuzrsve.png" />
                    </div>
                    <div>
                        <h4><asp:Label ID="dlLbTitulo" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Title") %>'></asp:Label></h4>
                    </div>
                    <div class="card-footer" style="padding: 5px;">
                        <span>
                            <asp:Label ID="dlLbTexto" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Notes") %>'></asp:Label></span>
                    </div>
                    <div>
                        <asp:HyperLink ID="hlSobre" runat="server" CssClass="btn btn-info" Text="Saiba mais" NavigateUrl='<%# "artigo.aspx?pID=" + DataBinder.Eval(Container, "DataItem.EmployeeId") %>'></asp:HyperLink>
                    </div>
                </div>
            </div>
        </ItemTemplate>
    </asp:Repeater>
</div>

Namespaces

C#

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

 VB.Net

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindRepeater();
    }
}

private void BindRepeater()
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT TOP 3 Title, Notes, EmployeeID FROM Employees", con))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    rptEmployees.DataSource = dt;
                    rptEmployees.DataBind();
                }
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.BindRepeater()
    End If
End Sub

Private Sub BindRepeater()
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conString)
        Using cmd As SqlCommand = New SqlCommand("SELECT TOP 3 Title, Notes, EmployeeID FROM Employees", con)
            Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
                Using dt As DataTable = New DataTable()
                    sda.Fill(dt)
                    rptEmployees.DataSource = dt
                    rptEmployees.DataBind()
                End Using
            End Using
        End Using
    End Using
End Sub

Screenshot