Bulma: Question: How to center form with control inside column

Created on 20 Oct 2017  路  3Comments  路  Source: jgthms/bulma


This is about Bulma | the Docs.


Is it a bug/feature/question or do you need help?

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [0.6.0]


Description

I am trying to center the form with "field has-addons" inside the column but it is aligned left. How to center the form?

Steps to Reproduce

`

<div class="columns is-centered">

    <div class="column is-half" style="border: 1px solid black">

        <form class="searchform" action="" method="post">

            <div class="field has-addons">
                <div class="control">
                    <input class="input" type="text" name="search" value="" placeholder="Search">
                </div>

                <div class="control">
                    <div class="select">
                        <select>
                            // loop from district data
                            <option value="">All</option>
                            <option value="">XXXX</option>
                        </select>
                    </div>
                </div>

                <div class="control">
                    <button class="button is-primary" type="submit" name="button">Search</button>
                </div>
            </div>

        </form>

    </div>

</div>


`

Expected behavior

Form supposed to be centered inside column.

Actual behavior

It is not centered.
Also is there a way to extend the length of input for joined elements like this?

form_centering

Most helpful comment

In the case that your field has addons yo should use the class selector field has-addons has-addons-centered.

All 3 comments

Sorry is-expanded on input solved the problem.

In the case that your field has addons yo should use the class selector field has-addons has-addons-centered.

Gracias it is work...!

Was this page helpful?
0 / 5 - 0 ratings