Search code examples
phplaraveltwitter-bootstrapbootstrap-4statamic

statamic / bootstrap problem with vertical align

im newbie about statamic, im try to solve this code :

<div class="container">
    <div class="intro">
        <div class="row">
            <div class="col-md-12">
                <h2 class="title-uppercase text-white">{{ section_three_title }}</h2>
                <div class="row-project-box row">
                    {{ relate:section_three_categories }}
                    {{ entries }}
                    <div class="col-project-box col-sm-6 col-md-4 col-lg-3">
                        <a href="{{ url }}" class="project-box">
                            <div class="project-box-inner">
                                <h5>{{ title }}</h5>
                            </div>
                        </a>
                    </div>
                    {{ /entries }}
                    {{ /relate:section_three_categories }}
                </div>
                <a href="#" class="h5 link-arrow text-white">view all projects <i class="icon icon-chevron-right"></i></a>
            </div>
        </div>
    </div>
</div>

the code provide this : enter image description here

i want to align these box
direzionale operativo dirigenziale not in horizonatal but in vertical like this:

direzionale
operativo
dirigenziale

i think that is a bootstrap configuration but i dont know about the statamic world anyone can help me ? thanks a lot

Solution

  • The problem here seems that you are using responsive breakpoints on your columns, so if you want to set the boxes one below the other all the times you have to set the .col-project-box always be full-width adding this class col-12 and set the .row-project-box horizontal alignment center adding this class justify-content-center to it.

    <div class="container">
<div class="intro">
    <div class="row">
        <div class="col-md-12">
            <h2 class="title-uppercase text-white">{{ section_three_title }}</h2>
            <div class="row-project-box row justify-content-center">
                {{ relate:section_three_categories }}
                {{ entries }}
                <div class="col-project-box col-12">
                    <a href="{{ url }}" class="project-box">
                        <div class="project-box-inner">
                            <h5>{{ title }}</h5>
                        </div>
                    </a>
                </div>
                {{ /entries }}
                {{ /relate:section_three_categories }}
            </div>
            <a href="#" class="h5 link-arrow text-white">view all projects <i class="icon icon-chevron-right"></i></a>
        </div>
    </div>
</div>