Newbe Dev Stack

Answer : I made it work, maybe my example can help you. View <div class="field"> <label class="label">Hair</label> <div class="control"> <select2 class="is-medium" v-model="post.custom_data.hair" :options="{}"> @foreach (config('post.cat.hair') as $id => $value) <option value="{{ $id }}">{{ __($value) }}</option> @endforeach </select2> </div> </div> SASS .select2-wrapper { .select2-container { .select2-selection { transition: border-color $speed; font-family: $family-sans-serif; height: 2.285em; line-height: 1.5; font-size: 1rem; outline: none !important; display: inline-flex; align-items: center; width: 100%; border-color: $border; ...

Answer : Make the figure tag an inline-block and assign has-text-centered to the parent tag. Advantage is no custom code needed. <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/> <div class='column is-one-quarter'> <div class='card equal-height'> <div class="card-image has-text-centered"> <figure class="image is-64x64 is-inline-block"> <img class="is-rounded" src="https://unsplash.it/64"/> </figure> </div> <div class='card-content'> <!-- other content here --> </div> </div> </div> Change the display property of card-content to flex by using the .is-flex modifier. Now you can use flexbox properties to horizontally center the figure . There is no modifying class for this with Bulma, so you can make your own...

Answer : You also need to include the bulma.min.css file, not just the .map . Edit Per the Bulma docs: If you want to use icons with Bulma, don't forget to include Font Awesome: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> Update 3/19/2019 As @Akshay has pointed out below, the documentation has changed and the proper way to include Font Awesome is now <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>