When I incorporate a repeater into my Table design, Bootstrap tends to interfere with my style

My code needs to be organized in sequence, but I am having trouble with the design due to Bootstrap interfering.

<div class="col-lg-12 col-md-12 col-sm-12 row">
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
    <ItemTemplate>
            <div class="col-md-4">
                <div class="panel panel-danger">
                    <div class="panel-heading">
                        <asp:Label ID="lblCategoryId" runat="server" Text='<%#Eval("CategoryId") %>' Visible="false"> </asp:Label>
                        <img class="img-responsive" src="../images/<%#Eval("imgSrc")%>" /><h5 class="text-center" />
                        <%#Eval("Category") %> </h5>
                    </div>
                    <ul class="list-group list-group-flush text-center">
                        <asp:Repeater ID="Repeater2" runat="server" DataSourceID="SqlDataSource2">
                            <ItemTemplate>
                                <a>
                                    <li id="liProdView" class="list-group-item">
                                        <asp:LinkButton ID="LinkButton2" runat="server" PostBackUrl='<%#Eval("SubCategoryId","CustomerDetails.aspx?SubCategoryId={0}") %>'>
                                        <%#Eval("SubCategory") %>  ( <%#Eval("CompanyCount") %>)
                                        </asp:LinkButton>
                                    </li>
                                </a>
                            </ItemTemplate>
                        </asp:Repeater>
                        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:ServiceConnectionString %>"
                            SelectCommand="SELECT count(*) AS CompanyCount,dbo.tblCompanySubCategory.SubCategoryId, dbo.tblCompanySubCategory.SubCategory, 
                 dbo.tblCompanySubCategory.CategoryId  FROM dbo.tblCompany INNER JOIN dbo.tblCompanySubCategory ON 
                 dbo.tblCompany.SubCategoryId = dbo.tblCompanySubCategory.SubCategoryId
                 WHERE  (dbo.tblCompanySubCategory.CategoryId = @CategoryId)
                 GROUP BY dbo.tblCompanySubCategory.SubCategoryId, dbo.tblCompanySubCategory.SubCategory, dbo.tblCompanySubCategory.CategoryId">
                            <SelectParameters>
                                <asp:ControlParameter Name="CategoryId" ControlID="lblCategoryId" />
                            </SelectParameters>
                        </asp:SqlDataSource>
                    </ul>
                    <div class="panel-footer"><a class="btn btn-lg btn-block btn-primary" href="#">See more</a> </div>
                </div>
            </div>
    </ItemTemplate>
</asp:Repeater>
    </div>

enter image description here I have captured a screenshot of my current output and I would like to format it in rows so that each table is placed in a new row after one row is complete.

Answer №1

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

To resolve the problem, insert the provided code snippet before the </ItemTemplate> tag in your HTML document.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customize the settings of the parent class in the child class through CSS

This issue has been on my mind for quite some time now, and despite trying various solutions, I haven't found a satisfactory fix. Within my style sheet, the following code is present: .message input[type='submit'] { background-color: g ...

Problem encountered in C# Json Response when two fields are written in a language other than the default language

As I develop a web service in C#, using HTTP RESPONSE.WRITE to generate JSON responses, I encounter an issue when including Hebrew language fields. The problem arises when the JSON response is incomplete due to a missing end bracket. Below is a comparison ...

Create distinct projects for WebApi and Angular to keep them separate

Currently, I am working on a project that involves webApi and Angular apps combined in one project by default from Visual Studio. However, I want to separate them into two distinct projects. To achieve this, I removed all the SPA-related code from my StarU ...

Circle overlapping another circle in an image

Initially, let me explain what I am aiming for. I desire a layout similar to the one below (however, replace the squares with circles): |------------| | |-------| | | | button| | | |-------| | |------------| The concept is to have a button enclosed wi ...

Align the parent div center and have both dynamic and fixed width child divs inside

