Mattlinux1 Mattlinux1 - 19 days ago 5
ASP.NET (C#) Question

Bootstrap rendering text with an image within a row and col

I'm currently trying to render text below an image, i'm having truble stopping the text pushing down on the col below making the current overall grid mess up.

All I would like to do is keep the grid ratio. I have run some tests using class="col-md-2 col-sm-6" this works fine with the text and images but will only have 4 objects in a line.

If i use the 6 objects in a line class="col-md-2 col-sm-6" the text will not render correctly messing up the page.

Example of grid working when the text is not to long:

enter image description here

Example of the grid messing up when the text is to long overlapping the bootstrap col:

enter image description here

Image used: enter image description here

Code used:

<div class="row">
<div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink0" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink>
</div>
<div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink1" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink>
</div>
<div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink2" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink>
</div>
<div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink3" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test Tester tester tester</asp:HyperLink>
</div>
<div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink4" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink>
</div>
<div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink5" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink>
</div>
<div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink6" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink>
</div>
<div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink7" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink>
</div>
<div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink8" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink>
</div>
<div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink9" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink>
</div>
<div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink10" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink>
</div>
<div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink11" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink>
</div>
</div>

Answer

The reason for the grid breaking when your text gets too long is because you need to reset the columns. At the end of the last column in the row you will need to add a clearfix div, information for which can be found on this page > Responsive Column Resets

I have taken bits of your code to show you where the clearfix div needs to go:

<div class="row">
    <div class="col-md-2 col-sm-6">
      <p>Test</p>
    </div>
    <div class="col-md-2 col-sm-6">
      <p>Test</p>
    </div>
    <div class="col-md-2 col-sm-6">
      <p>Test Tester tester tester</p>
    </div>
    <div class="col-md-2 col-sm-6">
      <p>Test</p>
    </div>
    <div class="col-md-2 col-sm-6">
      <p>Test</p>
    </div>
    <div class="col-md-2 col-sm-6">
      <p>Test</p>
    </div>
    <!-- Add the extra clearfix for only the required viewport -->
    <div class="clearfix visible-md-block"></div>
</div>
Comments