I'm using bootstrap 4 and this css class, to vertically align my items:
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center;
justify-content: flex-start;
}
In my HTML I have the following:
<div class="row vertical-align">
<div class="col-md-3">
<div class="logo">
<img src="assets/img/logo.png" alt="" class="img-responsive">
</div>
</div>
<div class="col-md-6">
<div class="catergorias">
<ul class="list-inline categorias_topo">
<li class="list-inline-item">
<a href="#">Categoria 1</a>
</li>
<li class="list-inline-item">
<a href="#">Categoria 2</a>
</li>
<li class="list-inline-item">
<a href="#">Categoria 3</a>
</li>
<li class="list-inline-item">
<a href="#">Categoria 4</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
BUSCA
</div>
</div>
With this, all this content is aligned to the left.
How can I, for example, align this list (ul > li) on the right?
Nothing is working.
Follow print: link
Follow Fiffle: