Allow elements to extend beyond columns in Bootstrap for a modern design touch

I'm working on creating a Google review section within a contact card that includes a Google logo icon, text element (Google Review), and Font Awesome 5 stars. My goal is to have everything aligned vertically straight. However, because I assigned the col-2 class, everything is wrapping onto the next line. I will provide an image of the desired output.

https://i.sstatic.net/UnIf4.png

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d5e41444e46004e4c5f42585e48416d1c0315031c">[email protected]</a>/slick/slick.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/kenwheeler/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10637c79737b50213e283e21">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a091613191157191b08150f091f163a4b5442544b">[email protected]</a>/slick/slick.min.js'></script>
<script src="./script.js"></script>

javascripthtmlcssbootstrap-4

Answer №1

Here is the code snippet to help you achieve your desired output.

You don't need custom CSS for most styling as bootstrap provides pre-defined classes that simplify our work.

If there's any misunderstanding, feel free to clarify in the comments below.

span.vertical-txt {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af8f5f5eeebefe9fbeacaaff5e1ef">[email protected]</a>/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">
  <!-- Insert your content 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>

Answer №2

To make the google-review div 400px wide, simply set its width to 400px. Below is the code 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed9e81848e86c08e8c9f82989e8881addcc3d5c3dc">[email protected]</a>/slick/slick.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/kenwheeler/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1a2bdb8b2ba91e0ffe9ffe0">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8bba4a1aba3e5aba9baa7bdbbada488f9e6f0e6f9">[email protected]</a>/slick/slick.min.js'></script>
<script src="./script.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for implementing xpath in module.exports with mocha javascript

Currently, I am utilizing mocha in conjunction with Node.js and have encountered a challenge. In my scenario, I need to use the XPath defined in one test file (verification.js) and apply it in another file (test.js). The issue arises from the fact that the ...

javascriptnode.jsmocha.js

Creating thumbnails for documents, like in Google Docs, using NextJS

For my personal project, I am working on creating a Google Docs clone using Quill and NextJS. As part of this project, I want to have thumbnails for all the documents displayed, similar to Google Docs. I initially tried displaying the first 100 characters ...

javascripthtmlreactjsexpressnext.js

Challenges faced with Vuetify's vertical and non-linear stepper components

I've been struggling to grasp the concept of Vuetify's stepper feature. Despite my efforts, I haven't been successful in combining different steppers from their page that each have elements I need but lack others. One example is this one on ...

javascripthtmlvue.jsvuetify.js

utilizing async/await without the need for babel-polyfill

Here is the code I am working with: @action async login(payload){ try { this.loginLoading = true const data = await request('/admin/login', { method: 'post', data: payload }) this.logined = ...

javascriptreactjswebpackasync-awaitbabeljs

Two-way binding with Angular2's NgModel can encounter issues

After executing a GET XMLHttpRequest against a service, I received the following JSON payload as a response : {_id: "5aa1358d32eba9e34dd9f280", source: "Avengers", target: "Iron Man", enemies: "Actor"} Within my src/app directory, I have defined the obje ...

javascriptangular

Using jQuery to make sorting elements on a webpage, adjust the "clickAt" attribute for better functionality

I am working with a draggable list of items set up like this: <ul id="dadCol_0" class="dad-list ui-sortable"> <li class="dad-item ui-draggable" id="sl1" style="position: relative;">1</li> <li class="dad-item ui-draggable" id="sl2" sty ...

jqueryhtmldrag-and-drop

What is the best way to set a default value for a password form input field?

I'm currently working on creating a form with input fields similar to those found on Twitter. I want to set default values for the input fields, which I have successfully done. However, when it comes to the password field, the default value is present ...

javascripthtmlformstextinput

AngularJS users are experiencing issues with the "See More" feature not functioning as expected

One of my tasks involves dealing with a block of text that needs to be truncated using ellipsis. To achieve this, I am utilizing jquery dotdotdot. For more information on dotdotdot, please refer to the documentation. I have created a straightforward dire ...

javascriptcssangularjsdotdotdot

A hover effect in CSS that utilizes a psuedo element to overlay the primary element

When hovering, I want to achieve an effect that looks similar to the display below: To view my website, click here The relevant code is shown below with the !important attributes removed: .cta-button-menu, .cta-button-menu::before { transitio ...

htmlcsswordpress

The alignment of the DIV elements is not as I had hoped

I currently have three different divs on my webpage. Two of them are background divs stacked on top of each other, while the third one contains content and is positioned within the lower background div. My issue arises when I try to make the content div co ...

htmlcss

Difficulty encountered in setting the width of a sticky bottom element to be located at the bottom of the page with Tailwind

Fiddle: https://play.tailwindcss.com/pvT1jW8zZd Here is the code snippet I am working with: Here is how it currently appears: https://i.sstatic.net/2SRny.png <div class="bg-yellow-300"> <div class="p-16 m-5 text-xl bg-gray-500 ...

htmlcsstailwind-css

The function `mysql_real_escape_string()` results in clearing out MySQL fields that are empty

Within my HTML contact form, users have the ability to input any message they wish into the designated message field. This form utilizes AJAX for posting and is then processed in the PHP code below. The issue arises when I notice that an empty row is bein ...

phphtmlmysql

Deactivate a feature by clicking on it

HERE IS WHERE YOU CAN VIEW MY JSFIDDLE On my website, I have a main home page with a smooth scroll wheel script implemented. Additionally, I have a 'about' div that becomes visible when a button is clicked. The issue I am facing is that I want t ...

javascriptjqueryhtmlcss

Having an issue with the isClicked() function in SYMFONY FORM when combined with JavaScript - jQuery: event.preventDefault() and event.target.submit(), depending on the browser used

My Objective: I am aiming to incorporate two submit buttons on a Symfony FORM. The first button will be used for form validation, while the second submit button will serve as an exit option from the form. By default, the form fields have the required att ...

javascriptjqueryformssymfony

Solving the challenge of Decoding Hex and transforming it into a set output

I'm struggling with a complex algorithm that needs solving but I can't seem to find any clues on how to approach it. Can someone please help me understand how to navigate this problem? The Challenge A hypothetical pen input device sends hexadec ...

javascriptalgorithmbit-manipulationbitwise-operators

Maintain the active menu open when navigating to a different page on the website

My website has a dropdown menu, but whenever I click on a submenu link, the new page opens and the menu closes. However, I want the active menu to remain open on the new page of the website! To demonstrate what I have tried in a simple way, I created an e ...

javascriptjqueryhtmlcssajax

Guide on invoking a method from a class in a different file

Seeking a solution to a task involves calling a function from a different file within a class. Here's what I am trying to achieve: file1 export class Example { constructor() { ... } myCustomFunction = () => { ... } } file2 impor ...

javascriptreactjs

Is there a built-in way to update a Django template from the server side in response to an event?

As a novice Django developer, my task is to create an auction website. I need to enhance the template that displays item listings and bids, ensuring that the latest bids are updated in real-time without the need for users to refresh the page. While consid ...

javascriptjquerypythondjangopython-3.x

On Mobile Chrome, the default context menu on a canvas element is not functional. (This was tested on Android Chrome)

As a newcomer to Web Development, I am seeking assistance. Is there a way to enable the default context menu on a canvas element similar to how it works with images for downloading or sharing? While it is possible to right-click and save the canvas as an ...

javascripthtmlcanvas

Is there a way to modify my code to restrict users from liking a post multiple times?

I am currently working on a like system and I have made some progress. However, I am struggling to make it so that the likes only increment once. Does anyone have any insights or suggestions on how to achieve this? I have considered using session variables ...

javascriptphphtmljqueryajax