Vertical and horizontal alignment do not work on bootstrap 4 with flexbox

Asked

Viewed 483 times

1

I’m doing a bootstrap course 4, the teacher uses and teaches that there is a class flex-items for alignment, to align vertically for example, we could use something like this:

flex-items-md-middle

The problem that doesn’t work with me, at the time of class, bootstrap 4 was still in beta, I don’t know if they could have changed that class. On the bootstrap site I found no reference to her, she underwent changes?

twitter-bootstrap flexbox

1 answer

1


Dude I think you’re messing around, there’s no class flex-items..., Probably what you’re looking for is justify-content-md-center and align-items-md-center. In case the Md is for resolution Média.

HORIZONTALLY

.d-flex{background-color: #999;}
.p{background-color: #f9f}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex justify-content-start">
  <p class="p">ALINHA NA ESQUERDA</p>
</div>----
<div class="d-flex justify-content-end">
  <p class="p">ALINHA NA DIREITA</p>
</div>----
<div class="d-flex justify-content-center">
  <p class="p">ALINHA NO CENTRO</p>
</div>----
<div class="d-flex justify-content-between">
  <p class="p">CRIA ESPAÇOS ENTRE ELEMENTOS</p>
  <p class="p">CRIA ESPAÇOS ENTRE ELEMENTOS</p>
  <p class="p">CRIA ESPAÇOS ENTRE ELEMENTOS</p>
</div>----
<div class="d-flex justify-content-around">
  <p class="p">CRIA ESPAÇOS ENTRE ELEMENTOS</p>
  <p class="p">CRIA ESPAÇOS ENTRE ELEMENTOS</p>
  <p class="p">CRIA ESPAÇOS ENTRE ELEMENTOS</p>
</div>

VERTICALLY

.d-flex{background-color: #999;height:100px;}
.p{background-color: #f9f;margin:0;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="d-flex align-items-start">
    <p class="p">ALINHA NO TOPO</p>
  </div>----
  <div class="d-flex align-items-end">
    <p class="p">ALINHA NO FIM</p>
  </div>----
  <div class="d-flex align-items-center">
    <p class="p">ALINHA NO CENTRO</p>
  </div>----
  <div class="d-flex align-items-baseline">
    <p class="p">ALINHA NA BASE</p>
  </div>----
  <div class="d-flex align-items-stretch">
    <p class="p">ESTICA O CONTEÚDO</p>
  </div>

Look at this link here.

Browser other questions tagged twitter-bootstrap flexbox

You are not signed in. Login or sign up in order to post.