Thursday, January 17, 2019

Bootstrap 4 Vertical Center and Horizontal Center

Ref: https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff

  • โค้ดจากอ้างอิงตามนี้เลย
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
  • ส่วนตัวใช้แบบนี้สำหรับจัดกลางทั้ง แนวตั้งและแนวนอน
<style>
.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}
</style> 
<div class="container">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-sm-12 my-auto">
</div>
</div>
</div>

No comments:

Post a Comment

Popular Posts