Html - I can't get bootstrap icons to center vertically next to text

LaurenWard
September 22, 2024
83 views
2 votes
3 Answers

I can’t get bootstrap star icons to center next to review text in a website I am designing. I imbedded the svgs in my code. I am using some bootstrap 4 classes here as well for context. Here’s how it looks right now:

Appearance of review star icons and text:

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

I tried using the vertical-align property to no avail. It made no real difference in the stars-container class. Using vertical-align with the stars class (the span enclosing the svgs) made no difference either, so I didn’t even include it:

.stars { vertical-align: center; }

After reading about this problem I tried the mx-auto (in my case, my-auto) bootstrap class suggested by another poster, but it didn’t work for me. Not sure what else to try.

Answers

Wrap the star rating in a native JavaScript Web Component <star-rating
Encapsulating HTML, CSS and JS

With shadowDOM you won’t have to worry about any other CSS in the page.

Then 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>

Outputs:

I simplified that SVG star with: https://yqnn.github.io/svg-path-editor/#

<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>

Use Flex. That’s all you need here. No custom CSS. You only need 3 classes provided by Bootstrap.

Here are 2 snippets with the icon font and with the SVGs. Note that the HTML used around the elements is exactly the same and the display is exactly the same too.

See https://getbootstrap.com/docs/5.3/utilities/flex/

First version with icon font :

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

<div class="d-flex flex-row 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 version with SVG :

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="d-flex flex-row 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>
  <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 class="ms-2">Jul 10, 2019</span>
</div>

Add this CSS:

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

vertical-align takes care of the alignment, but it only works for block and inline-block elements, therefore 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – I can't get bootstrap icons to center vertically next to text

Answers