Bootstrap 4 Utilities

Bootstrap 4 มี utility/helper classes สำหรับให้เราใช้ในการตกแต่งเอลิเมนต์ได้อย่างรวดเร็วโดยไม่ต้องเขียนโค้ด CSS มีอะไรบ้างไปดูกันครับ

Border

ใน Bootstrap 4 การจัดการกับขอบหรือ “Border” สามารถทำได้โดยใช้คลาสที่จัดเตรียมไว้ให้ ซึ่งจะช่วยให้การตกแต่งขอบต่าง ๆ ขององค์ประกอบในเว็บไซต์เป็นเรื่องง่าย โดย Bootstrap 4 มีการจัดการกับขอบอยู่หลายรูปแบบ ดังนี้

คลาสพื้นฐานในการจัดการกับ Border

• border: เพิ่มขอบให้กับองค์ประกอบ (มีขอบสีเทาอ่อนและขนาด 1px)
• border-0: เอาขอบออกจากองค์ประกอบ

ตัวอย่าง

<div class="border">มีขอบ</div>
<div class="border-0">ไม่มีขอบ</div>

ขอบด้านใดด้านหนึ่ง

เราสามารถเพิ่มขอบเฉพาะด้านได้ โดยใช้คลาสที่ระบุด้านที่ต้องการเพิ่มขอบ

• border-top: เพิ่มขอบด้านบน
• border-right: เพิ่มขอบด้านขวา
• border-bottom: เพิ่มขอบด้านล่าง
• border-left: เพิ่มขอบด้านซ้าย
• border-top-0, border-right-0, border-bottom-0, border-left-0: ลบขอบเฉพาะด้านที่ระบุ

ตัวอย่าง

<div class="border-top">มีขอบเฉพาะด้านบน</div>
<div class="border-right">มีขอบเฉพาะด้านขวา</div>
<div class="border-bottom">มีขอบเฉพาะด้านล่าง</div>
<div class="border-left">มีขอบเฉพาะด้านซ้าย</div>

สีของขอบ

Bootstrap 4 ให้เราสามารถปรับสีขอบได้ง่าย ๆ ด้วยการเพิ่มคลาสที่ระบุสีของขอบ

• border-primary
• border-secondary
• border-success
• border-danger
• border-warning
• border-info
• border-light
• border-dark
• border-white

ตัวอย่าง

<div class="border border-primary">ขอบสีฟ้า (primary)</div>
<div class="border border-danger">ขอบสีแดง (danger)</div>
<div class="border border-success">ขอบสีเขียว (success)</div>

ขนาดความหนาของขอบ

เราสามารถปรับความหนาของขอบได้โดยใช้คลาสที่ระบุระดับความหนา

• border-1: ขอบหนา 1px
• border-2: ขอบหนา 2px
• border-3: ขอบหนา 3px
• border-4: ขอบหนา 4px
• border-5: ขอบหนา 5px

ตัวอย่าง

<div class="border border-2">ขอบหนา 2px</div>
<div class="border border-5">ขอบหนา 5px</div>

การทำให้ขอบเป็นวงกลมหรือมน

หากต้องการทำให้ขอบมีลักษณะโค้งมนหรือเป็นวงกลม สามารถใช้คลาส

• rounded: ทำให้ขอบทั้งหมดโค้งมน
• rounded-top: ทำให้เฉพาะขอบด้านบนโค้งมน
• rounded-right: ทำให้เฉพาะขอบด้านขวาโค้งมน
• rounded-bottom: ทำให้เฉพาะขอบด้านล่างโค้งมน
• rounded-left: ทำให้เฉพาะขอบด้านซ้ายโค้งมน
• rounded-circle: ทำให้เป็นวงกลม
• rounded-pill: ทำให้มีลักษณะเหมือนแคปซูล

ตัวอย่าง

<div class="border rounded">ขอบโค้งมน</div>
<div class="border rounded-top">ขอบโค้งมนเฉพาะด้านบน</div>
<div class="border rounded-circle">ขอบวงกลม</div>

การใช้งานเพิ่มเติม

เราสามารถผสมผสานหลายคลาสเข้าด้วยกันเพื่อปรับแต่งขอบให้ตรงกับความต้องการ เช่น การกำหนดสี ขนาดความหนา และขอบโค้งมนไปพร้อมกัน

ตัวอย่างการผสมผสาน

<div class="border border-primary border-5 rounded-circle">ขอบวงกลมสีฟ้าขนาด 5px</div>

Float and Clearfix

ใน Bootstrap 4 มีคอมโพเนนต์สำหรับการจัดการการลอยตัวขององค์ประกอบ (float) และการจัดการเคลียร์พื้นที่สำหรับการลอยตัวขององค์ประกอบ (clearfix) เพื่อช่วยให้การออกแบบหน้าเว็บไซต์ทำได้ง่ายขึ้น โดยมีรูปแบบการใช้งานที่หลากหลายและปรับเปลี่ยนได้ตามความต้องการ ดังนี้

การใช้งาน Float

การจัดการองค์ประกอบให้ลอยตัวทางด้านซ้ายหรือขวาสามารถทำได้โดยใช้คลาส float- ตามด้วยทิศทางที่ต้องการ

• float-left: ทำให้องค์ประกอบลอยไปทางซ้าย
• float-right: ทำให้องค์ประกอบลอยไปทางขวา
• float-none: ยกเลิกการลอยตัวขององค์ประกอบ (ตั้งค่าเริ่มต้น)

ตัวอย่างการใช้งาน Float

<div class="float-left">ลอยไปทางซ้าย</div>
<div class="float-right">ลอยไปทางขวา</div>
<div class="float-none">ไม่มีการลอย</div>

การใช้งาน Float ตามขนาดหน้าจอ

Bootstrap 4 รองรับการจัดการ float ที่แตกต่างกันตามขนาดหน้าจอ โดยใช้การกำหนดคลาสตามขนาดดังนี้

• float-sm-left, float-sm-right, float-sm-none: ใช้สำหรับหน้าจอขนาดเล็กขึ้นไป
• float-md-left, float-md-right, float-md-none: ใช้สำหรับหน้าจอขนาดกลางขึ้นไป
• float-lg-left, float-lg-right, float-lg-none: ใช้สำหรับหน้าจอขนาดใหญ่ขึ้นไป
• float-xl-left, float-xl-right, float-xl-none: ใช้สำหรับหน้าจอขนาดใหญ่มากขึ้นไป

