Utilities

Bootstrap Utility Classes (ថ្នាក់​ឧបករណ៍)

Bootstrap មាន utility classes ជា​ច្រើន​សម្រាប់​រចនា​លឿន។ Utilities គឺ​ជា classes តូចៗ​ដែល​អនុវត្ត CSS property មួយ​ឬ​ពីរ​ដើម្បី​ធ្វើ styling រហ័ស។

📏 Spacing Utilities (Margin & Padding)

Format	Description	Examples
{property}{sides}-{size}	ទម្រង់​មូលដ្ឋាន	m-3, p-2, mt-4
Property: m = margin p = padding	ប្រភេទ spacing	m-* for margins p-* for padding
Sides: t=top, b=bottom s=start/left, e=end/right x=horizontal, y=vertical (blank)=all sides	ទិស spacing	mt-3 (top) px-4 (left+right) m-2 (all sides)
Size: 0, 1, 2, 3, 4, 5 auto	ទំហំ spacing	0=0rem, 1=0.25rem 2=0.5rem, 3=1rem 4=1.5rem, 5=3rem auto=auto

📊 Spacing Scale Reference

Size Class	REM Value	Pixel Value	Common Use
0	0	0px	Remove spacing completely
1	0.25rem	4px	Very tight spacing - icons, badges
2	0.5rem	8px	Small spacing - buttons, form elements
3	1rem	16px	ទំហំ​ស្តង់ដារ - most common spacing
4	1.5rem	24px	Medium spacing - cards, sections
5	3rem	48px	Large spacing - major sections
auto	auto	auto	Center blocks with mx-auto

📐 Display Utilities

Class	CSS Value	Behavior	Use Case
.d-none	display: none	លាក់​ទាំងស្រុង (hidden)	Hide elements completely
.d-inline	display: inline	ក្នុង​បន្ទាត់ (inline)	Spans, links, inline text
.d-inline-block	display: inline-block	Inline with width/height	Buttons, badges with dimensions
.d-block	display: block	ទំហំ​ពេញ​ទទឹង (full width)	Divs, full-width elements
.d-flex	display: flex	បើក flexbox	Flexible layouts, alignment
.d-inline-flex	display: inline-flex	Inline flexbox	Inline flex containers
.d-grid	display: grid	បើក CSS Grid	Grid layouts
.d-table	display: table	Table-like layout	Table structures without <table>

📱 Responsive Display

Pattern	Example	Behavior
Hide on mobile, show on desktop	.d-none .d-md-block	លាក់​លើ mobile, បង្ហាញ​លើ tablet+
Show on mobile, hide on desktop	.d-block .d-md-none	បង្ហាញ​លើ mobile, លាក់​លើ tablet+
Show only on tablet	.d-none .d-md-block .d-lg-none	លាក់ mobile, បង្ហាញ tablet, លាក់ desktop

📍 Position Utilities

Class	CSS Value	Description
.position-static	position: static	ទីតាំង​ធម្មតា (default)
.position-relative	position: relative	ទាក់ទង​នឹង​ទីតាំង​ដើម - parent for absolute children
.position-absolute	position: absolute	ទីតាំង​ជាក់លាក់ - positioned relative to parent
.position-fixed	position: fixed	ថេរ​លើ​អេក្រង់ - stays in viewport
.position-sticky	position: sticky	ស្អិត​ពេល scroll - sticky headers
.top-0, .bottom-0 .start-0, .end-0	top/bottom/left/right: 0	តម្រឹម​ទៅ​គែម (edge positioning)
.top-50, .start-50 .translate-middle	Center positioning	កណ្តាល​ពេញលេញ (perfect centering)

🎨 Flexbox Utilities

Category	Classes	Purpose
Direction	.flex-row, .flex-column .flex-row-reverse, .flex-column-reverse	ទិស flex items (ផ្តេក ឬ បញ្ឈរ)
Justify (horizontal)	.justify-content-start/center/end .justify-content-between/around/evenly	តម្រឹម​ផ្តេក (horizontal alignment)
Align Items (vertical)	.align-items-start/center/end .align-items-baseline/stretch	តម្រឹម​បញ្ឈរ (vertical alignment)
Align Self	.align-self-start/center/end .align-self-baseline/stretch	តម្រឹម item ជាក់លាក់ (individual item)
Wrap	.flex-wrap, .flex-nowrap .flex-wrap-reverse	រុំ items ទៅ​បន្ទាត់​ថ្មី
Gap	.gap-0/1/2/3/4/5	ចន្លោះ​រវាង items
Grow & Shrink	.flex-grow-0/1 .flex-shrink-0/1	ពង្រីក ឬ បង្រួម items

📐 Sizing Utilities

Class Pattern	Available Values	Example
Width	.w-25, .w-50, .w-75, .w-100, .w-auto	.w-50 = 50% width
Height	.h-25, .h-50, .h-75, .h-100, .h-auto	.h-100 = 100% height
Max Width	.mw-100	max-width: 100%
Max Height	.mh-100	max-height: 100%
Viewport Width	.vw-100	width: 100vw (full viewport)
Viewport Height	.vh-100	height: 100vh (full viewport)

🎯 Common Utility Patterns

Pattern	Classes	Result
Center Block Element	.mx-auto + set width	ធ្វើ​ឲ្យ element កណ្តាល
Center with Flexbox	.d-flex .justify-content-center .align-items-center	កណ្តាល​ទាំង​ផ្តេក និង​បញ្ឈរ
Full Height Section	.vh-100 .d-flex .align-items-center	Section ពេញ​អេក្រង់
Sticky Header	.position-sticky .top-0	Header ស្អិត​ពេល scroll
Badge in Corner	.position-absolute .top-0 .end-0	Badge នៅ​ជ្រុង​ស្តាំ​លើ
Responsive Spacing	.mt-3 .mt-md-4 .mt-lg-5	Spacing ប្រែ​តាម​ទំហំ​អេក្រង់

✅ Utility Best Practices

❌ Avoid	✅ Best Practice
Adding utilities to every single element	Use utilities for quick adjustments; create components for repeated patterns
Forgetting responsive variants (.d-none without breakpoint)	Use .d-none .d-md-block for responsive hiding/showing
Using .w-100 on flex items (causes overflow)	Use .flex-grow-1 or let flex handle sizing
Combining .position-absolute without .position-relative parent	Always set parent to .position-relative when using absolute children
Using inline styles instead of utilities	Prefer .mt-3 over style="margin-top: 1rem"
Not using .gap-* for flex/grid spacing	Use .gap-3 instead of margin on each child element
Inconsistent spacing sizes (mixing 1, 2, 3, 4, 5 randomly)	Stick to 2-3 spacing sizes throughout project (e.g., 2, 3, 5)

---

Display & Position

---

Flexbox Utilities