Theory
Poster जिसने column तोड़ दिया
Unit 1 में आपने FestConnect poster को width="600" set किया था। एक phone पर एक Bootstrap column के अंदर, 600 pixels screen से चौड़े हैं, तो image बाहर निकल जाती है और एक horizontal scrollbar आ जाता है।
आप हर screen के लिए pixel widths हाथ से set नहीं करना चाहते। Bootstrap image classes देता है जो pictures को अपने container में automatically fit कराती हैं, plus एक साफ़ तरीक़ा एक छोटी image को इसके text के बगल में बैठाने का, वह layout जो हर event card इस्तेमाल करता है।
Theory
एक photo जो अपने frame के हिसाब से resize हो जाती है
एक printed photo एक fixed size की होती है: एक छोटे frame के लिए बहुत बड़ी हो तो फिट नहीं होगी। img-fluid एक magical photo जैसा है जो जिस भी frame में आप इसे डालें उसमें shrink हो जाती है, edges से कभी बाहर नहीं छलकती, अपने proportions रखते हुए। आप frames measure करना बंद कर देते हैं; आप बस 'fit' कहते हैं, और picture जिस column में यह उतरे उसकी बात मानती है।
Theory
Image utilities
- `img-fluid`: picture अपने container में fit होने के लिए scale down होती है (max-width 100%, height auto)। यह responsive image class है।
- `img-thumbnail`: एक हल्का bordered, rounded frame।
- `rounded`, `rounded-circle`, `rounded-pill`: corners shape करते हैं (circle avatars के लिए बढ़िया है)।
- Centering:
mx-auto d-block।
एक media object text के block के बगल एक छोटी image है। Bootstrap 5 में आप इसे flex utilities (d-flex) या एक card से बनाते हैं, क्योंकि पुरानी .media class हटा दी गई है।
Practical
एक responsive poster और एक event media object
<!-- responsive: fits any column, no overflow -->
<img src="images/fest-poster.jpg" class="img-fluid" alt="TechFest 2026 poster">
<!-- media object: thumbnail left, text right (flex in BS5) -->
<div class="d-flex">
<img src="images/robotics.jpg" class="rounded me-3"
width="64" height="64" alt="Robotics event">
<div>
<h5>Robotics Challenge</h5>
<p>Build and battle line-follower bots. 12 March, 10 am.</p>
</div>
</div>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
Overflow ठीक कीजिए
आपका <img width="600"> poster एक phone पर अपने column से overflow करता है। कौन सी अकेली Bootstrap class इसे fix करती है, और वह class hood के नीचे actually कौन से दो CSS rules apply करती है?
Show the answer
`img-fluid` जोड़िए। Hood के नीचे यह max-width: 100% (अपने container से कभी चौड़ी नहीं) और height: auto (aspect ratio बनाए रखना) apply करती है। तो एक 360px phone पर poster 360px पर cap हो जाता है और इसकी height proportionally scale down होती है, कोई scrollbar नहीं। एक बार img-fluid sizing सम्भाल ले तो आप fixed width="600" भी हटा सकते हैं।
Quiz
आप FestConnect organiser team के लिए circular profile photos चाहते हैं। कौन सी class एक square image को circle में shape करती है?
- rounded-circle
- img-fluid
- img-thumbnail
- btn-circle
Show the answer
rounded-circle
rounded-circle corners को पूरी तरह एक circle में round करता है (एक square image पर सबसे अच्छा), तो यह एक round avatar बनाता है (A)। img-fluid (B) सिर्फ़ responsive sizing सम्भालता है, shape नहीं। img-thumbnail (C) एक square bordered frame जोड़ता है। btn-circle (D) कोई Bootstrap class ही नहीं है। rounded-circle को एक square source image के साथ pair कीजिए वरना यह एक oval बन जाता है।
Watch out
Image utility traps
1. Mobile पर overflowing images: आप img-fluid भूल गए। यह सबसे common Bootstrap image fix है।
2. पुरानी `.media` class इस्तेमाल करने की कोशिश: यह Bootstrap 5 में हटा दी गई है। Image-beside-text layout के लिए d-flex या एक card इस्तेमाल कीजिए।
3. src और alt छोड़ देना: Bootstrap classes सिर्फ़ image को style करती हैं; Unit 1 के plain-HTML essentials (एक असली src और meaningful alt) अब भी चाहिए।
Theory
ये cards बन जाते हैं
यहाँ का media object Bootstrap card का seed है, एक bordered box जिसमें एक image, title, text, और buttons हों। FestConnect की event listing इन cards का एक grid है (Unit 2 grid lesson)। और जब एक screen में fit होने से ज़्यादा events हों, अगला lesson, pagination, उन्हें numbered pages में बाँट देता है।
Summary
Key takeaways
- img-fluid एक image को अपने container के हिसाब से scale कराता है (max-width 100%, height auto): key responsive image class।
- img-thumbnail एक bordered frame जोड़ता है; rounded / rounded-circle / rounded-pill corners shape करते हैं।
- एक media object (text के बगल image) Bootstrap 5 में d-flex या एक card से बनता है (पुरानी .media class हटा दी गई)।
- Bootstrap image को style करता है पर Unit 1 के src और alt अब भी चाहिए।
- Mobile पर overflowing images लगभग हमेशा एक missing img-fluid का मतलब है।
- Memory hook: एक photo जो अपने frame के हिसाब से resize हो जाती है।