ตัวอย่างการใช้งาน Float ตามขนาดหน้าจอ

<div class="float-sm-left">ลอยทางซ้ายสำหรับหน้าจอขนาดเล็กขึ้นไป</div>
<div class="float-md-right">ลอยทางขวาสำหรับหน้าจอขนาดกลางขึ้นไป</div>

การใช้งาน Clearfix

clearfix เป็นคลาสที่ช่วยให้การเคลียร์พื้นที่ (clearing floats) หรือจัดการองค์ประกอบที่มีการลอยตัวได้ถูกต้อง โดยเมื่อมีการลอยตัวขององค์ประกอบภายในองค์ประกอบใหญ่ องค์ประกอบใหญ่ต้องถูกทำให้ “เคลียร์” เพื่อปรับการจัดวางให้เหมาะสมกับการลอยขององค์ประกอบที่อยู่ภายใน

การใช้งาน clearfix มีการทำงานหลักอยู่ 2 รูปแบบ

• .clearfix: เคลียร์การลอยตัวขององค์ประกอบภายใน
• .clearfix::after: จะถูกเรียกใช้โดยอัตโนมัติในการเคลียร์พื้นที่ที่มีการ float องค์ประกอบ

ตัวอย่างการใช้งาน Clearfix

<div class="clearfix">
    <div class="float-left">ลอยทางซ้าย</div>
    <div class="float-right">ลอยทางขวา</div>
</div>

การใช้งาน Clearfix ตามขนาดหน้าจอ

คลาส clearfix ยังสามารถใช้ร่วมกับขนาดหน้าจอได้เช่นกัน

• .clearfix-sm, .clearfix-md, .clearfix-lg, .clearfix-xl: เคลียร์ float สำหรับขนาดหน้าจอต่าง ๆ

ตัวอย่างการใช้งาน Clearfix ตามขนาดหน้าจอ

<div class="clearfix-sm">
    <div class="float-left">ลอยทางซ้าย</div>
    <div class="float-right">ลอยทางขวา</div>
</div>

การผสมผสานการใช้งาน Float และ Clearfix

เราสามารถผสมผสานการใช้ float และ clearfix ในองค์ประกอบเดียวกันได้ โดยเฉพาะในกรณีที่มีการจัดวางองค์ประกอบหลายตัวที่ลอยตัวและต้องการจัดระเบียบการแสดงผลให้ถูกต้อง

ตัวอย่างการผสมผสาน

<div class="clearfix">
    <div class="float-left">ลอยทางซ้าย</div>
    <div class="float-right">ลอยทางขวา</div>
</div>

Responsive Floats

ใน Bootstrap 4 มีการเพิ่มฟีเจอร์สำหรับการจัดการกับการลอยตัวขององค์ประกอบ (float) อย่างยืดหยุ่นด้วย Responsive Float โดยสามารถกำหนดการลอยตัวขององค์ประกอบตามขนาดหน้าจอได้ ซึ่งช่วยให้การออกแบบเว็บไซต์รองรับอุปกรณ์ที่มีขนาดหน้าจอแตกต่างกันได้อย่างสะดวกมากยิ่งขึ้น

คลาส Responsive Float

Responsive Float ช่วยให้สามารถกำหนดทิศทางการลอยตัว (float) ขององค์ประกอบให้แตกต่างกันในแต่ละขนาดหน้าจอ โดย Bootstrap 4 แบ่งขนาดหน้าจอเป็น 5 ระดับ ได้แก่

• sm: หน้าจอขนาดเล็ก (≥ 576px)
• md: หน้าจอขนาดกลาง (≥ 768px)
• lg: หน้าจอขนาดใหญ่ (≥ 992px)
• xl: หน้าจอขนาดใหญ่มาก (≥ 1200px)

คลาส Responsive Float:

• float-sm-left, float-sm-right, float-sm-none: ใช้สำหรับหน้าจอขนาดเล็กขึ้นไป (≥ 576px)
• float-md-left, float-md-right, float-md-none: ใช้สำหรับหน้าจอขนาดกลางขึ้นไป (≥ 768px)
• float-lg-left, float-lg-right, float-lg-none: ใช้สำหรับหน้าจอขนาดใหญ่ขึ้นไป (≥ 992px)
• float-xl-left, float-xl-right, float-xl-none: ใช้สำหรับหน้าจอขนาดใหญ่มากขึ้นไป (≥ 1200px)

การใช้งาน Responsive Float

เราสามารถกำหนดการลอยตัวให้แตกต่างกันตามขนาดหน้าจอได้ โดยกำหนดคลาสที่สอดคล้องกับขนาดหน้าจอที่ต้องการ

ตัวอย่าง

<div class="float-sm-left float-md-right float-lg-none">
  ลอยทางซ้ายเมื่อหน้าจอขนาดเล็กขึ้นไป, 
  ลอยทางขวาเมื่อหน้าจอขนาดกลางขึ้นไป,
  และไม่มีการลอยตัวเมื่อหน้าจอขนาดใหญ่ขึ้นไป
</div>

การปรับแต่ง Responsive Float หลายขนาดหน้าจอ

ในหลายกรณี เราอาจต้องการให้การจัดเรียงขององค์ประกอบปรับเปลี่ยนไปตามขนาดของหน้าจอ เช่น องค์ประกอบบางตัวควรลอยทางซ้ายในหน้าจอเล็ก และลอยทางขวาในหน้าจอที่ใหญ่กว่า การจัดการนี้ทำได้ง่ายมากด้วย Responsive Float

ตัวอย่าง

<div class="float-sm-left float-md-right">
  ลอยทางซ้ายเมื่ออยู่บนหน้าจอขนาดเล็ก (≥ 576px),
  และลอยทางขวาเมื่ออยู่บนหน้าจอขนาดกลาง (≥ 768px)
</div>

การใช้งานใน Layouts ที่ซับซ้อน

Responsive Float เป็นประโยชน์มากเมื่อเราสร้างเลย์เอาท์ที่ต้องการการเปลี่ยนแปลงการจัดเรียงขององค์ประกอบตามขนาดหน้าจอ โดยเฉพาะในกรณีที่ต้องการจัดวางคอนเทนต์หรือรูปภาพให้ปรับตำแหน่งอัตโนมัติ เช่น การวางภาพให้ลอยทางซ้ายในมือถือและลอยทางขวาในเดสก์ท็อป