In the main parent div, there is a combination of my logo and navigation bar. The logo has a fixed width while the dynamic-width navigation bar is positioned 100px to the right of the logo. However, the current layout places them on the left side of the s ...

Learn the trick to making specific words appear bold in Select2 by changing the font style

I'm currently working with select2 version 4.0.1, and I have a requirement to modify the font for specific words. In particular, I want to display codes AK and HI in a different/bolder font style, similar to the example below: <select id="select2" ...

"Can you explain the method by which reveal.js adjusts the size of

I have been exploring the resizing behavior of elements in reveal.js and trying to understand how they dynamically adjust. If you resize the page height, you can observe that the elements shrink up to a certain extent along with the page. However, when in ...

The background image is not visible

.imagem-cortada { width: 100%; background-image: url("imagens/Vector 9.png"); } The HTML: <section class="imagem-cortada conteudo-principal"><!--inicio sobre nos--> <div class="container"> ...

Having difficulty implementing a pseudo-selector with a custom directive within an ng-repeat loop

I have created a directive for a table with collapsible rows that allows only one row to be open at a time. Here is how it looks: HTML: <div class="my-table"> <div class="table-header"> ... table headers ... </div> & ...

Tips for defining CSS styles for the background color of <td> elements within a sitemap

I am facing a similar issue to the one discussed in this thread Possible to fill a table cell with a bg color?. The challenge I am encountering is related to applying CSS styles to the td tags within a sitemap structure. (Although it functions correctly ...

Positioning two divs side by side, with two more below in the following row

I am attempting to align multiple div elements with a width relative to the screen size. However, when I try to float them next to each other, they shift to the right and display under each other. I have experimented with applying display: inline-block; a ...

Retrieving Data from Exception Object in ASP.NET/C#

I am currently utilizing a third-party application that offers an API for its event logging system. I am looking to handle exceptions at the method level within my code and forward those exceptions to the third-party's event logging system. However, I ...

Place items at the lower part of the container rather than the top

My <ul> has a fixed height and I want the <li> elements inside it to stack at the bottom instead of the top. I attempted using vertical-align: bottom on the <ul>, but that didn't have any effect. The <li> content may overflow ...

Identify if a mobile browser or mobile application is being utilized using only CSS

Dealing with email formatting challenges and seeking a CSS-only solution. The struggle lies in the fact that dark mode on outlook/gmail apps causes color inversions, while mobile browsers like Chrome, Safari, and DuckDuckGo do not invert colors in the sam ...

Issue with transforming rotation in Quirks mode

Currently, I'm developing a website in quirks mode which does not allow the use of . In my project, I am facing an issue where CSS3 translate image is not working in IE10 and 11, although it works fine in IE9 due to the limitations mentioned above. Is ...

Can the @font-face src URL be modified?

We have integrated FontAwesome with Bootstrap on our website. However, we encountered an issue when using FA with a custom minifier as it tries to load fonts from a relative path, leading to a 404 error due to the structure of the minified URL. To address ...

The functionality of Bootstrap toggle ceases to operate properly following an AJAX content update

I am currently using AJAX load to fetch some content on my webpage. I am working with Bootstrap 3 and Bootstrap toggle. When the content is loaded, the Bootstrap 3 content functions properly (the panel-primary panel is clearly visible). However, the Bootst ...

Differences in background-size among various browsers

Having some trouble with scaling backgrounds on different browsers. Initially designed website on Google Chrome, but background doesn't scale properly when viewed on iPhone or older versions of IE. Started with: background-size: 100% 150%; Then c ...

Customizing background styles in real-time in a Meteor-Angular application

I'm currently working on a unique AngularJS Ionic Meteor application, and I am in search of a method to dynamically change the background color of the bottom box within an ionic card based on specific float values. The criteria for color changes are a ...

Switching the color of NavLink text when onclick occurs

Is there a way to modify the text color of the links within the navbar using React? navLink1{ color: black; } <div className="left-navlinks"> <img className="logo" src={logo}/> &l ...