Text going outside of div Bootstrap

January 2, 2023

I am little new in HTML and bootstrap. I am facing weird issue in my website.

<div class="row mt-3">
    <div class="col-md-6 mt-3 mt-md-0">
        <a href="https://stag.example.com/gu/post/happy-new-year-2023-68400"><img src="https://via.placeholder.com/500x500/" class="img-fluid blog-img h-100 lzy_img" alt="Happy New Year 2023" width="100%" height="100%">
        </a>
    </div>
    <div class="col-md-6 mt-3 mt-md-0">
        <div class="blog_content d-flex bg-dark text-white flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3">
            <h5 class="mb-0 border-0">નુતન વર્ષ 2023 ની શરૂઆત </h5>
            <div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0 h-100">
                <div class="flip-card h-100">
                    <div class="flip-card-inner h-100">
                        <div class="flip-card-front d-flex justify-content-center align-items-center">
                            <p class="">નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!</p>
                        </div>
                        <div class="flip-card-back d-flex justify-content-center align-items-center">
                            <p class="">nutan varsh 2023 ni<br> sharuat kaik evi thay,<br> tamar jivanam khushio felay,<br> anand mangalathi darek divas<br> pasar thay evi hardik<br> shubhakamanao !!</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="time d-flex justify-content-between align-items-center align-items-end mt-auto pt-3">
                <div class="left text-start">
                    <h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/festival/happy-new-year-2023">નવા વરસની શુભકામનાઓ</a></h6>
                    <p class="mb-0"><small>1 day ago</small></p>
                </div>
                <div class="right">
                    <span class="copy"><img src="https://stag.example.com/assets/images/copy.png" class="mx-1 social" alt="share quote" width="24" height="24"></span>
                    <a href="https://stag.example.com/gu/post/happy-new-year-2023-68400"><img src="https://stag.example.com/assets/images/share.png" class="mx-1 social" alt="share quote" width="24" height="24"></a>
                </div>
            </div>
        </div>
    </div>
</div>

and I have CSS like below

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-card-front {
    background:rgba(240, 240, 240, 0.99);
    color:#000;
    font-weight:600;
}
.flip-card-back {
  color:#000;
  transform: rotateY(180deg);
  background:rgba(240, 240, 240, 0.99);
  font-weight:600;
}

I have marked that in DESKTOP its showing perfect text but in mobile its going outside of parent div
like this image

in DESKTOP its looking perfect like this image

I have not added any mobile specific CSS. I have added code in codeplay for debug it.

I have also marked that if I remove flip-card div and put text, its working fine. I am using bootstrap 5.2.

Let me know if someone here can help me to correct it.

Thanks!

>Solution :

It seems that the text has absolute positioning which takes it out of flow, therefore the parent is not adjusting to contain it.

Assuming that the goal is to contain the text in flip-card and keep both sides stacked together, perhaps try use grid display on flip-card-inner and place the 2 sides in the same cell, instead of absolute positioning:

.flip-card-inner {
  /* 👇 Added this */
  display: grid;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card-front,
.flip-card-back {
  /* 👇 Added these and removed "position: absolute" */
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

Full example:

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

.flip-card-inner {
  /* 👇 Added this */
  display: grid;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  /* 👇 Added these */
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background: rgba(240, 240, 240, 0.99);
  color: #000;
  font-weight: 600;
}

.flip-card-back {
  color: #000;
  transform: rotateY(180deg);
  background: rgba(240, 240, 240, 0.99);
  font-weight: 600;
}

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

<div class="row mt-3">
  <div class="col-md-6 mt-3 mt-md-0">
    <a href="https://stag.example.com/gu/post/happy-new-year-2023-68400"
      ><img
        src="https://via.placeholder.com/500x500/"
        class="img-fluid blog-img h-100 lzy_img"
        alt="Happy New Year 2023"
        width="100%"
        height="100%"
      />
    </a>
  </div>
  <div class="col-md-6 mt-3 mt-md-0">
    <div
      class="blog_content d-flex bg-dark text-white flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3"
    >
      <h5 class="mb-0 border-0">નુતન વર્ષ 2023 ની શરૂઆત</h5>
      <div
        class="d-flex flex-grow-1 justify-content-center align-items-center mb-0 h-100"
      >
        <div class="flip-card h-100">
          <div class="flip-card-inner h-100">
            <div
              class="flip-card-front d-flex justify-content-center align-items-center"
            >
              <p class="">
                નુતન વર્ષ 2023 ની<br />
                શરૂઆત કંઈક એવી થાય,<br />
                તમારા જીવનમાં ખુશીઓ ફેલાય,<br />
                આનંદ મંગલથી દરેક દિવસ<br />
                પસાર થાય એવી હાર્દિક<br />
                શુભકામનાઓ !!
              </p>
            </div>
            <div
              class="flip-card-back d-flex justify-content-center align-items-center"
            >
              <p class="">
                nutan varsh 2023 ni<br />
                sharuat kaik evi thay,<br />
                tamar jivanam khushio felay,<br />
                anand mangalathi darek divas<br />
                pasar thay evi hardik<br />
                shubhakamanao !!
              </p>
            </div>
          </div>
        </div>
      </div>
      <div
        class="time d-flex justify-content-between align-items-center align-items-end mt-auto pt-3"
      >
        <div class="left text-start">
          <h6 class="mb-0">
            <a
              class="link-bold"
              href="https://stag.example.com/gu/festival/happy-new-year-2023"
              >નવા વરસની શુભકામનાઓ</a
            >
          </h6>
          <p class="mb-0"><small>1 day ago</small></p>
        </div>
        <div class="right">
          <span class="copy"
            ><img
              src="https://stag.example.com/assets/images/copy.png"
              class="mx-1 social"
              alt="share quote"
              width="24"
              height="24"
          /></span>
          <a href="https://stag.example.com/gu/post/happy-new-year-2023-68400"
            ><img
              src="https://stag.example.com/assets/images/share.png"
              class="mx-1 social"
              alt="share quote"
              width="24"
              height="24"
          /></a>
        </div>
      </div>
    </div>
  </div>
</div>