ตัวอย่าง Layouts ที่ซับซ้อน

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 float-sm-left float-md-right">
      <img src="image.jpg" alt="Responsive Image" class="img-fluid">
    </div>
    <div class="col-12 col-md-6">
      <p>เนื้อหาข้อความที่จัดวางตามขนาดหน้าจอ</p>
    </div>
  </div>
</div>

• บนหน้าจอขนาดเล็ก (มือถือ) รูปภาพจะลอยทางซ้าย
• บนหน้าจอขนาดกลางขึ้นไป (แท็บเล็ต/เดสก์ท็อป) รูปภาพจะลอยไปทางขวา

การยกเลิกการลอยตัว (Clear Float) ใน Responsive

หากต้องการยกเลิกการลอยตัวขององค์ประกอบที่เคยตั้งค่าไว้ตามขนาดหน้าจอ สามารถใช้ float-none ร่วมกับระดับขนาดหน้าจอที่ต้องการได้

ตัวอย่าง

<div class="float-lg-left float-xl-none">
  ลอยทางซ้ายเมื่ออยู่บนหน้าจอขนาดใหญ่ (≥ 992px),
  และยกเลิกการลอยตัวเมื่ออยู่บนหน้าจอขนาดใหญ่มาก (≥ 1200px)
</div>

Center Align

ใน Bootstrap 4 มีหลายวิธีในการจัดกึ่งกลางเนื้อหา (Center Align) ทั้งในแนวตั้งและแนวนอน โดยสามารถใช้คอมโพเนนต์และคลาสต่าง ๆ เพื่อจัดการตำแหน่งของข้อความ องค์ประกอบ หรือคอนเทนต์ในรูปแบบต่าง ๆ ให้จัดอยู่ตรงกลาง ทั้งในกรณีของ ข้อความ (text), บล็อก (block), หรือ Flexbox สำหรับการจัดการที่ซับซ้อนขึ้น

การจัดกึ่งกลางข้อความ (Text Centering)

Bootstrap 4 มีคลาส text-center สำหรับจัดข้อความให้อยู่ตรงกลางในแนวนอน

ตัวอย่างการใช้งาน

<p class="text-center">ข้อความนี้อยู่ตรงกลางแนวนอน</p>

หากต้องการจัดกึ่งกลางตามขนาดหน้าจอ สามารถใช้คลาสที่มีการกำหนดขนาดหน้าจอได้ เช่น:

• text-sm-center: จัดข้อความให้อยู่ตรงกลางเมื่ออยู่ในหน้าจอขนาดเล็กขึ้นไป (≥ 576px)
• text-md-center: จัดข้อความให้อยู่ตรงกลางเมื่ออยู่ในหน้าจอขนาดกลางขึ้นไป (≥ 768px)
• text-lg-center: จัดข้อความให้อยู่ตรงกลางเมื่ออยู่ในหน้าจอขนาดใหญ่ขึ้นไป (≥ 992px)
• text-xl-center: จัดข้อความให้อยู่ตรงกลางเมื่ออยู่ในหน้าจอขนาดใหญ่มากขึ้นไป (≥ 1200px)

ตัวอย่าง

<p class="text-md-center">ข้อความนี้จะอยู่ตรงกลางเฉพาะหน้าจอขนาดกลางขึ้นไป</p>

การจัดกึ่งกลางบล็อกหรือองค์ประกอบ (Block Level Centering)

หากต้องการจัดบล็อกหรือองค์ประกอบอื่น ๆ ให้อยู่ตรงกลาง เช่น ปุ่มหรือรูปภาพ สามารถใช้คลาส mx-auto (ย่อมาจาก margin-left และ margin-right เป็น auto) ร่วมกับ d-block เพื่อทำให้บล็อกจัดกึ่งกลางในแนวนอน

ตัวอย่างการใช้งาน

<button class="btn btn-primary d-block mx-auto">ปุ่มอยู่ตรงกลาง</button>

หากต้องการจัดองค์ประกอบให้จัดกึ่งกลางตามขนาดหน้าจอ สามารถปรับแต่ง mx-auto ร่วมกับขนาดหน้าจอที่ต้องการ

ตัวอย่าง

<img src="image.jpg" class="d-block mx-auto" alt="Image">

การจัดกึ่งกลางด้วย Flexbox

Bootstrap 4 ใช้ระบบ Flexbox ที่ช่วยให้การจัดวางองค์ประกอบเป็นไปได้ง่าย โดยเฉพาะการจัดกึ่งกลางทั้งในแนวตั้งและแนวนอน สามารถใช้คลาส d-flex ร่วมกับคลาสสำหรับจัดกึ่งกลางที่เหมาะสมได้

ตัวอย่างการจัดกึ่งกลางในแนวนอนด้วย Flexbox

<div class="d-flex justify-content-center">
  <div>องค์ประกอบนี้อยู่ตรงกลางแนวนอน</div>
</div>

• justify-content-center: จัดกึ่งกลางในแนวนอน

ตัวอย่างการจัดกึ่งกลางในแนวตั้งด้วย Flexbox

<div class="d-flex align-items-center" style="height: 200px;">
  <div>องค์ประกอบนี้อยู่ตรงกลางแนวตั้ง</div>
</div>

• align-items-center: จัดกึ่งกลางในแนวตั้ง

การจัดกึ่งกลางทั้งแนวตั้งและแนวนอน

<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
  <div>องค์ประกอบนี้อยู่ตรงกลางทั้งแนวตั้งและแนวนอน</div>
</div>

การจัดกึ่งกลางในกริด (Grid Centering)

การใช้งาน Grid System ใน Bootstrap 4 สามารถจัดกึ่งกลางคอลัมน์ได้โดยใช้คลาส offset ซึ่งจะช่วยเว้นระยะพื้นที่ว่างด้านข้าง เพื่อให้องค์ประกอบจัดกึ่งกลางในคอลัมน์

ตัวอย่าง

<div class="row">
  <div class="col-6 offset-3">คอลัมน์นี้จัดอยู่ตรงกลาง</div>
</div>

ในตัวอย่างนี้ คอลัมน์มีขนาด 6 ช่อง (จาก 12 ช่อง) และใช้ offset-3 เพื่อเว้นระยะข้างซ้าย 3 ช่อง ทำให้คอลัมน์อยู่ตรงกลาง

