[Vuejs]-When using Vue.js in existing HTML CSS website, the arrangement of the div is not as intended

by

0👍

✅

I have added col-md-12 class to the second div too and it worked. Doesn’t the parent div’s col-md-12 apply for the child? I don’t know why I should repeat it again.

<div class="col-md-12 d-flex align-items-center">
<div class="col-md-12 tab-content ftco-animate" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-0" role="tabpanel" aria-labelledby="v-pills-0-tab">
<div id="app" class="row">
    <div class="col-md-3" v-for="product in products" :id="product.id">
        <div class="menu-entry">
            <a href="#" class="img" style="background-image: url(images/menu-1.jpg);"></a>
            <div class="text text-center pt-4">
               <h3><a href="#">{{ product.name }}</a></h3>
               <p>{{ product.description }}</p>
               <p class="price"><span style="font-family: 'Courier New', Courier, monospace; font-size: 20px">₹</span><span>{{ product.price }}
                                                        / kg</span></p>
               <p><a href="#" class="btn btn-primary btn-outline-primary">Add to Cart</a></p>
            </div>

        </div>
    </div>
</div>
</div>
</div>

Leave a comment