statamic / bootstrap problem with vertical align - php

Question

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>
view all projects <i class="icon icon-chevron-right"></i>
</div>
</div>
</div>
</div>
the code provide this :
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

Answer 1

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>
view all projects <i class="icon icon-chevron-right"></i>
</div>
</div>
</div>