Aligning the text vertically in the center while also rotating it 90 degrees to the right, alongside blocking the image and icon elements

I have been experimenting with Bootstrap

Trying to create a layout with an image aligned to the top right, a rotated paragraph with a star symbol, and a vertical arrangement of five star symbols. Here's a screenshot of what I'm aiming for:

Screenshot 1

Screenshot 2

However, I'm facing difficulty in aligning the Google review text and five star font awesome symbols vertically centered on the right side.

.contact-card {
    background-color: #88206D;
    border: solid 2px #fff;
    border-radius: 21px;
    min-height: 406px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    box-shadow: 6px 6px 9px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 6px 6px 9px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 6px 6px 9px 0px rgba(0,0,0,0.5);
}


  #google-icon img {

      height: 44px;
      z-index: 1000;
      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);

  }

  .google-review {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
  }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<main>
        <div class="container">              
            <div class="row contact-card">  
                <div class="map col-5" id="map"></div>
                <div class="offset-2 image-scroll"></div>
                <div class="map-des col-3 text-white my-auto pt-4" id="m-des"></div>
                    
<!-- Struggling in this part -- >

                <div class="col-1 text-center">
                  <div id="google-icon">
                  <img src="https://i.ibb.co/nknMt4k/search.png" class="google-icon">    
                </div>  
                  
    
                  <div class="side-star">
                  <p class="google-review text-nowrap">
                    <strong>Google Review</strong>
                  </p>
                  <div class="five-star d-flex flex-column">
                    
                    <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>
                  
                  
                  
                  </div>
                </div></div>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

Implement display: flex along with align-items: center :

.contact-card {
    background-color: #88206D;
    border: solid 2px #fff;
    border-radius: 21px;
    min-height: 406px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    box-shadow: 6px 6px 9px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 6px 6px 9px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 6px 6px 9px 0px rgba(0,0,0,0.5);
}


  #google-icon img {

      height: 44px;
      z-index: 1000;
      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);
     margin-top: 24px;
     margin-bottom: 60px;
  }

  .google-review {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    margin-bottom: 60px;
  }

.col-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<main>
        <div class="container">              
            <div class="row contact-card">  
                <div class="map col-5" id="map"></div>
                <div class="offset-2 image-scroll"></div>
                <div class="map-des col-3 text-white my-auto pt-4" id="m-des"></div>
                    
<!-- The following section is causing me some trouble -- >

                <!-- google reviews -->
                <div class="col-1 text-center">
                  <div id="google-icon">
                  <img src="https://i.ibb.co/nknMt4k/search.png" class="google-icon">    
                </div>  
                  
    
                  <div class="side-star">
                  <p class="google-review text-nowrap">
                    <strong>Google Review</strong>
                  </p>
                  <div class="five-star d-flex flex-column">
                    
                    <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>
                  
                  
                  
                  </div>
                </div></div>

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

Substitute all instances of <table> with <div> tags, making sure to include specifications for

Currently, I find myself immersed in a project that relies heavily on tables, which isn't exactly ideal but is what the marketing department insists upon... To tackle this issue, I have implemented jQuery to convert all tables into DIVs, and so far, ...

javascripthtmlhtml-table

The reason behind a loop being caused by an IF statement

Here is a snippet of code that I'm trying to understand: ReactDOM.render(<Change />, document.getElementById('app')); function Change() { const [i, setI] = React.useState(0); let rnd = 9; if (i !== rnd) { setTime ...

javascriptreactjs

Implement a jQuery click event on a dynamically generated button in the code-behind

