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

Question

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

Navigation

#1 by (1 votes)

1

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

flex-items-md-middle

The problem with me does not work, at the time of class, bootstrap 4 was still in beta, I do not know if they could have changed this class. In the bootstrap site I did not find any reference about it, did it change?

twitter-bootstrap flexbox

asked by anonymous 10.08.2018 / 11:22

1 answer

Write checkbox value in sql server database How to change state of complex objects in React?

score 1 · Accepted Answer

Dude, I think you're messing up, there's no flex-items ... class, probably what you're looking for is justify-content-md-center and align-items-md-center . In case 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 .