Click here to Skip to main content
14,976,584 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi can any one assist I have core mvc website which has two applications the backend and front end, the back end is for administrators to update/upload the content like news and reports and save on Sql database and the front end app is reading from the DB. My challenge now is on the index view that is showing news, it showing the list of the uploaded news in a column.
I want them to be in row that has 3 column like in one column must show all the details record.
below is the controller and index view that I am working on

What I have tried:

my index Method:
public IActionResult Index()
    return View(_context.News.Take(3).OrderByDescending(x => x.Id).ToList());

The index view
<div class="un-col-md-8 un-content">

    <div class="un-list-post">

        @foreach (var item in Model)
            <div class="un-item-post un-item-medium">


                <div class="un-post-caption un-shadow">

                            var imgsrc = "";
                            if (item.Img != null)
                                var base64 = Convert.ToBase64String(item.Img);
                                imgsrc = string.Format("data:image/jpg;base64,{0}", base64);
                    <div class="un-post-title">@item.Title</div>
                    <div class="un-post-exc">@Html.Raw(item.Content) [...]</div>

                    <div class="un-btn-more un-btn-style-1">

                    <div class="un-post-info">

                        <div class="un-post-meta un-pull-left">
                            <span class="un-post-date">@item.CreatedOn</span> 

                        <div class="un-post-stats un-pull-right">

                        <div class="un-clearfix"></div>







Updated 18-Nov-20 1:57am

1 solution

There are various ways to create multi-column content in CSS.

Probably the simplest would be to use Flexbox:
CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN[^]
.un-list-post {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
.un-list-post > div {
    flex: 1 1 33%;

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900