Currently in the process of developing a Pomodoro Timer application and utilizing Bulma as my CSS Framework. I am really enjoying working with it thus far, although still getting the hang of Flexbox. I am seeking advice on the best approach for this project - can it be achieved solely using Bulma classes or would custom classes need to be created?
https://i.sstatic.net/ZTw3z.png
Specifically, I am attempting to create "cards" for each task added, but I want them to occupy only half or less of the full screen width. Struggling to figure out how to accomplish this in Bulma, as everything seems to default to full width without the option to center due to lack of hard-coded width. Below is the code snippet for the section containing the task cards.
<div class="section">
<div class="task-container is-center">
<div class="card is-clearfix is-1-touch" style="margin-bottom: 10px" v-for="task in tasks" :key="task.id">
<input type="checkbox" class="checkbox">
<span class="has-text-left">
{{task.desc}}
</span>
<span class="icon is-pulled-right has-text-danger"><i class="far fa-times-circle"></i></span>
<span class="icon is-pulled-right has-text-primary"><i class="far fa-play-circle"></i></span>
</div>
</div>
</div>
Any assistance, recommendations, or guidance would be greatly appreciated!