locked
alignment issue in bootstrap RRS feed

  • Question

  • User-525411387 posted

    I am using bootstrap to display the products but I have an issue with that somewhere on the page it is breaking the sequence kindly help me to resolve this issue.

                    <div class="container">
                        <div class="row">
                            @foreach (var item in Model.products)
                            {
                                <div class="col-sm-4 col-md-4 col-lg-4 col-xl-3 col-xs-12">
                                    <div class="post-widget">
                                        <a href="/Products/Detail/@item.ID" class="b-advantages-1">
                                            <div class="post-widget__media">
                                                <img src="~/assets/media/products/@item.PICTURE" alt="image" class="img-responsive" />
                                                @if (item.NAME.Length > 20)
                                                {
                                                    <span class="post-widget__title ui-title-inner">@item.NAME.Substring(0, 20)...</span>
                                                }
                                                else
                                                {
                                                    <span class="post-widget__title ui-title-inner">@item.NAME</span>
                                                }
                                                <div class="post-widget__date">
                                                    <span href="/Products/Detail/@item.ID" class="post-widget__title ui-title-inner">
                                                        <i class="icon stroke icon-Agenda"></i>
                                                        <time datetime="2012-10-27 15:20">@item.ARTICLENO</time>
                                                    </span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
    
                            }
                        </div>
    
                        <div class="row">
                            <div class="text-center">
    
                                Page @(Model.products.PageCount < Model.products.PageNumber ? 0 : Model.products.PageNumber) of @Model.products.PageCount
    
                                @Html.PagedListPager(Model.products, page => Url.Action("Index", "Products", new { page = page, category = (Model.products.FirstOrDefault().CATEGORYID) }), PagedListRenderOptions.OnlyShowFivePagesAtATime)
    
                                @*<ul class="pagination pagination_mod-a">
                        <li><a href="#"><i class="icon fa fa-angle-left"></i></a></li>
                        <li><a href="#">1</a></li>
                        <li class="active"><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#"><i class="icon fa fa-angle-right"></i></a></li>
                    </ul>*@
                            </div>
                        </div>
                    </div>

    the view of the page is attached in this link please visit this link and you will find an image 

    https://we.tl/t-EQXm96f17J

    Friday, February 21, 2020 7:41 AM

All replies

  • User1535942433 posted

    Hi alisufian27,

    Accroding to your codes,I suggest you could the height of the every div or you could set every image have the same height.

    More details,you could refer to below codes:

     <div class="container">
            <div class="row">
                @foreach (var item in Model)
                {
                    <div class="col-sm-4 col-md-4 col-lg-4 col-xl-3 col-xs-12"  style="height:500px;">
                        <div class="post-widget">
                            <a href="/bootstrapalignment/Index/@item.ID" class="b-advantages-1">
                                <div class="post-widget__media">
                                    <img src="~/MyImages/@item.PICTURE" alt="image" class="img-responsive"/>
                                    @if (item.NAME.Length > 20)
                                    {
                                        <span class="post-widget__title ui-title-inner">@item.NAME.Substring(0, 20)...</span>
                                    }
                                    else
                                    {
                                        <span class="post-widget__title ui-title-inner">@item.NAME</span>
                                    }
                                    <div class="post-widget__date">
                                        <span href="/Products/Detail/@item.ID" class="post-widget__title ui-title-inner">
                                            <i class="icon stroke icon-Agenda"></i>
                                            <time datetime="2012-10-27 15:20">@item.ARTICLENO</time>
                                        </span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
    
                }
            </div>

    Result:

    Best regards,

    Yijing Sun

    Monday, February 24, 2020 5:13 AM