I am working on an application screen using Vue.js and facing an issue with the divisions between cells. I want to hide these divisions so that the lines of the items appear continuous.
I attempted to modify the classes of the columns to "col-md" and "col-sd", but unfortunately, it didn't work as expected.
Below is the code snippet from the template section of the application:
<template>
<div class="container">
<h1> Animals </h1>
<br>
<div class="row">
<div class="col-md-6">
<h3>
Registered Animals
<span class="badge badge-info">{{animais.length}}</span>
</h3>
<ul>
<div class="row">
<div class="col">
Name
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
{{animal.nome}}
</li>
</div>
<div class="col">
Age
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
{{animal.idade}}
</li>
</div>
<div class="col">
Breed
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
{{animal.raca}}
</li>
</div>
<div class="col">
Information
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
<i @click="Show" class="fa fa-info-circle" aria-hidden="true"></i>
</li>
</div>
</div>
</ul>
</div>
<div class="col-md-6">
<h3>
h3. Lorem ipsum dolor sit amet.
</h3>
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
</div>
</template>