My goal is to create a bar with thin bars, but my use of Bootstrap limits my control over sizes.
<template>
<div class="container-fluid mx-auto">
<div class="row">
<div class="square rounded-pill"></div>
<div class="square rounded-pill"></div>
<div class="square rounded-pill"></div>
<div class="square rounded-pill"></div>
</div>
</div>
</template>
<script>
export default {
setup() {},
};
</script>
<style scoped>
.container-fluid {
border: 3px solid black;
width: 100%;
height: 20%;
}
.row {
display: flex;
justify-content: space-evenly;
align-items: center !important;
}
.square {
width: 10vw;
height: 3vh;
background-color: red;
}
</style>
I am facing difficulties in setting the .container-fluid height to 50%, defining the .square width and height in %, and ensuring proper alignment of items within the .row. The justify-content property works for centering horizontally, but align-items: center doesn't align vertically. How can I express sizes in % and center align the items?