การจัดกึ่งกลางในแนวตั้งด้วย Utilities Class

นอกจากการใช้ Flexbox เราสามารถจัดกึ่งกลางในแนวตั้งได้ด้วยการกำหนด margin แบบอัตโนมัติ

ตัวอย่างการจัดกึ่งกลางในแนวตั้งด้วย my-auto

<div class="d-flex align-items-center" style="height: 300px;">
  <div class="my-auto">องค์ประกอบนี้จัดกึ่งกลางในแนวตั้ง</div>
</div>

Width

ใน Bootstrap 4 มีคลาสสำเร็จรูปสำหรับกำหนดความกว้างให้กับองค์ประกอบหรือเอลิเมนต์ต่าง ๆ ด้วยคลาส w-* ซึ่งช่วยให้สามารถกำหนดความกว้างเป็นเปอร์เซ็นต์ของขนาดคอนเทนเนอร์ที่บรรจุอยู่ได้อย่างง่ายดาย คลาสเหล่านี้มีหลายขนาด ตั้งแต่ 1% ไปจนถึง 100% และสามารถปรับใช้ได้ในหลายกรณี

คลาสกำหนดความกว้าง (w-*)

คลาส w-* ใช้กำหนดความกว้างขององค์ประกอบในรูปแบบเปอร์เซ็นต์ โดยแทนที่ * ด้วยตัวเลขซึ่งแสดงถึงเปอร์เซ็นต์ของความกว้างที่ต้องการ ตัวอย่างเช่น w-25 หมายถึง 25% ของขนาดคอนเทนเนอร์ที่บรรจุองค์ประกอบนั้น ๆ

รายการคลาสที่ใช้กำหนดความกว้าง:

• w-25: ความกว้าง 25%
• w-50: ความกว้าง 50%
• w-75: ความกว้าง 75%
• w-100: ความกว้าง 100%
• w-auto: ความกว้างอัตโนมัติตามขนาดของเนื้อหาภายใน

ตัวอย่างการใช้งาน w-*

กำหนดความกว้าง 50%

<div class="w-50 bg-primary text-white">องค์ประกอบนี้มีความกว้าง 50%</div>

ในตัวอย่างนี้ องค์ประกอบมีความกว้าง 50% ของคอนเทนเนอร์ที่อยู่ในระดับสูงกว่า โดยสีพื้นหลังถูกตั้งค่าเป็น bg-primary เพื่อให้มองเห็นชัดเจน

กำหนดความกว้าง 75%

<div class="w-75 bg-success text-white">องค์ประกอบนี้มีความกว้าง 75%</div>

องค์ประกอบนี้มีความกว้าง 75% ของคอนเทนเนอร์ด้านนอก

กำหนดความกว้าง 100%

<div class="w-100 bg-danger text-white">องค์ประกอบนี้มีความกว้างเต็ม 100%</div>

องค์ประกอบนี้จะยืดเต็มความกว้างของคอนเทนเนอร์ (100%)

กำหนดความกว้างเป็นอัตโนมัติ

<div class="w-auto bg-info text-white">องค์ประกอบนี้มีความกว้างตามเนื้อหาภายใน</div>

ในตัวอย่างนี้ ความกว้างขององค์ประกอบจะปรับตามเนื้อหาภายในโดยอัตโนมัติ

การประยุกต์ใช้งาน w-* ใน Layout

จัดการเลย์เอาท์ด้วยความกว้างที่แตกต่างกัน

<div class="container">
  <div class="row">
    <div class="col w-25 bg-primary text-white">25%</div>
    <div class="col w-50 bg-success text-white">50%</div>
    <div class="col w-75 bg-danger text-white">75%</div>
  </div>
</div>

ในตัวอย่างนี้ คอลัมน์จะถูกจัดให้อยู่ในเลย์เอาท์แบบกริด โดยแต่ละคอลัมน์จะมีความกว้างที่แตกต่างกันตามคลาสที่กำหนด

การใช้งาน w-* ร่วมกับองค์ประกอบที่มีเนื้อหาแบบฟอร์ม

ตัวอย่างการกำหนดขนาดความกว้างของปุ่มหรือฟิลด์ฟอร์ม

<form>
  <input type="text" class="form-control w-50" placeholder="ช่องนี้มีความกว้าง 50%">
  <button type="submit" class="btn btn-primary w-100 mt-2">ปุ่มนี้มีความกว้างเต็ม 100%</button>
</form>

ในตัวอย่างนี้ ฟิลด์ฟอร์มจะมีความกว้าง 50% ของคอนเทนเนอร์ ในขณะที่ปุ่มจะมีความกว้างเต็ม 100%

การประยุกต์ใช้ใน Responsive Design

การใช้งานคลาส w-* สามารถประยุกต์ใช้ร่วมกับการออกแบบเว็บไซต์แบบ Responsive โดยใช้คลาสที่สัมพันธ์กับขนาดหน้าจอ เช่น w-sm-*, w-md-*, w-lg-*, และ w-xl-* เพื่อปรับความกว้างตามขนาดหน้าจอที่แตกต่างกัน

ตัวอย่างการกำหนดความกว้างตามขนาดหน้าจอ

<div class="w-100 w-md-50 w-lg-25 bg-warning text-white">
  องค์ประกอบนี้มีความกว้าง 100% บนหน้าจอมือถือ, 50% บนหน้าจอขนาดกลาง และ 25% บนหน้าจอขนาดใหญ่
</div>

• บนหน้าจอขนาดเล็ก (< 768px): องค์ประกอบนี้จะมีความกว้าง 100%
• บนหน้าจอขนาดกลาง (≥ 768px): องค์ประกอบนี้จะมีความกว้าง 50%
• บนหน้าจอขนาดใหญ่ (≥ 992px): องค์ประกอบนี้จะมีความกว้าง 25%

การผสมผสาน w-* กับ Flexbox

เราสามารถใช้คลาส w-* ร่วมกับระบบ Flexbox เพื่อจัดการเลย์เอาท์ที่ซับซ้อนได้ เช่น การกำหนดขนาดของคอลัมน์ในระบบ Flexbox

ตัวอย่าง

<div class="d-flex">
  <div class="w-50 p-3 bg-primary text-white">คอลัมน์ที่ 1 (50%)</div>
  <div class="w-25 p-3 bg-success text-white">คอลัมน์ที่ 2 (25%)</div>
  <div class="w-25 p-3 bg-danger text-white">คอลัมน์ที่ 3 (25%)</div>
