フリル、ダウン、フリル

利益、ダウンジャケット

m(margin),p(padding)

m-1から5段階
p-1～5段階

l左r右t上b下x左右y上下

w(幅)-25,5075100のうち

を選択

h(高さ)-25,5075100で

を選択

mx-auto左右対称

ex)
<div class="container text-white">
    <div class="bg-danger p-3 w-25 mx-auto">div블록입니다.</div>
    <div class="bg-info p-3 mx-auto w-50">div블록입니다.</div>
    <div class="bg-warning p-3 w-75 mx-auto">div블록입니다.</div>
    <div class="bg-success p-3 w-100">div블록입니다.</div>
    <div class="bg-primary p-3 w-50 mx-auto">div블록입니다.</div>
    <div class="bg-secondary p-3 w-25 mx-auto">div블록입니다.</div>
  </div>

ホーン

.d-flex

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
水平位置揃え
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
垂直位置揃え
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
各項目の垂直位置合わせ

<style>
    .v50 {
      height: 50vh;
    }
  </style>
  
 <div class="container my-5">
    <div class="d-flex v50 align-items-center justify-content-between p-3 bg-secondary text-white">
      <div class="bg-info p-2 align-self-start">Flex Item 1</div>
      <div class="bg-warning p-2 ">Flex Item 2</div>
      <div class="bg-primary p-2 align-self-end">Flex Item 3</div>
    </div>
  </div>