My struggle continues as I attempt to vertically center Bootstrap icons next to text

Having trouble centering bootstrap star icons alongside review text in my website design. Even after embedding the svgs within my code and utilizing Bootstrap 4 classes, here's the current appearance:

Review star icons and text layout:

https://i.sstatic.net/2f4K7tgM.png

Snippet of my code:

.reviews {
        color: black;
}

.review-name {
        font-weight: 700;
        margin-bottom: 2px;
        margin-top: 40px;
}

.review-location {
        font-weight: 400;
}

.stars-container {
        vertical-align: center;
}

.stars {}

.review-date {
        font-weight: 400;
}

.review-content {
        font-size: .9rem;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad8d5d5cec9cec8dbcafa8f94899489">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="56343939222522243726166378657865">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<section id="reviews" class="reviews container-md">
            <div class="review-item">
                <p class="review-name">Brian C.</p>
                <p class="review-location">REVIEW LOCATION</p>
                <p class="review-date">
                    <span class="stars"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                            fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
                      
                        <!-- SVGs for each star icon go here -->
                       
                    </span> Jul 10, 2019
                </p>
                <p class="review-content">REVIEW TEXT</p>
                <p class="blockquote-footer">Yelp</p>
            </div>
</section>

Attempts to use the vertical-align property did not work as expected. The stars-container and stars classes were unresponsive to this styling. I also experimented with mx-auto (or my-auto) Bootstrap classes suggested by others, but unfortunately, no success. Seeking further solutions.

htmlcsssvgbootstrap-4vertical-alignment

Answer №1

Utilize Flexbox without the need for custom CSS. If Bootstrap is being used, leverage the helper classes offered by the framework. Only 2 classes are required here: d-flex and align-items-center, along with some padding/margins if necessary.

Refer to https://getbootstrap.com/docs/5.3/utilities/flex/

Below are two examples - one using icon font and the other using SVGs. Note that the HTML structure around these elements remains consistent and the display output is identical as well.

First example with icon font:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf9f4f4efe8efe9faebdbaeb5a8b5a8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccaea3a3b8bfb8beadbce1a5afa3a2bf8cfde2fdfde2ff">[email protected]</a>/font/bootstrap-icons.min.css">

<div class="d-flex align-items-center p-3">
  <i class="bi bi-star-fill"></i>
  <i class="bi bi-star-fill"></i>
  <i class="bi bi-star-fill"></i>
  <i class="bi bi-star-fill"></i>
  <i class="bi bi-star-fill"></i>
  <span class="ms-2">Jul 10, 2019</span>
</div>

Second example with SVG:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43212c2c37303731223303766d706d70">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="d-flex align-items-center p-3">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
  </svg>
  <!-- Additional SVG elements would be placed here -->
  <span class="ms-2">Jul 10, 2019</span>
</div>

Answer №2

Transform the star rating into a custom JavaScript Web Component <star-rating
Bundling HTML, CSS and JS together

Get rid of any external CSS concerns on the page with shadowDOM.

Incorporate the following HTML:

<star-rating rate="3" total="5" date="Jan 1, 1970"></star-rating>
<star-rating total="5" date="Dec 31, 1999"></star-rating>
<star-rating rate="7" total="10" date="Jul 10, 2019"></star-rating>

Result:

A simplified SVG star at: 

<style>
  star-rating {
    --star1size: 20px;
    background:pink;
    margin: 2px;
  }
</style>

<star-rating rate="3" total="5" date="Jan 1, 1970"></star-rating>
<star-rating total="5" date="Dec 31, 1999"></star-rating>
<star-rating rate="7" total="10" date="Jul 10, 2019"></star-rating>

<script>
  customElements.define(
    "star-rating",
    class extends HTMLElement {
      connectedCallback() {
        const star = `<svg fill="currentColor" viewBox="0 0 160 160">
  <path d="m36 154c-4 2-8-1-7-6l8-47-35-33c-3-3-2-9 3-9l49-7 21-44c2-4 7-4 9 0l22 43 49 7c4 1 6 6 3 9l-35 34 8 47c1 4-4 8-7 6l-44-22-44 23z"/></svg>`;
        const total = this.getAttribute("total") || 5;
        const rate = this.getAttribute("rate") || 0;
        const date = this.getAttribute("date") || "";
        this.attachShadow({ mode: "open" }).innerHTML = `<style>`+
            `:host{display:inline-flex;align-items:center;padding:10px;border-radius:8px}`+
            `svg{color:grey;width:var(--starsize,40px)}`+
            `svg:nth-child(-n+${rate}){color:goldenrod}`+
            `span{margin-left:.5em;font:2em Arial}`+
            `div{display:flex;align-items:center}`+
          `</style><div>${star.repeat(total)}<span>${date}</span></div>`;
      }
    }
  );
</script>

Answer №3

Include the following CSS:

.stars {
  display: inline-block;
  vertical-align: text-bottom;
}

The vertical-align property handles alignment, but it only applies to block and inline-block elements, hence the need for the display setting.

.reviews {
        color: black;
}

.review-name {
        font-weight: 700;
        margin-bottom: 2px;
        margin-top: 40px;
}

.review-location {
        font-weight: 400;
}

.stars-container {
        vertical-align: center;
}

.stars {
  display: inline-block;
  vertical-align: text-bottom;
}

.review-date {
        font-weight: 400;
}

.review-content {
        font-size: .9rem;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3c1ccccd7d0d7d1c2d3e3968d908d90">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04666b6b70777076657444312a372a37">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<section id="reviews" class="reviews container-md">
            <div class="review-item">
                <p class="review-name">Brian C.</p>
                <p class="review-location">REVIEW LOCATION</p>
                <p class="review-date">
                    <span class="stars"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                            fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
                            <path
                                d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                        </svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-star-fill" viewBox="0 0 16 16">
                            <path
                                d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                        </svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-star-fill" viewBox="0 0 16 16">
                            <path
                                d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                        </svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-star-fill" viewBox="0 0 16 16">
                            <path
                                d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                        </svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-star-fill" viewBox="0 0 16 16">
                            <path
                                d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                        </svg></span> Jul 10, 2019
                </p>
                <p class="review-content">REVIEW TEXT</p>
                <p class="blockquote-footer">Yelp</p>
            </div>
</section>

Answer №4

To make this work, simply include the following CSS code snippet in your stylesheet:

.stars,
.review-date {
  display: flex; 
  align-content: center;
  flex-wrap: wrap; 
  padding-right: 5px; 
}
  • Display: flex is essential for enabling the alignment features of flex.
  • Align-content: center; helps in centering the content.
  • Flex-wrap: wrap is required for align-content: center to function effectively.
  • Padding-right: 5px; creates a 5px gap between the .stars and .review-date.

If you want to learn more about flex, check out this site:

See the code in action below:

*CSS code demonstration*
*HTML code demonstrating the style*

Furthermore, it's worth noting that vertical-align can accept numerical values as well. However, adjustments may be needed with changes in font-size.

In this version, only this line of CSS is necessary:

.stars {vertical-align: 2px;}

Here’s how it looks when implemented:

*CSS code demonstration*
*HTML code demonstrating the style*

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

troubleshooting problems with jquery loading animations

My goal is to hide the menu, display an animated gif, hide the gif, and then show the updated menu. However, even though the menu disappears and reappears, the animated gif refuses to be shown. Where could I be making a mistake? $(document).ready(functio ...

cssjquery

Ensuring H1 Header and Regular Text Are Aligned on the Same Line

Is there a way to place a H1 header and regular text side by side on a single line with a line underneath them? Here is what I have attempted so far: This code snippet was my attempt, however, it did not produce the desired result. Can you point out what ...

htmlcss

Is there a way to set a max-width using a Pseudo class

I am utilizing a css tooltip that is linked to a span element in the following manner: <span class="mytooltip" data-mytooltip="Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here."> Has Tooltip </ ...

csspseudo-element

What is the best way to retrieve a PDF file from another website and showcase it on our own site without any redirection?

Is there a way to display a pdf from another website without having to redirect to that site? I'm looking for a solution that involves using the URL directly. ...

javascripthtml

The complete height of the website is concealed by the mobile toolbar/menu

I encountered a perplexing issue regarding the responsive resizing of a website on mobile devices. The problem arises when the full height extends over the toolbar/menu, unless the user manually hides the toolbar. Is there a way to dynamically resize the ...

javascripthtmlcssreactjsresponsive-design

My attempt to implement a sticky position is not functioning as expected

I've encountered an issue with my code using bootstrap. Despite setting the top position to 0, it's still not working. Any ideas on why this might be happening? Here's the code snippet: <style> .background-nav { background: ...

htmlcssbootstrap-4

Is it possible to insert both the name and value of a complete attribute within an element using a string in Razor?

There is a common way to achieve this in asp.net MVC Razor Engine: @{ string myValue = "foo" } <h1 hello='@myValue'></h1> However, I am interested in an alternative approach that might result in an error: @{ string myAttri ...

htmlasp.net-mvcrazorasp.net-core

Are you familiar with PowerShell and its innovative modular GUI capabilities?

One challenge I face is assisting clients who constantly monitor the performance of their servers, services, and network. Utilizing PowerShell, I envisioned creating a unified GUI interface for all these tasks, including remote log tailing capabilities. B ...

c#htmlpowershelluser-interface

Shifting the Bootstrap sidebar

Here is a layout defined using Bootstrap: <div class="container-fluid"> <div onclick="smallSize()">Click</div> <div onclick="largeSize()">Click</div> <div class="row"> ...

htmljquerycssbootstrap-4

Customizing Big Cartel's Neat theme: A guide to eliminating the blur effect on featured product images upon site activation

My website is built on Big Cartel using the Neat theme. Every time the homepage loads, the Featured products images appear blurry for about 4 seconds, especially if you're not using Chrome browser. Is there a way to remove this blur effect? Thank yo ...

htmlblurrybigcartel

Incorporate a jQuery userscript on Firefox that includes a link to a form

Attempting to incorporate a search link into an online form using a userscript with jQuery, specifically for Firefox. I typically work in Chrome, so I'm encountering some challenges with compatibility in Firefox. However, I need this to be functional ...

javascriptjqueryhtml

Retrieve the unique identifier-specific div element from a distant webpage and proceed to modify its content

If we consider a div with the ID MydDiv on a remote page like site.com/page1.html, how can we specifically retrieve this div for later content manipulation? What would be the most effective approach in addressing this issue? In my attempts, I have explor ...

phphtmlsimple-html-dom

Activate validation checks when the Div is loaded

I have a situation where I have multiple divs on my page, with only one visible at a time due to the use of an update panel. Within the third div, I need to implement validations using jQuery. <script src="http://ajax.aspnetcdn.com/ajax/jquery.valida ...

jqueryvalidationhtmlonload

Utilizing jQuery to generate dynamic nested divs within the ul li tags

I am looking to dynamically generate nested divs within a ul li. The goal is to create the following structure programmatically: <ul> <li> <div class="videoThumbnail"> <img src="./img6.jpg" /> &l ...

javascriptjqueryhtmlcss

Flex sidebar collapse menu

I am currently in the process of developing an admin panel for my website. I have a sidebar menu that I would like to hide behind a hamburger icon and only expand when clicked on. After researching potential solutions, I haven't found much that fits m ...

htmlcssflexbox

What steps should be taken to rectify open tags or quotes in the source code of CKeditor when a user forgets

When inserting data into MySQL using CKEditor and PHP, I encounter an issue when users input raw HTML containing open quotes or tags. How can I handle this problem? For instance, if a user enters content in the CKEditor source and leaves quotes open, how ...

phpjquerymysqlajaxbootstrap-4

Serializing Form Data with Checkbox Array

I am currently utilizing JQuery to submit a form using the form.serialize method. However, within the same form, there is an array of checkboxes that are dynamically created by a PHP function. Here is the structure of the form: <form class="form" id="f ...

javascriptphpjqueryhtmlforms

Cufon: Hovering on links causes them to resize and remain in that new size

I've encountered an issue with text links in a paragraph that are being replaced using Cufon. When I hover over the links, the text inside them expands and remains that way even after moving the cursor away. The color change applied to the hover state ...

javascriptcsshyperlinkcufon

What is the optimal backup plan for selecting rem as the font-size unit in a dynamic layout?

Recently, I started pondering the best fallback option to use when employing rem as the font-size unit. While pixels seem like a suitable choice, it becomes cumbersome to adjust every px-based font-size if you decide to modify the global font-size within a ...

cssfontsresponsive-design

Leveraging ng-repeat in Angular

Recently, I came across a json information on a specific part model and got an idea to showcase it in a long scrolling list of item thumbnails. You can check out an example here: http://ionicframework.com/docs/components/#item-thumbnails However, when I a ...

htmlangularjsangularjs-ng-repeat