</div>

ในตัวอย่างนี้ คอลัมน์ทั้งสามจะถูกจัดให้อยู่ในบรรทัดเดียวกัน โดยคอลัมน์แรกมีความกว้าง 50% และคอลัมน์ที่สองและสามมีความกว้าง 25% ต่อคอลัมน์

Height

ใน Bootstrap 4 นอกจากจะสามารถกำหนดความกว้างของเอลิเมนต์ด้วยคลาส w-* แล้ว ยังสามารถกำหนด ความสูง ของเอลิเมนต์ได้ด้วยคลาส h-* ซึ่งจะช่วยกำหนดความสูงในรูปแบบต่าง ๆ ได้อย่างง่ายดาย รวมถึงการปรับขนาดความสูงของเอลิเมนต์ในแบบ Responsive ตามขนาดหน้าจอ

คลาสกำหนดความสูง (h-*)

คลาส h-* ใช้สำหรับกำหนดความสูงขององค์ประกอบในรูปแบบเปอร์เซ็นต์ของขนาดคอนเทนเนอร์ หรือกำหนดความสูงเป็นขนาดที่แน่นอน สามารถใช้สำหรับการกำหนดความสูงในกรณีต่าง ๆ ได้ดังนี้:

รายการคลาสที่ใช้กำหนดความสูง:

• h-25: ความสูง 25%
• h-50: ความสูง 50%
• h-75: ความสูง 75%
• h-100: ความสูง 100%
• h-auto: ความสูงอัตโนมัติตามขนาดของเนื้อหาภายใน

ตัวอย่างการใช้งาน h-*

กำหนดความสูง 50%

<div class="h-50 bg-primary text-white">องค์ประกอบนี้มีความสูง 50%</div>

ในตัวอย่างนี้ องค์ประกอบจะมีความสูง 50% ของคอนเทนเนอร์ที่อยู่เหนือกว่า โดยสีพื้นหลังถูกตั้งค่าเป็น bg-primary เพื่อให้มองเห็นได้ชัดเจน

กำหนดความสูง 75%

<div class="h-75 bg-success text-white">องค์ประกอบนี้มีความสูง 75%</div>

องค์ประกอบนี้จะมีความสูง 75% ของคอนเทนเนอร์ด้านนอก

กำหนดความสูง 100%

<div class="h-100 bg-danger text-white">องค์ประกอบนี้มีความสูงเต็ม 100%</div>

องค์ประกอบนี้จะยืดความสูงเต็ม 100% ของคอนเทนเนอร์ที่ครอบอยู่

กำหนดความสูงเป็นอัตโนมัติ

<div class="h-auto bg-info text-white">องค์ประกอบนี้มีความสูงตามเนื้อหาภายใน</div>

ความสูงขององค์ประกอบนี้จะปรับตามเนื้อหาภายในโดยอัตโนมัติ

การใช้งาน h-* ใน Layout

การกำหนดความสูงให้กับองค์ประกอบต่าง ๆ สามารถใช้ในหลายสถานการณ์ เช่นการกำหนดขนาดของแถบหัวเรื่อง, แบนเนอร์ หรือการกำหนดขนาดของบล็อกในเลย์เอาท์

ตัวอย่าง

<div class="container">
  <div class="row">
    <div class="col bg-primary text-white h-25">ความสูง 25%</div>
    <div class="col bg-success text-white h-50">ความสูง 50%</div>
    <div class="col bg-danger text-white h-75">ความสูง 75%</div>
  </div>
</div>

ในตัวอย่างนี้ คอลัมน์จะมีความสูงตามเปอร์เซ็นต์ที่ระบุ (25%, 50%, 75%) ตามที่กำหนดไว้ในคลาส h-*

การใช้งานในแบบ Responsive

นอกจากนี้ Bootstrap 4 ยังรองรับการกำหนดความสูงตามขนาดหน้าจอที่แตกต่างกัน เช่นเดียวกับการกำหนดความกว้าง สามารถใช้คลาส h-sm-*, h-md-*, h-lg-*, และ h-xl-* เพื่อปรับขนาดตามหน้าจอที่ต่างกัน

ตัวอย่าง

<div class="h-100 h-md-50 h-lg-25 bg-warning text-white">
  องค์ประกอบนี้มีความสูง 100% บนหน้าจอขนาดเล็ก, 50% บนหน้าจอขนาดกลาง, และ 25% บนหน้าจอขนาดใหญ่
</div>

• บนหน้าจอขนาดเล็ก (< 768px): องค์ประกอบนี้จะมีความสูง 100%
• บนหน้าจอขนาดกลาง (≥ 768px): องค์ประกอบนี้จะมีความสูง 50%
• บนหน้าจอขนาดใหญ่ (≥ 992px): องค์ประกอบนี้จะมีความสูง 25%

การใช้ Flexbox ร่วมกับ h-*

การใช้คลาส h-* ร่วมกับ Flexbox สามารถจัดการเลย์เอาท์ให้ซับซ้อนขึ้นได้ โดยการจัดการองค์ประกอบให้อยู่ตรงกลางในแนวตั้งหรือการกำหนดความสูงให้มีความยืดหยุ่น

ตัวอย่างการใช้งาน Flexbox

<div class="d-flex align-items-center h-100 bg-info text-white" style="height: 300px;">
  <div class="w-100 text-center">เนื้อหานี้อยู่ตรงกลางในแนวตั้งและแนวนอน</div>
</div>

• h-100: กำหนดให้องค์ประกอบยืดเต็มความสูงของคอนเทนเนอร์
• d-flex align-items-center: ใช้ Flexbox เพื่อจัดองค์ประกอบให้กึ่งกลางในแนวตั้ง

การประยุกต์ใช้ในกรณีต่าง ๆ

กำหนดความสูงให้รูปภาพ

<img src="image.jpg" class="h-50" alt="รูปภาพที่มีความสูง 50%">

ในตัวอย่างนี้ รูปภาพจะมีความสูง 50% ของคอนเทนเนอร์ที่ครอบรูปภาพไว้

กำหนดความสูงให้ปุ่มหรือฟิลด์ฟอร์ม

<form>
  <input type="text" class="form-control h-75" placeholder="ฟิลด์นี้มีความสูง 75%">
  <button type="submit" class="btn btn-primary h-50 mt-2">ปุ่มนี้มีความสูง 50%</button>
