Search code examples
csssemantic-ui

How to center a single colum in semantic-ui grid

I want to center a login form, in a login page. the form be centered on desktop and full width on mobile. I tried this, but it does not work. I have this instead. enter image description here

    <div class="ui middle aligned center aligned grid">
    <div class="column">
        
        <div class="ui error message">
            <p>Your username and password didn't match. Please try again.</p>
        </div>
        
        <form method="post" class="ui large form error">
            <div class="ui stacked segment">
             
                {% for field in form %}
                <div class="field {% if field.field.required %}required{% endif %}">
                    <div class="ui left icon input">
                        <i class="user icon"></i>
                        {{ field }}
                    </div>
                </div>
                {% endfor %}
                <button type="submit" value="Send" class="ui primary button">Log in</button>
            </div>
        </form>
    </div>
</div>
Solution

  • Try setting your column with these classes: "sixteen wide tablet twelve wide computer column"... tablet applies to mobile as well.

            <div class="sixteen wide tablet twelve wide computer column">

            <div class="ui error message">
                <p>Your username and password didn't match. Please try again.</p>
            </div>

            <form method="post" class="ui large form error">
                <div class="ui stacked segment">

                    {% for field in form %}
                    <div class="field {% if field.field.required %}required{% endif %}">
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            {{ field }}
                        </div>
                    </div>
                    {% endfor %}
                    <button type="submit" value="Send" class="ui primary button">Log in</button>
                </div>
            </form>
        </div>
    </div>```