What steps should be taken to create this specific layout using Vue-Bootstrap?

Currently tackling a web project and aiming to design two rows that resemble the following layout: https://i.sstatic.net/tLv1h.png

Details of the screenshot (such as icons) are not necessary, but rather focusing on the arrangement of aligning two rows beside one element, like shown with the icon followed by the two informational rows to its right.

Utilizing Vue 2 in conjunction with the Vue-Bootstrap plugin for this task. Uncertain if opting for Bootstrap instead of raw CSS is advantageous in this scenario, so any insights are welcomed.

Answer №1

After delving into the world of traditional CSS flex properties and incorporating some Bootstrap classes, I finally cracked the code. It dawned on me that amidst all the Vue-Bootstrap components, I had lost sight of the bigger picture. Below is the row layout I managed to achieve, both visually as shown in the image result and the corresponding code snippet for those who may find it useful:

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

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

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

The process of loading a unique home page based on the screen size of the device

Looking for assistance on dynamically loading different home pages based on screen size. Any suggestions? For instance, if the screen size is less than 960px, I would like to show the default landing page as index1.html and if the screen size is greater t ...

Is there a way to embed HTML code within a JavaScript variable?

Embedding HTML code within Java Flow can be quite interesting For instance: Check out this JSFiddle link And here's how you can incorporate it into your script: widget.value += ""; Generating a Pro Roseic Facebook POP-UP Box through Widg ...

Create a new route on-the-fly within a Nuxt3 middleware

I am working on a Nuxt3 project where I want to dynamically add routes based on an API call to a database. For instance, if a user goes to /my-product-1, the route middleware will check the database and if it finds a matching entry, it will render a produc ...

Showcasing the most recent three Wordpress blog posts in a Bootstrap4 carousel

I'm currently working on a Bootstrap4 carousel that should display the featured image, title, and the beginning of the 3 latest blog posts. Although the desired content is showing up in the carousel, it seems to be stuck on the first post without auto ...

Trouble with CSS and JS tabs not activating when clicked?

I am experiencing issues with a navigation (organized in tabs) that is not functioning on this page, but it works correctly on this page using the same method for inclusion. When clicking "Norway" on the top left, the navigation opens but switching to the ...

"Enhance Your Video Experience with a Custom

Currently, I am working on designing a front-page that features a YouTube video as the background with a fixed transparent navigation. Although I have successfully implemented both elements, I am struggling to make sure the video background starts at the t ...

Automatic button rotation

I managed to set up a button that works on click with a delay, making it semi-automatic. However, I'm struggling with getting it to not pause after just one click. Here's what I have so far: <!DOCTYPE html> <html> <body> &l ...

Exploring Vue's data binding with both familiar and mysterious input values

How can I model an object in Vue that contains both known and unknown values? The quantity is unknown, but the type is known. I need to present user inputs for each type, where the user enters the quantity. How should I approach this? data() { retur ...

Forming triangles with outlines

Recently, I had the challenge of designing speech bubbles and found a clever technique to create the triangular tip at the end using CSS. By setting the element's width and height to 0 and playing around with borders, you can achieve diagonal shapes f ...

What is the best way to place Vue chunk files into the public/js folder using Laravel Mix?

In my Laravel and Vue project, I am utilizing dynamic import function calls in Vue to separate my components into different files. While everything is functioning properly, I have noticed that the Vue chunk files (such as 0.js, 1.js, etc.) are being store ...

The elusive three.module.js file has gone missing, leaving behind a trail of 404 errors

It seems like a simple mistake, but I'm encountering a 404 error for a file that actually exists: http://localhost:8000/Desktop/Skeletor/js/build/three.module.js net::ERR_ABORTED 404 (File not found) The correct path should be http://localhost: ...

Send the Vue component as an argument to the function

Currently, I am in the process of transferring a project to Vue and utilizing Muuri as a layout manager. In my code, I have the following snippet: grid.add(itemElem, { layout: false, active: false }); The variable itemElem used to be an HTML element c ...

What is the maximum width that can be set for an HTML input control

I'm working on a web page with a row that contains three controls. SomeText Input Button It looks something like this <div> SomeText <Input/> <img> </div> The image is currently floating to the right. ...

Utilize HTML to pre-load a font and incorporate it into your CSS styling

It is common knowledge that when we include the following code in our .css file: @font-face { font-family: "Akrobat-Regular"; src: url('/assets/Akrobat-Regular.otf') format("truetype"); } body { color: #1c1c1c ...

Centered CSS navigation bar without any spacing between the buttons

Good evening everyone, I am looking to create a navigation bar that is centered on the screen with no gaps between the buttons. I have tried using 'float:left' to close the gaps, but this aligns the navigation bar to the left. Without 'floa ...

JavaScript does not display checkbox values

I am currently testing whether checkbox values appear on the client side. When I execute the code, the alert is not showing anything. I would greatly appreciate any assistance, thank you. <div> <label name="finishing"class=" ...

Smooth animation is not being achieved with the Jquery dlmenu

I have implemented a multi-level navigation menu using a demo of the jquery dlmenu plugin v1.0.2. Although most of the functions are working smoothly, the CSS3 menu navigation lacks the fluidity of the jQuery left/right sliding effect. Is there a way to ...

Cannot access the get_workbook property of null in Tableau Vuejs when calling getWorkBook()

I have been attempting to implement the getData example from the Tableau JavaScript tutorial for Vue.js, following the guidance provided at the link (https://github.com/tableau/js-api-samples/blob/master/getDataBasic.html). However, I am encountering diffi ...

Developing several sliders and ensuring they operate independently of each other

I am currently in the process of developing multiple sliders for a website that I am building. As I reach the halfway point, I have encountered a problem that has stumped me. With several sliders involved, I have successfully obtained the length or count ...

What is the best way to retrieve the parent element quickly using Jquery?

html: <span class="ui-spinner ui-widget ui-widget-content ui-corner-all"><input class="spinner1 ui-spinner-input" id="q1" name="value" value="1" min="1" aria-valuemin="1" aria-valuenow="2" autocomplete="off" role="spinbutton"><a class="ui ...