Question 259283 in Html Question posted in
Some basic documentation can be found here.

Html – Eliminate whitespace between divs generated from loop

I have a Razor page that I’m attempting to show <div> elements in rows using Bootstrap. Each <div> is generated programmatically like this:

@foreach (var item in Model)
{
    <div class="col-4">
        <!-- content -->
    </div>
}

My problem is that there’s whitespace or a return character or something between each <div> and that causes the last <div> to get pushed to the next line.

So with class="col-4", I should be able to squeeze 3 elements onto one row. But the third one gets pushed to the next row. Typically, when I hardcode this sort of thing, I remove all whitespace between each <div> and it fixes the issue:

<!-- THIS WORKS -->
<div class="col-4">
    <!-- content -->
</div><div class="col-4">
    <!-- content -->
</div><div class="col-4">
    <!-- content -->
</div>

<!-- THIS DOESN'T WORK -->
<div class="col-4">
    <!-- content -->
</div>
<div class="col-4">
    <!-- content -->
</div>
<div class="col-4">
    <!-- content -->
</div>

My question is how do I achieve this when I’m rendering each div programmatically?

Tags:

2

Answers


  1. 0

    If you are within a bootstrap row and just using col-* elements then whitespace should not matter at all. Your code sample has some missing quotes which could be screwing things up, but I can’t tell if that’s a typo in your question or the actual code output.

    When the quotes are fixed and put into a row I don’t see any issues at all or even any differences between the two code samples you provided

    div[class^="col-"]{
  background: #CCC;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="row">
  <!-- THIS WORKS -->
  <div class="col-4">
      1
  </div><div class="col-4">
      2
  </div><div class="col-4">
      3
  </div>
</div>

<br/><br/>

<div class="row">
  <!-- THIS DOESN'T WORK -->
  <div class="col-4">
      1
  </div>
  <div class="col-4">
      2
  </div>
  <div class="col-4">
      3
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Just curious, is there a good reason why you’re wanting to specify the column widths if generating the column divs in a loop? By using the col-4 class you’re limited to only looping over 3 items every time (unless you modify the default $grid-columns setting to be larger than 12, of course), and as you’re obstensibly expecting these divs in this example to be equal-width, you may as well just use col instead and let the divs auto-format.

    Doing so should keep all elements on the same row:

    <div class="row">
  <div class="col">
    <!-- content -->
  </div>
  <div class="col">
    <!-- content -->
  </div>
  <div class="col">
    <!-- content -->
  </div>
</div>

    I wouldn’t think that whitespace/newline should make any difference… but it does sound like it’s behaving as if the aggregated column widths exceed the max grid columns, even though that shouldn’t be the case (again, assuming that the default $grid-columns Sass variable value hasn’t been reduced).

    Alternatively (or additionally), you can try using the inline flex display class for the container, like so:

    <div class="d-inline-flex flex-row">
 <div class="col">
   <!-- content -->
 </div>
 <div class="col">
   <!-- content -->
 </div>
 <div class="col">
   <!-- content -->
 </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search