A button (Replybtn) is dynamically created when clicked in the code-behind file. --Default.aspx.cs-- protected void ReloadThePanelDetails_Click(object sender, EventArgs e) { litResultDetails.Text = litResultDetails.Text + "<button id='Replyb ...

javascriptc#jqueryasp.net

Another component's Angular event emitter is causing confusion with that of a different component

INTRODUCTION In my project, I have created two components: image-input-single and a test container. The image-input-single component is a "dumb" component that simplifies the process of selecting an image, compressing it, and retrieving its URL. The Type ...

javascripthtmlangulartypescript

Encountering issues with JavaScript/ajax if statement functionality

Driving me insane! Dealing with 2 modal forms - one for login and another for registration. Javascript handles client-side validation, followed by an ajax call to either a registration or login php file. The PHP files return 'OK' if successful or ...

javascriptphpajax

Node.js Express application: Managing endpoint conflicts

After searching for a solution to this issue and not finding one, I apologize if this question is repetitive. In my express+node.js application, I have two endpoints defined as follows: // Retrieves a tweet by unique id app.get('/tweets:id', fu ...

javascriptnode.jsexpress

FusionMaps XT integration with VueJs: Troubleshooting connectorClick events issue

I am experiencing some issues with events connectorClick on my VueJS processed map. When I click on the connector line in the example below, the alert function does not seem to work as expected. Vue.use(VueFusionCharts, FusionCharts); let grphMap = new ...

javascriptvue.jsfusioncharts

Withdrawal of answer from AJAX request

Is there a way to create a function that specifically removes the response from an AJAX call that is added to the inner HTML of an ID? function remove_chat_response(name){ var name = name; $.ajax({ type: 'post', url: 'removechat.php ...

javascriptphpjqueryajax

Scraping data from the web using R and creating interactive plots with hover text in Plotly without

I'm attempting to extract hover text content from plotly traces that have been shared online. This is a new type of scraping for me, and I'm exploring ways to accomplish this task in R without relying on selenium or phantomjs, possibly with the u ...

javascripthtmlrweb-scrapingrvest

Generate numerous div elements by utilizing ng-repeat

I am trying to generate 'n' red blocks with text (where n represents the number of elements in an array), but unfortunately, I am seeing a blank page. <html> <body> <script src="https://ajax.googleapis.com/ajax/libs/angu ...

javascripthtmlangularjsangularjs-ng-repeat

HTML-Formatted Email Content

Similar Question: MailTo with HTML body I am looking to utilize JavaScript to send emails. I came across this helpful post: Sending emails with JavaScript. My goal is to include images, bold text, and color changes in the email content. Does anyone h ...

javascripthtmlemail

I encountered an issue with my foreach loop where the checkbox failed to properly send the value

Having an issue with the checkbox not sending the desired value. This is my HTML code for the checkbox. I am using a foreach loop. <form id="signupform" autocomplete="off" method="post" action="inputchecklist.php" class="form_container left_label"> ...

phphtml

Is there a way to retrieve a child's parents within an array.filter() callback function even if they were initially filtered out?

Today I stumbled upon the array.filter() method and its accompanying callback function. I have a collection of objects structured like this: var treeAry = [ {"id" : "200", "parent": "#", "type" : "1"}, {"id" : "300", "parent": "#", "type" : " ...

javascriptjqueryarrays

What is the best way to extract a thumbnail image from a video that has been embedded

As I work on embedding a video into a webpage using lightbox, I'm looking for advice on the best design approach. Should the videos be displayed as thumbnails lined up across the page? Would it be better to use a frame from the video as an image that ...

javascriptjquerycsshtml

AngularJS input range is written inside the bubble that crosses over the screen

Is there a way to write inside the bubble of the range slider? I have adjusted the design of the range slider and now I simply want to display the number inside the bubble: Please see image for reference I aim to display the number inside a circle. What ...

javascriptcssangularjsangularjs-scopeangular-ui-bootstrap

Attempting to incorporate a vibrant hover effect into a sleek carousel design

I am struggling to implement a hover effect with color on an image within a slick carousel on my Wordpress website. I have been exploring various options but haven't found a solution yet. ...

csswordpressplugins

handling a radius variable across various stylesheets in SASS

Recently, I started using SASS and I am very impressed with this tool. However, before diving in further, I have one question that I can't seem to find the answer to. What is the best approach for managing a variable value across multiple style sheet ...

csssass

Why does Asp.net Webform load twice every time I click on the form link?

In my asp.net webform project, I am encountering an issue where the page is running twice when clicked. The problem arises when calling two functions (Fill DropDowns) on the Page_Load Event. During debugging, it was observed that the control enters the Pa ...

javascriptc#htmlasp.netwebforms

Strange behavior in Angular's http response

When I make a call to my API and receive a JSON response, the code snippet below illustrates how I handle it: getAllLearn() { this.learnService.getAllLearn().subscribe(res =>{ // The console log shows that res.featured only has one index: ( ...

javascriptangular

Is there a way to store a file in a server directory using the <a href='mypdf.pdf'> tag?

I find myself in a bit of a bind. I have a document that needs to be saved in my server directory, which is attached in an <a href='mypdf.pdf'>My pdf</a> tag. The issue is that the filename, mypdf.pdf, is dynamically changing via Jav ...

javascriptphpajaxfile-uploaddownload