1

I marked the code, but big picture this style --bs-gutter-x: 1.5rem; is added from _grid_scss:6. Adding a style to override bs-gutter-x: 0rem; does not fix it. I've seen other people with this issue, but have not seen a solution that fixes it yet.

Here is a bug report

Does anyone have any workaround ideas?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="card tester_card m-2">
  <div class="row">
    <div class="row">
      <div class="col-1 m-1 tester_avatar">
        <img id="tester_author_image" class="rounded-circle shadow-1-strong" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=25x25" alt="avatar">
      </div>
      <div class="col m-1">
        <p id="tester_top">jon 19 minutes ago </p>
      </div>
      <div id="three-dots" style="display: block" class="col-auto">
        <div class="dropdown">
          <p href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></p>
          <div class="dropdown-menu">
            <p id="tester_edit_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_edit_modal(9)">
              <i class="bi bi-pencil-square"> Edit</i>
            </p>

            <p id="tester_ban_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_ban_modal(1)">
              <i class="bi bi-eye-slash"> Ban</i>
            </p>
            <p id="tester_history_modal" style="display: none;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_history_modal(1)">
              <i class="bi bi-clock-history"> History</i></p>
          </div>
        </div>
      </div>
    </div>
    <!--THIS ADDS --bs-gutter-x: 1.5rem; which throws the div off -->
    <div class="row border-top border-bottom">
      <p id="tester_body">test</p>
    </div>
    <div class="row">
      <div class="reply">
        <div class="reply">
          <p id="upvote" class="p-0" onclick="upvote(9,1)">
            <i id="upvote_icon9" class="bi bi-arrow-up"></i></p>
          <p id="total_votes9">0</p>
          <p id="downvote" onclick="upvote(9,0)">
            <i id="downvote_icon9" class="bi bi-arrow-down"></i></p>
        </div>

        <p id="tester_reply_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_reply_modal(9)">
          <i id="total_replies" class="bi bi-chat-left"> 0</i>
        </p>
        <p id="tester_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(9)">
          <i class="bi bi-award"></i>
        </p>
        <div class="dropdown">
          <p class="dropdown-toggle" data-bs-toggle="dropdown"><i class="bi bi-share"></i></p>
          <ul class="dropdown-menu">
            <p id="tester_crosspost_modal" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_crosspost_modal(9)">
              <i class="bi bi-signpost-2"> Cross Post</i>
            </p>
            <p id="copytoclipboard" class="dropdown-item" onclick="copyToClipboard('http://127.0.0.1:5000/tester/9')">
              <i class="bi bi-clipboard"> Copy Link</i>
            </p>
            <p id="save_tester" class="dropdown-item" onclick="save_tester(9)">
              <i id="save_tester_icon9" class="bi bi-save"> Save</i>
            </p>
          </ul>
        </div>
      </div>
    </div>
    <div id="reply" class="row">

    </div>
  </div>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
rockets4all
  • 684
  • 3
  • 8
  • 32
  • I had the same problem using Sveltestrap (Svelte + Bootstrap integration) components, i solved my problem overriding the margin (left & right) that use the custom property --bs-gutter-x in row class rather then modifying the custom property itself. – Simo Mar 22 '22 at 15:02
  • You have directly-nested rows here which apparently aren't in a Bootstrap container. That's nonstandard and probably causes most of your issues. – isherwood Dec 21 '22 at 14:04
  • You're also misusing paragraphs here by using them to encapsulate action controls. That's not their purpose. – isherwood Dec 21 '22 at 14:06

1 Answers1

1

I had the same issue. Every time when I work with Bootstrap I have their CSS downloaded to my CSS folder. What works for me is changing the bootstrap css file. Find there exactly: --bs-gutter-x:1.5rem; and remove it! That's all ;)

pndzl1977
  • 26
  • 4