</form>

ในตัวอย่างนี้ ฟิลด์และปุ่มจะมีความสูงที่กำหนดตามคลาส h-* ที่ระบุไว้

Spacing

ใน Bootstrap 4 มี utility classes ที่ใช้สำหรับการกำหนด ระยะห่าง (Spacing) เพื่อจัดการระยะห่างภายในและภายนอกขององค์ประกอบ ซึ่งประกอบด้วยการกำหนดระยะห่างของ padding และ margin ผ่านคลาสสำเร็จรูป โดยใช้ระบบขนาดที่เป็นสเกลจาก 0 ถึง 5 ทำให้สามารถจัดการระยะห่างได้อย่างง่ายดายและมีประสิทธิภาพ

รูปแบบการใช้งานคลาส Spacing ใน Bootstrap 4

โครงสร้างการใช้งานคลาส Spacing

การใช้งานคลาส Spacing จะมีโครงสร้างดังนี้:

• m สำหรับกำหนด margin (ระยะห่างภายนอก)
• p สำหรับกำหนด padding (ระยะห่างภายใน)

นอกจากนี้ยังสามารถระบุด้านที่ต้องการกำหนดระยะห่างได้:

• t (top) สำหรับด้านบน
• b (bottom) สำหรับด้านล่าง
• l (left) สำหรับด้านซ้าย
• r (right) สำหรับด้านขวา
• x สำหรับแนวนอน (ซ้ายและขวา)
• y สำหรับแนวตั้ง (บนและล่าง)

ค่าระยะห่างที่ใช้จะอยู่ในช่วง 0 ถึง 5 หรือใช้คำว่า auto สำหรับการปรับอัตโนมัติ:

• 0 หมายถึง 0px
• 1 หมายถึง 0.25rem (4px)
• 2 หมายถึง 0.5rem (8px)
• 3 หมายถึง 1rem (16px)
• 4 หมายถึง 1.5rem (24px)
• 5 หมายถึง 3rem (48px)
• auto หมายถึงการกำหนดระยะห่างอัตโนมัติ

ตัวอย่างการใช้งานคลาส Spacing

กำหนด Margin สำหรับทุกด้าน

<div class="m-3 bg-primary text-white">ระยะห่างภายนอกทุกด้าน 1rem (16px)</div>

องค์ประกอบนี้จะมี margin 16px ทุกด้าน

กำหนด Padding ด้านบน

<div class="pt-4 bg-success text-white">ระยะห่างภายในด้านบน 1.5rem (24px)</div>

องค์ประกอบนี้จะมี padding-top เท่ากับ 24px

กำหนด Margin แนวนอน (ซ้ายและขวา)

<div class="mx-5 bg-danger text-white">ระยะห่างภายนอกแนวนอน 3rem (48px)</div>

ในตัวอย่างนี้จะมี margin ซ้ายและขวา 48px

กำหนด Padding แนวตั้ง (บนและล่าง)

<div class="py-2 bg-info text-white">ระยะห่างภายในแนวตั้ง 0.5rem (8px)</div>

องค์ประกอบนี้จะมี padding ด้านบนและล่าง 8px

กำหนด Margin อัตโนมัติ

<div class="ml-auto bg-warning text-white" style="width: 200px;">ระยะห่างภายนอกด้านซ้ายเป็นอัตโนมัติ</div>

ในตัวอย่างนี้ องค์ประกอบจะถูกดันไปทางขวาสุดเนื่องจากใช้ margin-left: auto

การใช้งานร่วมกับ Breakpoints สำหรับ Responsive

Bootstrap 4 ยังรองรับการกำหนดระยะห่างตามขนาดหน้าจอที่แตกต่างกัน โดยใช้ Breakpoints เช่น sm, md, lg, และ xl

ตัวอย่างการกำหนด Margin ตามขนาดหน้าจอ

<div class="m-3 m-md-5 bg-secondary text-white">ระยะห่างภายนอก 1rem บนหน้าจอเล็ก และ 3rem บนหน้าจอกลางขึ้นไป</div>

• บนหน้าจอเล็ก (< 768px): มี margin เท่ากับ 1rem
• บนหน้าจอขนาดกลางขึ้นไป (≥ 768px): มี margin เท่ากับ 3rem

ตัวอย่างการกำหนด Padding ตามขนาดหน้าจอ

<div class="p-2 p-lg-4 bg-dark text-white">ระยะห่างภายใน 0.5rem บนหน้าจอเล็ก และ 1.5rem บนหน้าจอใหญ่ขึ้นไป</div>

• บนหน้าจอเล็ก (< 992px): มี padding เท่ากับ 0.5rem
• บนหน้าจอขนาดใหญ่ (≥ 992px): มี padding เท่ากับ 1.5rem

การกำหนด Spacing สำหรับเฉพาะทิศทาง

การกำหนด margin หรือ padding สามารถทำได้เฉพาะทิศทางใดทิศทางหนึ่ง เช่น ด้านบน, ด้านล่าง, แนวตั้ง หรือแนวนอน เพื่อให้ปรับระยะห่างเฉพาะจุดที่ต้องการ

ตัวอย่างการกำหนด Margin ด้านล่าง

<div class="mb-4 bg-primary text-white">ระยะห่างภายนอกด้านล่าง 1.5rem (24px)</div>

องค์ประกอบนี้จะมี margin-bottom 24px

ตัวอย่างการกำหนด Padding ด้านขวา

<div class="pr-2 bg-success text-white">ระยะห่างภายในด้านขวา 0.5rem (8px)</div>

องค์ประกอบนี้จะมี padding-right 8px

ตัวอย่างการใช้งานใน Layout

การกำหนดระยะห่างในเลย์เอาท์ช่วยจัดการช่องว่างระหว่างองค์ประกอบให้เหมาะสมและดูเป็นระเบียบ เช่น การเพิ่มระยะห่างระหว่างคอลัมน์ในระบบกริด หรือการปรับช่องว่างระหว่างการ์ดในเลย์เอาท์

<div class="container">
  <div class="row">
    <div class="col-md-4 mb-4">
      <div class="card">
        <div class="card-body">การ์ดที่ 1</div>
      </div>
    </div>
    <div class="col-md-4 mb-4">
      <div class="card">
        <div class="card-body">การ์ดที่ 2</div>
      </div>
    </div>
    <div class="col-md-4 mb-4">
      <div class="card">
        <div class="card-body">การ์ดที่ 3</div>
      </div>
    </div>
  </div>
