Search code examples
htmlcssresponsive-designflexboxbulma

Centering Cards with Bulma CSS

I'm currently building an application for a Pomodoro Timer, I'm using Bulma as a CSS Framework, and so far I'm loving it, I'm still learning how Flexbox works, I would like to know what would be the best approach to this situation and if it can be done using only Bulma classes or if I would have to create my own.

enter image description here

I'm trying to create "cards" for each task added, but I want them to be just about half or less that the full screen width. I don't understand how to make this happen using Bulma, since everything just takes the full width and I can't just center everything since it doesn't have a hard-coded width. This is my code for the section that contains 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 help, tips, suggestions, etc. Would be greatly appreciated!.

Solution

  • You could use columns classes to achieve what you want

     <div class="task-container columns is-multiline">
        <div class="card column is-half is-offset-one-quarter">
            // statements
        </div>
    </div>

    Here is the link to the official documentation: https://bulma.io/documentation/columns/options/#centering-columns

    You could wrap the card div with a columns container and use the is-half class if you don't want to use the offset class.