CODEWITHSUNDEEP
htmlcssvue.jsbootstrap-4
holycamolie
holycamolie

Reputation: 309

How to achieve this style of layout using Vue-Bootstrap?

I am working on a web project and trying to lay out two rows that look like the following: row layout

I don't need the specifics of the screenshot (like the icons), but generally just the layout of having two rows lined up next to one element, like I have there with the icon and then the two informational rows to its right.

I'm working in Vue 2 using the Vue-Bootstrap plugin. I don't know if using Bootstrap for this over raw CSS is shooting myself in the foot on this, so any input would be appreciated.

Upvotes: 0

Views: 94

Answers (1)

holycamolie
holycamolie

Reputation: 309

I figured it out using traditional CSS flex properties mixed with some light Bootstrap classes. I was so caught up in the Vue-Bootstrap components I kind of lost the forest for the trees. Here is the row layout I got both as the image result and the code behind it, in case anyone else needs help:

code result

<template>
<div class="mt-2 ml-3 rating-row">
    <b-icon class="h2" icon="trophy"></b-icon>
    <div class="rating-col ml-4 text-left">
        <div class="star-row">
            <span class="rating-num">3.7</span>
            <span class="ml-1">
                <b-icon class="ml-1" icon="star-fill"></b-icon>
                <b-icon class="ml-1" icon="star-fill"></b-icon>
                <b-icon class="ml-1" icon="star-fill"></b-icon>
                <b-icon class="ml-1" icon="star-half"></b-icon>
            </span>
        </div>
        <span class="rating-label">average rating</span>
    </div>
</div>
</template>

<style scoped>
.rating-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.rating-col {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    line-height: 16px;
}

.star-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.rating-num {
    font-weight: bold;
    font-size: larger;
}

.rating-label {
    font-size: large;
}

</style>

Upvotes: 2

Related Questions