</div>

ในตัวอย่างนี้ คอลัมน์แต่ละคอลัมน์มี margin-bottom เท่ากับ 1.5rem (24px) ซึ่งเพิ่มช่องว่างระหว่างการ์ดแต่ละใบ

การใช้งาน Spacing Utility ใน Flexbox

เมื่อใช้ Flexbox คลาส m-auto สามารถช่วยจัดการการจัดวางองค์ประกอบให้อยู่กึ่งกลางทั้งในแนวนอนและแนวตั้งได้

ตัวอย่างการใช้ Flexbox

<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
  <div class="m-auto bg-danger text-white">อยู่ตรงกลาง</div>
</div>

ในตัวอย่างนี้ m-auto ถูกใช้เพื่อให้บล็อกอยู่ตรงกลางทั้งแนวตั้งและแนวนอนในคอนเทนเนอร์ที่ใช้ Flexbox

Shadows

ใน Bootstrap 4 เราสามารถกำหนดเงาให้กับองค์ประกอบ (elements) ด้วยคลาส shadow-* ซึ่งเป็น utility class ที่ช่วยให้เราเพิ่มเอฟเฟกต์เงาให้กับองค์ประกอบได้อย่างง่ายดายและมีหลายระดับ ตั้งแต่เงาเบาๆ จนถึงเงาเข้ม นอกจากนี้ยังมีตัวเลือกในการลบเงาออกหากต้องการ

คลาสเงา (shadow-*)

คลาสเงาใน Bootstrap 4 มีให้เลือกใช้งานหลายรูปแบบ ได้แก่:

• shadow-none: ไม่มีเงา
• shadow-sm: เงาขนาดเล็ก
• shadow: เงาปกติ
• shadow-lg: เงาขนาดใหญ่

ตัวอย่างการใช้งานคลาส shadow-*

ไม่มีเงา (shadow-none)

<div class="shadow-none p-3 mb-5 bg-light rounded">ไม่มีเงา</div>

องค์ประกอบนี้จะไม่มีเงาใดๆ โดยใช้คลาส shadow-none

เงาขนาดเล็ก (shadow-sm)

<div class="shadow-sm p-3 mb-5 bg-white rounded">เงาขนาดเล็ก</div>

องค์ประกอบนี้จะมีเงาเบาๆ หรือเงาขนาดเล็ก (shadow-sm) เหมาะสำหรับใช้ในกรณีที่ต้องการเงาที่ไม่เด่นชัด

เงาปกติ (shadow)

<div class="shadow p-3 mb-5 bg-white rounded">เงาปกติ</div>

องค์ประกอบนี้จะมีเงาปกติ (shadow) ซึ่งเหมาะสำหรับการเพิ่มความเด่นชัดให้กับองค์ประกอบ โดยไม่ทำให้ดูหนักเกินไป

เงาขนาดใหญ่ (shadow-lg)

<div class="shadow-lg p-3 mb-5 bg-white rounded">เงาขนาดใหญ่</div>

องค์ประกอบนี้จะมีเงาขนาดใหญ่ (shadow-lg) ซึ่งจะทำให้ดูมีมิติมากขึ้น เหมาะสำหรับกรณีที่ต้องการเน้นองค์ประกอบให้ดูเด่นมากขึ้น

การปรับใช้ใน Layout

เงาสามารถเพิ่มลูกเล่นให้กับส่วนต่างๆ ของหน้าเว็บได้ เช่น การ์ด, ปุ่ม, หรือคอนเทนเนอร์

ตัวอย่างการใช้กับการ์ด

<div class="card shadow-lg">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">การ์ดที่มีเงาขนาดใหญ่</h5>
    <p class="card-text">เนื้อหาของการ์ดที่ใช้เงาเพื่อเพิ่มความโดดเด่น</p>
  </div>
</div>

การใช้เงาขนาดใหญ่ (shadow-lg) บนการ์ดในตัวอย่างนี้ ช่วยให้การ์ดดูโดดเด่นและมีมิติมากขึ้น

ตัวอย่างการใช้กับปุ่ม

<button class="btn btn-primary shadow-sm">ปุ่มที่มีเงาขนาดเล็ก</button>

ปุ่มนี้จะมีเงาเล็กๆ (shadow-sm) เพื่อเพิ่มความลึกให้กับปุ่มโดยไม่ทำให้ปุ่มดูเด่นเกินไป

เงาในแบบ Responsive

การปรับเงาสำหรับองค์ประกอบในแบบ Responsive ไม่ได้เป็นฟีเจอร์ที่มีในตัวของ Bootstrap 4 โดยตรง แต่สามารถใช้ประยุกต์ร่วมกับ Breakpoints เพื่อเพิ่มหรือลดเงาตามขนาดหน้าจอที่แตกต่างกันได้

ตัวอย่างการใช้งานเงาแบบ Responsive

<div class="shadow-sm shadow-md-lg p-3 mb-5 bg-white rounded">เงาขนาดเล็กบนหน้าจอเล็ก และขนาดใหญ่บนหน้าจอใหญ่</div>

• บนหน้าจอเล็ก (< 992px): จะใช้เงาขนาดเล็ก (shadow-sm)
• บนหน้าจอขนาดใหญ่ (≥ 992px): จะใช้เงาขนาดใหญ่ (shadow-lg)

การประยุกต์ใช้เงาในกรณีต่างๆ

การใช้เงากับกล่องข้อความ (Alert)

<div class="alert alert-success shadow-lg" role="alert">
  กล่องข้อความนี้มีเงาขนาดใหญ่
</div>

การเพิ่มเงาให้กับกล่องข้อความ (alert) ทำให้ดูเด่นและน่าสนใจมากขึ้น

การใช้เงากับคอนเทนเนอร์

<div class="container shadow p-5 bg-light rounded">
  <h1>คอนเทนเนอร์ที่มีเงาปกติ</h1>
  <p>การเพิ่มเงาให้กับคอนเทนเนอร์ทำให้เนื้อหาดูมีมิติมากขึ้น</p>
</div>

การเพิ่มเงาให้กับคอนเทนเนอร์ทำให้เนื้อหาภายในดูแยกออกจากพื้นหลังและมีความเป็นมืออาชีพมากขึ้น

Align

