Make elements over flow outside col in bootstrap-Twitter bootstrap

StayFoolish
May 24, 2021
222 views
0 votes
2 Answers

i am trying to make a google review section in contact card in which i have a google logo icon and a text element ( google review ) and font awesome 5 stars. I want all this to align vertically straight. But since i gave col-2 class all these are getting wrap to next line. I will attach the desired output image.

.row {
  height: 400px;
  background-color: grey;
}

.col-2 {
  background-color: yellow;
}

/* google-review */




.google-review {
  transform: rotate(90deg);
  transform-origin: top left;
  top:0;
  background-color: #88206d;
  overflow: visible;
}

.g-logo img {
  transform: rotate(-90deg);
  width: 38px;
  background-color: #fff;
  padding: 5px;
  border-radius: 22px;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.53);
  -webkit-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.53);
  -moz-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.53);
  
  
}

.stars {
  background: -webkit-linear-gradient(#FF3D00, #FFCE31);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./style.css">

<div class="container">
  <div class="row">
    <div class="col-5">
    </div>
    <div class="col-2 position-relative">


      <div class="google-review position-absolute text-light px-4 py-2">
        <div class="gtext-review"><span class="g-logo pr-3"><img src="https://i.ibb.co/PwTGZkb/search.png"></span>Google Review <span class="stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span></div>
      </div>



    </div>
    <div class="col-5">
    </div>

  </div>
</div>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js'></script>
<script src="./script.js"></script>

Answers

Based on your desired output, here is the code to achieve this.

You can do most of the things without writing custom CSS because bootstrap covers most of the CSS classes to simplify our effort.

If I understood incorrectly, let me know in the comments.

span.vertical-txt {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="col-2 position-relative">
  <!-- You can place it here -->
  <div class="position-absolute right-0 text-white p-2" style="background-color: #88206d;">
    <div class="d-flex flex-column align-items-center">
      <img src="https://i.ibb.co/PwTGZkb/search.png" width="20" alt="">
      <span class="vertical-txt py-2">Google Reviews</span>
      <i class="fa fa-star py-1"></i>
      <i class="fa fa-star py-1"></i>
      <i class="fa fa-star py-1"></i>
      <i class="fa fa-star py-1"></i>
      <i class="fa fa-star py-1"></i>
    </div>
  </div>
</div>

Just set the width of the google-review div to 400px. Here is the working snippet:

.row {
  height: 400px;
  background-color: grey;
}

.col-2 {
  background-color: yellow;
}

/* google-review */




.google-review {
  transform: rotate(90deg);
  transform-origin: top left;
  background-color: #88206d;
  overflow: visible;
  width: 400px;
}

.g-logo img {
  transform: rotate(-90deg);
  width: 38px;
  background-color: #fff;
  padding: 5px;
  border-radius: 22px;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.53);
  -webkit-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.53);
  -moz-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.53);


}

.stars {
  background: -webkit-linear-gradient(#FF3D00, #FFCE31);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./style.css">

<div class="container">
  <div class="row">
    <div class="col-5"></div>
    <div class="col-2">
      <div class="google-review text-light px-4 py-2">
        <div class="gtext-review">
          <span class="g-logo pr-3">
            <img src="https://i.ibb.co/PwTGZkb/search.png">
          </span>Google Review
          <span class="stars">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
          </span>
        </div>
      </div>
    </div>
    <div class="col-5"></div>
  </div>
</div>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js'></script>
<script src="./script.js"></script>

Please signup or login to give your own answer.

Click here to cancel reply.