เราสามารถจัดเรียงตำแหน่งขององค์ประกอบ (elements) โดยใช้คลาส align-* ซึ่งเป็นคลาสที่ใช้จัดการการจัดตำแหน่งขององค์ประกอบทั้งในแนวนอนและแนวตั้ง โดยคลาสเหล่านี้ทำงานร่วมกับ Flexbox และ Grid system เพื่อจัดการการจัดวางองค์ประกอบได้ง่ายและสะดวก

คลาสการจัดตำแหน่ง (align-*)

คลาสเหล่านี้ใช้เพื่อจัดตำแหน่งทั้งในระดับของ Flexbox และในระบบกริด มีหลายรูปแบบดังนี้

• align-baseline: จัดตำแหน่งองค์ประกอบตามเส้นฐานของข้อความ
• align-top: จัดตำแหน่งองค์ประกอบให้อยู่บนสุด
• align-middle: จัดตำแหน่งองค์ประกอบให้อยู่กึ่งกลางในแนวตั้ง
• align-bottom: จัดตำแหน่งองค์ประกอบให้อยู่ล่างสุด
• align-text-top: จัดตำแหน่งองค์ประกอบตามตำแหน่งบนของข้อความ
• align-text-bottom: จัดตำแหน่งองค์ประกอบตามตำแหน่งล่างของข้อความ

การจัดเรียงแนวตั้งใน Flexbox ด้วย align-items-*

เมื่อต้องการจัดเรียงองค์ประกอบภายในคอนเทนเนอร์ที่เป็น Flexbox สามารถใช้คลาส align-items-* เพื่อจัดเรียงแนวตั้งขององค์ประกอบทั้งหมดในคอนเทนเนอร์

• align-items-start: จัดองค์ประกอบทั้งหมดให้อยู่ด้านบนสุด
• align-items-center: จัดองค์ประกอบทั้งหมดให้อยู่กึ่งกลางในแนวตั้ง
• align-items-end: จัดองค์ประกอบทั้งหมดให้อยู่ล่างสุด

ตัวอย่างการใช้ align-items-* ใน Flexbox

<div class="d-flex align-items-center" style="height: 200px;">
  <div class="p-2 bg-primary text-white">จัดตรงกลางในแนวตั้ง</div>
</div>

ในตัวอย่างนี้ คอนเทนเนอร์ที่มี Flexbox จะจัดวางองค์ประกอบให้อยู่ตรงกลางในแนวตั้งด้วยการใช้ align-items-center

การจัดเรียงแนวตั้งขององค์ประกอบเดี่ยวใน Flexbox ด้วย align-self-*

หากต้องการจัดตำแหน่งขององค์ประกอบเดี่ยวในคอนเทนเนอร์ที่เป็น Flexbox สามารถใช้คลาส align-self-* เพื่อจัดเรียงเฉพาะองค์ประกอบนั้นๆ ได้

• align-self-start: จัดองค์ประกอบให้อยู่ด้านบนสุด
• align-self-center: จัดองค์ประกอบให้อยู่กึ่งกลางในแนวตั้ง
• align-self-end: จัดองค์ประกอบให้อยู่ล่างสุด

ตัวอย่างการใช้ align-self-*

<div class="d-flex" style="height: 200px;">
  <div class="align-self-end p-2 bg-success text-white">อยู่ล่างสุด</div>
</div>

ในตัวอย่างนี้ องค์ประกอบจะถูกจัดให้อยู่ล่างสุดด้วยการใช้ align-self-end ในขณะที่องค์ประกอบอื่นๆ ในคอนเทนเนอร์สามารถมีการจัดเรียงแตกต่างกันได้

การจัดเรียงในระบบกริดด้วยคลาส align-*

ใน Bootstrap 4 ยังสามารถใช้คลาส align-* เพื่อจัดเรียงองค์ประกอบในระบบกริดได้ โดยเฉพาะการจัดการคอลัมน์ในแถวเดียวกัน

ตัวอย่างการใช้ align-items-* ในระบบกริด

<div class="row align-items-center" style="height: 200px;">
  <div class="col bg-primary text-white">คอลัมน์ที่ 1</div>
  <div class="col bg-success text-white">คอลัมน์ที่ 2</div>
</div>

ในตัวอย่างนี้ คอลัมน์ทั้งหมดจะถูกจัดให้อยู่กึ่งกลางในแนวตั้งภายในแถวเดียวกันด้วยการใช้ align-items-center

การจัดเรียงแนวนอนใน Flexbox ด้วย justify-content-*

นอกจากการจัดเรียงแนวตั้งแล้ว Bootstrap 4 ยังมีคลาสสำหรับจัดเรียงแนวนอนใน Flexbox ด้วย justify-content-*

• justify-content-start: จัดองค์ประกอบไปทางด้านซ้าย (ค่าเริ่มต้น)
• justify-content-center: จัดองค์ประกอบให้อยู่กึ่งกลางในแนวนอน
• justify-content-end: จัดองค์ประกอบไปทางด้านขวา

ตัวอย่างการใช้ justify-content-*

<div class="d-flex justify-content-center">
  <div class="p-2 bg-info text-white">อยู่ตรงกลางในแนวนอน</div>
</div>

ในตัวอย่างนี้ องค์ประกอบจะถูกจัดให้อยู่กึ่งกลางในแนวนอนด้วย justify-content-center

การใช้งานคลาสการจัดเรียงในแบบ Responsive

Bootstrap 4 รองรับการจัดเรียงองค์ประกอบในแบบ Responsive โดยใช้ breakpoints ในการจัดเรียงตำแหน่งต่างๆ ตามขนาดหน้าจอ เช่น sm, md, lg, และ xl

ตัวอย่างการจัดเรียงในแบบ Responsive

<div class="d-flex align-items-start align-items-md-center align-items-lg-end" style="height: 200px;">
  <div class="p-2 bg-warning text-white">เปลี่ยนตำแหน่งตามขนาดหน้าจอ</div>
</div>

• บนหน้าจอขนาดเล็ก (< 768px): จะจัดองค์ประกอบให้อยู่ด้านบนด้วย align-items-start
• บนหน้าจอขนาดกลาง (≥ 768px): จะจัดองค์ประกอบให้อยู่กึ่งกลางด้วย align-items-md-center
• บนหน้าจอขนาดใหญ่ (≥ 992px): จะจัดองค์ประกอบให้อยู่ล่างสุดด้วย align-items-lg-end