Day - 33 | 🚀 Learn Bootstrap Layout & Components

Name: Day - 33 | 🚀 Learn Bootstrap Layout & Components
Uploaded: 2026-01-15T08:11:14+00:00
Duration: 52 min 42 s
Channel: skillwaala
Description: 👨💻 What You’ll Learn in This Class: ✅ Understanding the Bootstrap Layout System ✅ Working with Containers, Rows, and Columns ✅ Using Grid combinations for flexible layouts ✅ Introduction to Bootstrap UI Components ✅ Hands-on examples with Buttons, Alerts, Badges, and Cards ✅ How to use utility classes for spacing, alignment, and responsiveness

skillwaala

10 months ago

👨‍💻 What You’ll Learn in This Class:
✅ Understanding the Bootstrap Layout System
✅ Working with Containers, Rows, and Columns
✅ Using Grid combinations for flexible layouts
✅ Introduction to Bootstrap UI Components
✅ Hands-on examples with Buttons, Alerts, Badges, and Cards
✅ How to use utility classes for spacing, alignment, and responsiveness

Category

📚

Learning

Transcript

Display full video transcript

00:00इस गुड़ इवनिंग एविवन गुड़ इवनिंग सिबूल सूरज कौशलया अलका नभी आशी शादित्या नभी ने लिखा है नै सही रहा का जब था ग्यान गुरु ने दिया जीवन को पहचान हर सांस में आपका उपकार गुरु जी को बार बार पढ़ना हो

00:29वाओ अच्छा है नाइस प्रणाम प्रणाम आशीश ने क्या भी जाए ने लिख लीपाए

00:59क्या भी जाएगे आदिते करें सर कल की क्लास के वीडियो भी तक अप्लोड नहीं किया क्या आपने नहीं तो ऐसा नहीं है कल क्लास अप्लोड हो चुकी होगी ऐसा होई

01:21इसा होई नहीं सकता डेली मोशन प्रणा के पंचेक कल लेते हैं कल की क्लास अप्लोड हो चुकी है पॉसिवल नहीं है देख लेता हूं में एक बार

01:30देखो हैं डाध कर लोडे यहां पर डेघका लोडेते हैं क्ले अप्लोड है है कि क्ल्वल में में रिरॉड औरहों में पर चुकैंक नहीं अगर

01:55तो देखो

01:58तो देखो

01:59यहां पर देखो यह class अपनी uploaded है

02:047 कंटे पर अप्लोड करिए

02:06uploaded है यह

02:08यहां पर आके अगर आप चेक करोगे तो

02:10चीक है

02:11इस टाइमिंग में student कम है क्या

02:16यह अपनी आज की ही है

02:19timing

02:19चीक है

02:21बाकि अपनी timing 7.30 ही रहेगी

02:23आज अपने थोड़ा सा जल्दी रख लिए timing

02:26क्योंकि सर को थोड़ा travel करना है

02:29इसलिए

02:30ठीक है

02:38चलो वाई

02:39अपन class start करते है

02:40तो देखो last class अपन bootsep पे ही discuss कर रहे थे

02:43और अपन bootsep पे ही discuss करेंगे

02:45तो अपन आ जाते हैं अपने bootsep के उपर ही

02:47और अपने breakpoint देग लिए थे

02:57उससी में आगे देखते हैं कि अपने पे और क्या का चीजे होती है

03:01तो अपने grade में देखा था कि अपन यहां

03:04अपने container लेते हैं फिर अपन row लेते हैं

03:08फिर उसके अंदर अपन columns काže himself करते हैं

03:09अपनने आपने अपने क्ले करते हैं, कि आपने पास अपना कंटेनर है, और रो है, औरола का पने का इस तो यह को जै

03:18यहादी करते हैं, जैसा अपन वियर कोड पर आ जा जाओ, अपना फॉल्क डिम है उपना, जी जी तक

03:39ग्रिड डॉट स्टी अमेल और यहां पर अपनी बॉइलर प्लीट लगा दो ठीक है और यहां पर अपन अपनी बूट सेप भी लगा देते हैं तो मैं यहां पर आ जाता हूं और यह अपना इंट्रोडक्शन बूट सेप का

03:53css का cdn link अपने पास ही रहा इसको मैं यहां से copy कर लेता हूं और copy करके अपन यहां पर इसको लगा देता हूं लिंक, colon, css और यहां पर अपने cdn link को अपन यहां पर paste कर देता है तो यह अपना cdn यहां पर paste हो चुका है

04:11परफेक्ट अब उसके बाद अपने को यहां पर क्या करना है उसके बाद अपन यहां पर वही अपना इग़िट का देखा था अपन सबसे पहले container लेएंगे फिर उसके बाद row फिर उसके बाद columns की क्या columns का divideration करना है जैसा मैं को चार columns मतलब total अपने पास कितने होते हैं 12 ह

04:41अपन 3-3 का रख लेते हैं तो मैं यहाँ पर कहा देता हूं अपना

04:44container चीक है container के अंदर अपन बनाएंगे अपना row और row के अंदर अपन

04:50बनाएंगे call और मैं यहाँ पर कितने के बनाना चाहता हूं 33 के मैं यहाँ पर

04:54करना चाता हूं. तो three three के मैंने कितने क्रिएट कर दिया है

04:57आपर? चार कॉलम्स यहाँ पर अपने कर दी है, च्शिक है? और इसके अंदर मैं

05:02content मि लिग देता हूं, बिसे lorem करके अपन यहाँ पर 30 का content

05:05देदेते हैं, सेम इसके अंदर भी content देदो, मैं यहाँ पर

05:08कह देता हूं लॉरेम 30 का content देता हूं और इसके अंदर भी अपन लॉरेम 30 का content देता हूं और इस फाइल को अबने एक बार के लिए

05:29की ये इस तरीके से पने पास आ रहा है पने इस पर background color भी लगा देते हैं थोड़ा सा unique सा लगए तो मैं यहाँ पर background

05:35लगा देना और ट्यक्स को आप यहां पर क्या कर देना अपने

05:45कटेंटेनर के लिए इसको मैं कह देता हूं

05:50यहां पर dark कर देना, ठीक है, और जो text है, उसको आप यहां पर क्या कर देना, अपना light कर देना, perfect, ऐसे ही next container पर मैं यहां पर आ जाता हूँ, इसको मैं कह देता हूँ, bg, और यहां पर आप क्या कर देना, अपना success, और text को आप यहां पर क्या कर देना, अपना light कर देना, उसक

06:20झाल झाल

06:50के भाद भूत on पडिया जाए लगा सुख सुख कहां से हराता है

07:05संब कुछ सु bounty कि अपयू

07:20हलो हलो हलो हलो

07:50एक बार आप रेस्पॉंस करना कि वाइस ब्रेक हो रही है या नहीं हो रही

08:02एक बार रेस्पॉंस करना है

08:09अभी वाइस के लिए है मेरी

08:20इसको मैनेजर ऐसे तो कोई चीज़ेस में रहनिंग में नहीं है

08:38आपके नहीं है पनाइन कर दो टेस्ट आसको

08:47अभी चलो वही एक बार वापस आ जाते हैं अपन वी एस कोड के उपर ज्यादा कुछ ही नहीं किया है कुछ नया नहीं किया है मैंने अभी तक वहीं चीज़ें रिपीट कर रहे हैं अपने ब्लेक पॉइंट को समझने के लिए फाइल और यहां पर अपन अपने फोल्डर �

09:17फोल्डर है ठीक है इस फोल्डर पर मैं आ जाता हूं और और और यह इतना चोटा वैसा हो गया इसको जूम कर लो

09:25इसको set कर लो यहापर इसको wrap कर लो

09:32grid पर discuss कर रहे तो इस पर आ जाते हैं

09:38वीजी warning अपने इस पर कर दिया और इसका text में

09:41यहापर change कर रहेता हूं मैं text को कर देता हूं

09:43आप यहापर क्या कर देना अपना light कर देना

09:45इतना सा काम मैंने आपर करा और अपन इसको एक बार रन करवा के देख लेता है

09:49यह लो चीक है perfect यहापर color क्या आ रहा है यह

09:55बीजी आपने आपर क्या लगा है बीजी ड्रैक नहीं होगा dark होगा वो

10:01ठीक है बीजी डार्क लगा दो यहापर तो background color डार्क यहापर अपन लगा रहे है

10:06perfect अब भी अगर voice का issue है तो आप एक बार response कर दू कि voice का issue अभी आ रहा है

10:15ऐसे तो नहीं आना चीए

10:16अभी सही है voice

10:22अभी वह स्केश हुआ रहा है

10:31चुलो आप बने रहूं मैं एक बार वापस रिजोइन करता हूं class को मैं भी हो सकता है

10:41कि मैं रिजोइन करता हूं class को ठीक है

10:52ठीक है आवे सर वापस अब voice के लिए हुनी चीए वैसे ठीक है

11:12चलो पने एक बार वापस discussion करते हैं तो यहाँ पर अपने कुछ नहीं किया अपने अपने अपना container बनाया

11:18मैंने row बनाया है और रों के अंदर अपने यहाँ पर ले रका है अपना क्या

11:30और सबके उपर मैंने content एंद उसका color और उसका यहाँ पर अपने text color यहाँ पर कर रही है

11:39अब देखो मीर को यहाँ पर क्या करना है यह जो अपने दिया है अब भी अगर आपने इसको रण करके देखते हैं तो अपने बास किस तरीकी से दिखां कि तो यहां पर घ्ल

11:51तो इस तरीके से अपने पास अपने container आ रहे है जैसे मैं को margin देनी है top से तो मैं बोलूँगा empty और मैंने 3 की यहाँ पर top से 3 की margin इसके उपर apply हो जाएगी तो यहाँ पर top से 3 की margin अपनी apply होगी अब देखो यहाँ पर अगर आप देखोगे इसको inspect करके कि यह responsive है या नहीं है �

12:21जैसे ही यहाँ पर आ रहे हैं तो यह दो-दो में डिवाइड हो जाने चीए ते container अपने मतलब 66 का डिवाइडेशन आप यहाँ पर करतो किस रेंज के अंदर रेंज अपने पास पता है अपने ब्रेक पॉइंट्स होते हैं तो अपने यहाँ पर आते हैं अपने बूट्श

12:51अब भी मैंने यहाँ पर क्या लगा रहा है कॉल 3 इसका मतलब हर डिवाइस के अंदर 33 का डिवाइडेशन रहने वाला है क्यों क्योंकि यह आपका नन वाला ब्रेक पॉइंट यहाँ पर अपना अप्लाई हो रहा है ठीक है इसका मतलब हर डिवाइस के अंदर यहाँ पर क�

13:21जैसे मैं चाहता हूँ कि मैं यहाँ पर LG एक breakpoint लगा दूँँ चीक है

13:25तो इसका मतलब 992 pixel से उपर आने पर आने पर आपको क्या करना है

13:29वो आप यहाँ पर breakpoint set कर सकते हो

13:31चीक है

13:32तो LG मतलगाओ जैसे अपर यहाँ पर यही लगा देते हैं

13:36मैं यहाँ पर बोलता हूँ call LG ठीक है

13:42लेकिन LG लगाओगे LG अपने पास उससे पहले हो गया

13:45तो इससे पहले आप breakpoint लगाओ कुछ जो आप से जाते हूँ

13:49या तो इसी पर लगा दो जो 33 का मैंने कर लगा है

13:52इसी पर मैं लगा दो हूँ LG ठीक है मैंने यहाँ पर LG breakpoint लगा दिया

13:56और यहाँ पर भी मैं लगा दो अपना LG breakpoint और यहाँ पर भी मैं लगा दो अपना LG breakpoint

14:02ठीक है और यहाँ पर भी पन लगा देते हैं अपना LG breakpoint

14:07तो सब पे मैंने यहाँ पर breakpoint लगा दिया

14:10LG मतलब जैसे ही call LG से 3 से उपर जाए

14:14call LG मतलब 992 pixels उपर जाए

14:17तब वो 3-3 में divide हो जाएगा

14:18वैसे वो कह रहेगा वो रहेगा 12 में

14:21call 12 में यहाँ पर रहने वाला है

14:22जो अपने apply नहीं कहता है भी

14:23तो देखो जैसे 992 pixels से नीच आएगा

14:26तो 12 में वो divide हो गया

14:28लेकिन मैं चाता हूँ कि यहाँ पर

14:31MD से लेके LG की बीच की range के अंदर

14:34जो आपके columns है वो आपको

14:366-6 के dividation में दिखने चीए है

14:38किस में दिखने चीए है?

14:406-6 के मतलब 1 row के अंदर अपने पास

14:422 दिखने चीए है अपने को

14:43तो यहाँ पर 6-6 का लगा दो

14:45MD break point यहाँ पर लगा देते हैं

14:47तो इससे पहले ही मैं यहाँ पर लगा देता हूँ

14:49call MD और मैंने यहाँ पर लगा दी है

14:526 का break point सेम ऐसे ही

14:54यहाँ पर भी लगा दो उपने का देता हूँ

14:55call MD और

14:576 का breakpoint

14:58same ऐसे ही

14:59यहाँ पर भी पर लगा देते है

15:01call MD और 6

15:03ठीक है

15:04और ऐसे ही

15:05यहाँ पर भी मैं लगा देता हूँ

15:06अपना breakpoint

15:07call MD और 6

15:09ठीक है

15:10तो यह अपने पास

15:11उस तरीके से

15:12arrange होके आने चीए

15:13तो देखो जैसे ही

15:14MD से LG के बीच में

15:16range के रहेंगे

15:2710-10 वाली range

15:27मतलब 768 pixel

15:29तो यह अपने पास

15:3066 में डिवाइड हो जाएँगे

15:31जैसे 768 pixels उपर आएँगे

15:33और जैसे ही

15:34LG की range में जाएँगे

15:36मतलब 992 pixel

15:37तो यह 33 में डिवाइड हो जाएँगे

15:39जैसे 992 pixel की रिपिक्सल में आएँगे

15:40तो 3-3 में रिवाइट हो गए, तो यह अपने पास अपने breakpoints होते हैं, जो अपने यहाँ पर यूज लेते हैं, तो वो पूरा complete response ही दिखता है मिलेको हर डिवाइस के साब से, जैसे मैं इसको revise change कर रहा हूं, वैसे वैसे मिले पास यह containers अपने यहाँ पर change होते जा रहे हैं, त

16:10columns आते हैं, call करके जो अपने यहाँ पर सारे columns अपने लगाए हैं, तो अगर आपको gap देना है,

16:40तो उसके लिए अपने इसको use लेते हैं, जैसे मैं इस row के उपर लगाता हूं, मैंने बोला g1 आप यहाँ पर लगा देना, ठीक है, मैंने क्या बोला, इसके उपर आप यहाँ पर क्या लगा देना, अपना g1 आप यहाँ पर apply कर देना, ठीक है, तो यहाँ पर अपने क्या �

17:10तरी एक्स टो यहां पर चुक है और उसको आप यहां पर जैसे एक

17:16बार के लिए टरी देते है अपने GX मैं यहां पर क्या देता हूं थी यहां

17:20पर अप्लाइ görता हूं और ज Nä्यक करता हूं Еपटमीयंte कृष से नहीं हो रहरा

17:31अपने पास रो के अंदर अपने इसको लगाते है कॉल की अपने यहां पर यूज करते है ठीक है और यह अपने पास यह तो वर्टिकल के लिए अगर अपन जी वाई देते तो उस पर अप्लाई होगा

18:01कि इनकी बीच में इस पीसिंग आनी चाहिए अपने पास

18:03कि अपने पास कि अपने पास कि अपने पास कि अपने पैडिंग लगा कि देखते हैं यहां पर आजो

18:27जैसे मैं इसको पी थ्री पास करता हूं मैंने इसको पी थ्री पास करी और इस वाले को भी कॉलम को मैं यहां पर क्या करता हूं

18:35सबके उपर पी थ्री की पैडिंग मैं यहां पर अप्लाइ कर रहा हूं। अब अपने को यहां पर क्या लगाना था इपना लगाना था

18:53वर्क कैसे नहीं कर रहा है जी एक सना लगा कि ये वाला लगा को कुछ मिस्टेक है सके अंदर

19:14पॉर्मेट डॉक्यमेंट करो एक बाए के लिए ये अपने पहला अपना में डूब है ये वाला डूब है फिर उसके

19:21बाद ये वाला div है और ये वाला div है ठीक है ये अपने पास इस तरीकी से आ रहे है अब इसके उपर मेरे को क्या लगाना अपना gap वाली property लगानी है तो मैंने G करके

19:30यहां पर जैसे 4 यहां पर अपना apply करा gap 4

19:36अब देखो मैंने यहाँ पर यह चो प्रोपर्टी लगा यह अपनी गैप यह वर्क करेगी जहाँ पर वो गैप दे सकता है जहाँ पर गैप बनता है वहीं पर यही एपलाई होगी यहाँ पर गैप बन नहीं पा रहा क्यों नहीं बन पा रहा क्योंकि अपने यहाँ पर 3-3 का

20:0612 हो रहा है वो पहले से

20:08यहां तो dividation कम करो आपने बोल दिया

20:10कि आप 2-2 का dividation आप यहां पर दे दो

20:12जैसे मैंने यहां पर

20:142-2 का dividation दे दिया सबको

20:16सबको मैंने यहां पर क्या कह दिया

20:18कि सबको आप यहां पर 2-2 का dividation

20:20अपने पास यहां पर apply करके देख लो

20:36इसने call करके call करके यहाँ पर दिया फिर उसके बाद इसने बुला कि यहाँ पर gx लगा देना ठीक है

20:58इसने 5 यहाँ पर लगा रखा है ठीक है जी एक्स करके अपन यहाँ पर इसपे 5 लगाते है जैसे मैं यहाँ पर बहुता हूं जी एक्स करके आप यहाँ पर इस पर फॉल लगा दे लाओ ठीक है तो जी एक्स अपन यहाँ पर फॉल लगा रहे है इसको पर अप्लाई होना ची

21:28की पैडिंग मेने आप पर देदी फिर भी यह गैप नहीं ले रहा ऐसा क्यूं

21:47जी एक्स फाइब देखे देखते हैं बन जी एक्स फाइब में यहाँ पर क्या होता है

21:51यह होरिजॉन्टल अपने पास अपनी एक्टर से प्लाए होनी चीए देखे एक्स फाइब अपने आपर दिया ठीक है

22:02चलो इसको मैं बताता हूँ रूखो अब आपको वह बरागी

22:21उससे पहले अपन थोड़ा सा आगे उड़ देख लेते हैं

22:24जैसे जैड इंडेक्स पर अपने देखा जैड इंडेक्स अपने पास यहाँ पर क्या होता है

22:27अगर अपने को किसी भी ऐलिमेंट का स्टैकिंग ओडर यहाँ पर अपने को सैट करना रहता है

22:32तो उसके लिए अपने यहाँ पर क्या यूज लेता है अपना जैड इंडेक्स अपन यहाँ पर यूज लेता है

22:36अगर अपने कुछ stacking order यहाँ पर लगाना है तो

22:39stacking order के लिए अपने

22:41यहाँ पर अपने z index को

22:43use लेते हैं अब देखो

22:44boot setup use करने के लिए कुछ

22:46common चीज़े जो थी वो आपने

22:48सारी देख ली वो सारी

22:50common चीज़े आपने यहाँ पर देख ली

22:52कि क्या-क्या common चीज़े यहाँ पर

22:54होती है

22:54मैं भी offset आता एक तो

22:57offset अपने नीदे का शायद

22:59जैसे मैं यहाँ पर

23:01offset लगाना चाहता हूँ

23:04ठीक है इसको मैंने call lg

23:053 ना देखे मैंने 2 दिया

23:07और मैंने यहाँ पर बोला अपना

23:09offset 1

23:12ठीक है अब 1 का मतलब

23:14यहाँ पर क्या हो गया यह जो

23:15column है वो two का set होगा और इसका

23:17offset यहाँ पर क्या set होगा one set होगा

23:19offset मतलब blank space ठीक है

23:21वो मैं यहाँ पर देना चाहता हूँ

23:23और वो इसके उपर apply हुआ ही नहीं लेकिन

23:25इसको अटाओ एक बार

23:27जी एक्स वी एक्स को अटादो यह जो भी लगा रखा

23:29आपने ठीक है

23:30offset भी apply नहीं हो रहा ऐसा क्यूं

23:35यहाँ पर आओ यहाँ पर आओ

23:49offset तो यही था अपने पास

23:52देखो offset अपने पास classes होती है

23:59यहाँ पर अपने offset लगाया ठीक है

24:01और अपन

24:03breakpoint भी यहाँ पर set कर दो

24:11offset और मैं यहाँ पर कह देता हूँ

24:15किस पर लगाना चाहता हूँ

24:16मैं LG वाले breakpoint के उपर

24:18तो मैंने यहाँ पर offset LG यहाँ पर set कर दिया

24:21offset LG 1 अपने यहाँ पर देते एक बार के लिए

24:25क्या दिक्कता रही है

24:29call LG 2 मैंने यहाँ पर दिया

24:33offset अपने यहाँ पर लगाया अपना LG 1

24:35तो यहाँ पर

24:36offset set हो जाना चाहिए था

24:40offset left side लगता

24:43अच्छा left side लगता

24:44अगर left side लग रहा तो यहाँ पर changes करते हैं

24:47मैं यहाँ पर इसको बोलता हूँLG 2 रखो और इसके उपर में लगाता हूँ अपना offset

24:51मैं यहाँ पर बोलता हूँ offset

24:52ठीक है और यहाँ पर

24:55अपन LG के लिए ही लगाना चाहरे तो मैं यहाँ पर LG के लिए ही अपना offset देटा हूँ

24:59तो यह left side लगता है देखो

25:01अब अगर आप देखोगे तो देखो left side यहाँ पर अपना offset यहाँ पर set हो रहा है

25:05ठीकिए यह spacing यहाँ पर बन रही है अपनी इसकी बीच में

25:08लेकिन अपने columns को यहाँ पर चोटा करना पड़ेगा

25:11अगर आप यहाँ पर LG 3 देते हैं ठीक है और offset LG यहाँ पर मैं क्या दे रहा हूँ

25:161 दे रहा हूँ तो वो एक column नीचे चला जागा क्योंकि offset भी आपकी total 12 column में यहाँ पर count होता है

25:22ठीक है तो आपको total यहाँ पर offset को मिला कि 12 रखना पड़ेगा

25:26तो यहाँ पर भी मेरे को क्या करना पड़ेगा इसको 2 करना पड़ेगा

25:28और यहाँ पर अगर मेरे को offset लगाना है तो मैं यहाँ पर offset की value में यहाँ पर क्या दे दूँगा

25:34offset और यहां पर अपन देता है

25:36LG ची के मैने yg

25:38डिया और ऐसे ही same

25:40मैं है है इसको call-LG

25:422 कर देता हूं ची के और यहां

25:44पर भी उपन क्या लगा देता है अपना offset और

25:46offset बीए अपने अपने को

25:49offset अपने को लगाना है

25:51यहां पर अपने व Series LG

25:53के उपर ही ची के

25:55तो अब देखो सब के बीच में 1-1 की spacing यहाँ पर create हो जाएगी

25:58जितने भी अपने पास यहाँ पर अपने यह containers आ रहे हैं उन सब के बीच में यहाँ पर 1-1 की spacing यहाँ पर create हो गई है

26:05अब आप इंस्पेक्ट कर के करोगे तो यहां पर वो अटमेटिक यहां पर इस तरीके से रहेंगे अपने कंटेनर से तो यह अपने पास आथी गया अब देखो बूट सैप में जो में में चीजे थी वो मैंने आपको बताई के उसके उपर अपने भी डिसकस करेंगे कैसे ल�

26:35के लिए अपने पास यही सेम अपना वाला ही है अपनेउपर क्लास लगा सकते हैं उसके बिस्प्र अपन यहां पर अपना degree वाला ही है

26:52पास रू का भी option यहाँ पर है, देखो कैसे, यह तो अपने पास columns, columns सारे इस तरीके से divide कर रहा है, ठीक है, मैं और scroll करता हूँ,

27:01नेस्टिंग भी इसने यहाँ पर बता रखिए, कि नेस्टिंग अगर आपको create करनी है, तो नेस्टिंग भी आप यहाँ पर इस तरीके से create कर सकता हूँ, अब यहाँ पर इसने, आगे चलो, आगे चलो, आगे चलो इसमें,

27:12एक बार के लिए इस को रहने दो grade वाले को, CSS grade को, इसमें देखो, इसने यह वाली चीज़ लगा रखिए, इसको मैं बताऊँगा, क्या होती है, ठीक है, तो यह जो चीज़े अपने देखी, वो तो easy थी, क्योंकि अपने को responsive बनाना आना चाहिए,

27:39उसके अलावा अपन यहाँ पर एक बार के लिए अपने components पर discuss कर लेते हैं, अपने वास components में क्या-क्या, अपने पास pre-written code आती है, जिनको अपन यहाँ पर use कर सकते हैं, अपने layout को बनाने के लिए, ठीक है, वो चीज़ अपन यहाँ पर देखते हैं, तो चलो, यहाँ पर �

28:09ऐक्यू कैसे होते हैं, तो यहाँ पर एक बार के लिए, अपने पर इस चरीके से अपने पास इस तरह कर रहें, तो अपने पास इस चरीके से

28:30लगा सकते हैं जैसे मैं इसको यूज करना है सीधी सी बात है इसको यूज करना है तो यहां से इसको कॉपी कर लो देन उसके बाद इसको यूज कर लो तो मैं यहां से इसको कॉपी कर लेता हूं और कॉपी करके जहां पर भी इसको यूज करना है वहां पर इसको पेस्ट कर द

29:00करके लेकर आगया और यहां पर उसको पीश्ट कर दिया अगर आपके पास

29:05इस हार कि यहां पर आ जाएंगा डेकर इस तरीके से फेक यू आ टार रहा है अिuser semua

29:20क्यों देखते हैं क्यों नहीं कर पारे मैं यहाँ पर container में margin टॉप या फिर MX में यहाँ पर 4 की apply कर देता हूं इसके पर ठीक है ताकि margin apply वह जाए अपने पास

29:33अलग से लगा दो top 4 और margin bottom 4 की अपने यहाँ पर margin apply करते थे इसके पर पर अपने पास यह FAQ आतो रहा है जैसे अपने अकोडियन्स है यह अपने पास आतो रहा है लेकिन इसको use नहीं कर पार देखो मैं क्लिक कर रहा हूं तो क्लिक करने पर यह चल नहीं था तो अपनी website को interactive ब

30:03leading ही लगाया है और वो किसका है अपना CSS का अगर अपने को JavaScript यूज करनी है तो अपने को JavaScript अपन कहां पर लगाते हैं अपनी जो CSS है वो तो open head tag के अंदर लगाते हैं आंधाए अपन लिंक कॉलन CSS करके एसे ही अगर अपन वात करें जावा स्कृट की तो javascript अपन हमीशा body tag के

30:33लगाएंगे तो अगर वो सबसे पहले javascript की code को read करेगा तो आपकी website

30:37यहाँ पर क्या हो जाएगी slow हो जाएगी इसलिए अपन हमेशा अपनी javascript

30:40जहाँ पर body tag close होता उसके उपर अपने javascript लगाते हैं किसे लगाते हैं

30:44अपने javascript की फाइल की location या फिर अपने पास कोई cdn link के वो अपन यहाँ पर पास करते हैं

30:54तो जावास्किप का cdn link अपन लेकिया जाते हैं जल्दी से यह रहा introduction इसको मैं यहाँ से क्या कर लेता हूँ

31:03यह रहा अपने javascript का cdn link इसको मैं copy करके यहाँ पर लगा देता हूँ

31:07तो यह अपने अपना javascript का cdn link लगा दिया अप जैसे ही आप javascript लगाओगे तो आपका accordion यहाँ पर work करना शुरू हो जाएगा

31:15जैसे मैंने यहाँ पर javascript लगाई तो यहाँ पर आपके accordion यहाँ पर work करना शुरू हो जाएगे

31:20देखो कैसे मैं इस पर click कर रहा हूँ close हो गया इस पर click कर रहा हूँ इस पर click कर रहा हूँ

31:24अब देखो कई चीजे copy paste के काम नहीं अभी आपको इस code को सीखना नहीं इसने क्या code लिख रहा है क्योंकि

31:30javascript इसमें लगी भी है जावस्क्रिप्ट की भी यहाँ पर इसने id की basis पर target कर रहा है और उसको click करने पर उस सारा काम करवा रहा है

31:38बस अपने को तो use करना ना चीए अब देखो यहाँ पर इसने क्या कर रहा है समझना इस code को यहाँ पर इसने एक new ले रखा है जिसमें accordion item दे रखा है ठीक है इस तरीकी से बनावा है

31:47उसके बाद अगर आप देखोगे तो यहाँ पर लिखा हुआ accordion item 1 ठीक है तो अगर आप यहाँ पर आके चेक करोगे तो यह लिखा हुआ है अब ऐसे ही आप जैसे यह वाला बनाना चाहते हो तो सबसे पहले यहाँ से जैसे मालों में कोई यह बनाना है तो मैं इसको copy कर ल

32:17आप अलया देखे तुमरा आपर इसको आपके पेस्ट कर दिया तो अब आप चेक करो गिए तो आपने कॉंटेंट है यह अपने पास सेकेंड आ रहा है तो यहां पर आजाओ और शेकिंड का जो भी answer है वह यहां पर peniton करो कोई कर लूए और

32:47किस के अंदर लगावा है यह एक div ले रखा है जिस div के अंदर पूरा content अपना जा रहा है ऐसे थड़ की अगर अपन बात करते हैं तो थड़ अपन लगा देते हैं तो यहां पर थड़ को भी मैं copy कर लेता हूं और copy करके अपन यहां पर इसको paste कर देते हैं यहां से यहां तक �

33:17यहां पर आकर अपने तो यहां पर आपने पास यहां पर complete है, second, third, यहां ऐखर ज्यादा हो यह तो सिर्फ अपने तीन ही use करें में आपने और पास और यूज करने हैं, जैसे मैं आपर मूर पर आता हूं तो मूर में उपने पास होंगे, कुप सारे बने वे इसके तो यहां

33:47इस तरीके से भी आते है तो उनमें डिफ्रेंस है अपने पास ठीक है ऐसे ही अगर आप और देखोगे तो आप बहुत सारे बस कॉपी करके आपको यूज करना है अभी ही लिए इस कोड को क्योंगी कोई भी वेबसाइट अगर आप बना रहे तो कॉपी करके यूज करो फ्रे

34:17और अगर मैं यहां पर इस आइटम को देखोंगा यहां पर आओ यह तो बॉड़ी है जिस बॉड़ी के अंदर आपको पूरा कॉन्टेंट है लेकिन अगर आप यहां पर त्छोगे तो यह रहा आपका उडू बांद आइम तो यह तेनों ही तो है अपने पास अगर मैं को �

34:47पिष्ट कराओ आपने अपको फीष्ट में भी वोई है, नकल में भी अकल की जरूरत होती है, तो अपन देखते क्या है इसके अंदर, अगर आप इसको ओपन करके देखोंगे, तो तो यहाँ पर इस नहीं सारे चीजे दे रखी है, ठीक है, यहाँ पर देखो, और ठीक है, अ

35:17यहां पर चैंज करना पड़ेगा और चैंज क्या करना पड़ेगा

35:46अब देखो यहाँ पर इसने दे रखा है

35:48कोडियन हेडर, बटन कॉलैप्स

35:50ठीक है अब यहाँ पर इसने इसको

35:523 दे रखा है तो 3 के बेसेज पर 3 टारगेट हो रहा

35:55जावा स्क्रिप्ट के अंदर बस

35:56यहाँ पर आओ और इसकी क्लास

35:58पासचेंज कर दो आप यहाँ पर यह जो डेटा भी है

36:00स्टारगेट कर किसने दे रखा है इसको कर दो

36:024

36:04ठीक है

36:054

36:09यह मैं यहाँ पर दे देता हूँ

36:10इसको 3 की जगे 4 और यहाँ पर इभी

36:123 की जगे क्या कर देंगे 4 कर देंगे

36:14perfect ऐसे ही same

36:16यहाँ पर यह इसका content किसका show होना चीए

36:194 वाले का 3 वाले का show नहीं होना चीए

36:21तो मैं 4 वाले को यहाँ पर पास कर देता हूँ

36:234 वाले का content यहाँ पर show होना चीए

36:25ठीक है अब आके मैं चटक करता हूँ

36:27मैंने click करा

36:28अभी भी वही same हो रहा है

36:30को कहीं अपने missing

36:31कुछ चीज मिसिंग है, यहां पर देखा, आईडी आपने 3 कर रखी है, इस आईडी को भी क्या कर दो, और वहां पर जो आईडी है, वो क्या है,

36:394 कर दो इसको, ठीक है, तो यहां पर आखे अगर आप चेक करोगे, तो तो तो यह अपने पास अपने पास अपने यूज़ कर सकते हैं, जो अपने पास अपने यूज़ कर सकते हैं, जो अपने फेक्ट देखते हैं, उस तरीके से अगर अपने यूज़ कर दो, ठीक है, परफ

37:09नेक्स अपने आगे चलते हैं अपने यहां पर alerts के उपपर, alerts अपने पास जो अपने alerts आते हैं, जैसे आप किसी पी चीछ को डिलीट करते हो तो यह अपने पास एक message आता है, ठीके? वो अपने पास अपने alerts होते है, जैसे successfully delete इस तरीके से message आता है, वैसे ही अगर अपने को message �

37:39किसी भी चीज के click पर अगर आपको alert दिखाना है तो वहां पर अपने इसको use कर सकते हैं.

37:46ठीक है ?

37:47ये अपने पास कोई error का दिखाना है, यह warning का दिखाना है, ये successful का दिखाना है

37:52अगर अपने को गोज Content काई आपको

37:53कोई भी अपना एक्जाम्पल अलर्ट दिखाना तो उसके लिए अपन इसको यूज करते हैं परफेक्ट उसके बाद नेक्स अपन आगे चलते हैं अपने बैच के उपर बैच बीसी के लिए अपने पास जैसे नॉटिफिकेशन बेच आता है अपने पास ठीकर वैसे ही अपन

38:23यहां पर आता हूँ और मैं कहा देता हूँ where कर देता हूं और कंटीनर के अहां पर यहां publicly और यहांचंक वाले बटन को यह आ

38:53इन्बॉक्स वाला है, यहां पर create हो क्या रहा है, अब इसको customize करना है, तो customize करने के लिए बस code देखो, क्या code है, format करके ठगलो ताकि आपको code दिखती रहे,

39:00इन्बॉक्स लिखावा है, यह किसके अंदर लिखावा है, बटन के अंदर, अगर आपको इन्बॉक्स ना करके आपको कुछ और रखना है, जैसे मैं कह देता हूँ mail, तो मैंने mail कर दिया, तो वहाँ पर content change हो जाएगा, हमाँपर, क्या लिखावा जाएगा, mail, आपको color change करन

39:30हो जाएगा, secondary हो जाएगा, ठीक है, यह अपने पास अपने badges आ रहे है, यह badges 99 plus message अभी तो इस तरीके से आ रहा है, जैसे मैं यहाँ पर कह देता हूँ, 99 ना करके मैं कह देता हूँ, कि अपने पास 5 अपनी mail IV है, तो यहाँ आपर ही तिकातेगा कि total कितनी IV है, 5 mail IV है, इसका

40:00जैसे ही अपन BG success लगाएंगे, तो इसका background color क्या हो जाएगा, ग्रीन हो जाएगा, इस तरीके से अपन चेंज कर सकते हैं, और यहाँ पर unread message इसने एक span tag देके, यहाँ पर इसको hidden कर रखा है, ठीक है, वो unread है, वो show करवा सकते है, अगर अपन यहाँ पर इसको show करवाना �

40:30अपने बटन की size के लिए अपन लगाएंगे, एसम यहाँ पर एक button की size के लिए अपन LG देते है, SM यहाँ पर एक button की size यहाँ पर decide कर गया, small,

40:58LG देखो, दो होगे तो यह large button यहाँ पर, उसकी size यहाँ पर define करेगा, ठीक है, फिर उसके बाद button group, अगर आप group के अंदर button मनाने हैं, जैसे ही, ग्रूप के अंदर left, middle, right, यह तीन बटन यहाँ पर इसने मना रखे, तो सबसे पहले आपको एक div लेना है, उसके अंदर सारे buttons

41:28जैसे मैंने यहाँ पर कह दिया one, ठीक है, one, और ऐसे ही मैं यहाँ पर कह दिया तो अपना two, और, ऐसे ही मैं यहाँ पर कह दिया तो अपना three, तो मेरे पास यहाँ पर तीन buttons आने वाले, अब भी normal buttons अपने पास यहाँ पर आने वाले, अगर आप देखोगे तो तीन बटन आ

41:58in change करना हूँ आप करी सकते हूँ आप पता ये class आप लगाूगे बीटी एन इन बीटी एन मैंने यहां पर कह दिया इसको

42:04डेंजर दे देना ठीक है ऐसी इसको class लगा नहीं है तो यहां पर अपन class लगादें ज़िए और मैं कहुंगा

42:09के वाले बनाने हैं तो यह भी बना सकते हैं इस तरिकी से अगर अपने को बटन्स बनाने हैं तो उसके बाद काड अगर अपने को यहां

42:37इस ने पर आपने Cards रख आ रिका है, जैसे आफ देखते हूं, अपने Cards बने में आते है, पहले से इसने Cards बनारके है, आप बना भी सकते हो तो इसने यहाँ पर classes ही लगा रख़िए Cards को create करने के लिए, तो वही classes रखाए है अनो कुझा को whी बना सकते हैं,

42:53बना सकते हैं

42:54जरूरे नहीं है

42:55कि अपन

42:56कोपी पीस्टि करें

42:59पर कुछ भी मतलब करें

43:00तो इसने यहाँ पर सबसे पहले

43:02एक डियू ले रख़ा जिसको

43:04काड क्ला्स दे रखिए और जो

43:07काड के अंदर data है। काड को

43:09काड के title को यहाँ पर

43:10कार्ड का जो अपने पास यहाँ पर paragraph है उसको यहाँ पर कार्ड text class दे रकिए और button को तो button class दे रकिए इसने तो यहाँ पर इसने क्या कर रखा है अपना

43:20काड यहाँ पर अपना create कर रखा है

43:23ठीके तो अगर अपने को काड़ बनाने तो उसके लिए है

43:27ठीके यहाँ तक की चीज शमझ में आई के आप सभी को

43:36यहाँ तक की चीजे समझ में आई के थोड़ी बहुत जो मैं आपको समझाना चाहा हूँ

43:50झाल झाल

44:20सबसे इजी चीज है ही तो

44:34यूजी गेमिंग के रहे हैपी मकर सक्रांती सर एडवांस में

44:37आप सभी को भी हैपी मकर सक्रांती एडवांस में

44:50इसे ही अपने पास अपने कार्ड यहां पर आते हैं जैसे ही कार्ड मेरे को यहां पर यूज करना है तो इसको यूज कर लो

45:07जैसे ही कार्ड लगाना चाता हूँ मैं अब मैंने यहां पर कॉल एमडी टू का लिया है ऐसे ही मैं यहां पर एक और कॉल एमडी टू ले सकता हूँ

45:14क्योंकि total 12 होते तो equal ले सकते

45:15इसी रूप के अंदर मैं यहाँ पर कहते हूँ call

45:17md और मैंने यहाँ पर two का ले लिया

45:19और इसके अंदर मैं एक card लगाना चाता हूँ

45:21तो यहाँ से इस card को क्या कर लो

45:23copy कर लो यहाँ ही card मैं यहाँ पर use करना चाता हूँ

45:25जैसे तो यहाँ पर इसको copy कर लो और copy करके यहाँ पर

45:28इसको use कर लो ठीक है तो यह card यहाँ पर अपना use हो जाएगा

45:32जो लो मैंने इस card को लगा दिया तो यह card अपने पास इस तरी किसे

45:35आ जाएगा देखो यहाँ पर यह card आ रहा है इस card के अंदर image लेगी भी है

45:39जैसे मैं यहां पर कोई भी एक image ले आता हूं, ठीक है?

45:49ठीक है? यहां से अपर कोई भी एक image उटा लेते है जैसे यह image है

45:52मैं यहां से कलते हैं copy image address और इस image को अपन कापे लगाएंगे

45:57तो यहां पर इसने image tag ले रखा है, इस में SRC को blank रखा है

46:01यहां पर इस image को लगा दो तो वह image वहां पर उस card के अंदर लग जाने चीए

46:04तो देखो वह image इस card के अंदर apply हो गई ठीक है तो यह card अपने पास इस तरीके से आ रहा है

46:10अब देखो इसको इसमें विर्ट विर्ट दे रखी इसको मैं remove कर देता हूँ

46:16अपन कुछ से भी customize कर सकते हैं अगर कुछ से customize करना चाहते हैं इस card को इस तरीके अपने पास पूल समधर करके यह card अपने को इस तरीके से शोग रहा है

46:24ठीक है तो यह अपने पास अपना card है जो अपने आपर create करा image अगर आप change करोगे तो वह automatically card भी shift हो जाएगा आपका जैसे मैं इसको करता हूँ copy image address ठीक है और इस image को यहाँ पर लगाते तो यहाँ पर अपने इस image को लगाते है और यहाँ पर आके चक करते तो यह अपने पा

46:54और यहाँ पर अपना content लिखना है जो भी content है वह यहाँ पर content लिख दो Lorem करके जैसे मैंने यहाँ पर content past कर दिया go somewhere करके जैसे मैं यहाँ पर कहता हूँ कोई बहते अपना यहाँ पर कहते जैसे

47:05मैं कहता हूँ More Info

47:09More Info का यह बटन है

47:12तो मैंने More Info कह दिया

47:13BTN Primary ना रखे मैं यहाँ पर कहता हूँ

47:15कि आप Danger रखना

47:17इसका ठीक है

47:18बटन का Color क्या रखना

47:20Danger रखना तो इस तरही कि सबका Card

47:22यहाँ पर Customize हो जाएगा

47:23तो आप Customize कर सकते हो

47:25और भी बहुत सारे Cards यहाँ पर बना रखे

47:26अगर आप Explore करोगे तो आपको बहुत सारे Cards

47:29यहाँ पर दिखाई देंगे

47:29बस Explore करना पड़ेगा आपको कि कौन-कौन से Cards

47:32यहाँ पर इसने बना रखे है

47:33जैसे यहाँ पर Featured करके एक Card बना रखे है

47:36अब यह तो पूरा इसने दे रखा है

47:37इसका मतलब आपको

47:38Total अगर 12 के इसाब से रखना है

47:40तो इसको भी रख सकते हो आप

47:41ठीक है तो यह तो पहले से लिखावा Code है

47:44जो करने यहाँ पर यूज़ कर सकते है

47:45Pre-return Code है

47:46ठीक है

47:47इस अगर अगर अपन Pre-return Code यूज़ करना चाते है

47:52तो उसके लिए यह अपने पास अपना सॉल्यूशन है

47:54परफेक्ट

47:57यहाँ तक की चीज़े किलियर है आप सभी को

48:00आदित्य करें कि सर्थ JS कभी स्टार्ट होगी

48:07अपनी जावा स्क्रिप्ट स्टार्ट होगी

48:08बूट स्टार्ट कम्प्लीट होने के पात

48:10एक बार यूज़ करिए

48:12गैप की यह हो रहा है या नहीं

48:15तो को करते हैं एक निट

48:16रभी करें हैं हैपी लोहरी सर

48:18आप सभी को भी हैपी लोहरी

48:20मिकर सक्रांती है कल

48:25और कल भड़िया पतंग उड़ाओ सभी

48:28पतंग उड़ाने का दिन है

48:29आपके सर को तो शोक है पतंग उड़ाने बहुत जादा

48:32ठीक है

48:34और कल कर hilft ही बढ़ाएंगे

48:36शोक है लेकिन यह भी है की

48:38हातों की भी थोड़ी सी द्यान रखना पड़ेगा

48:47अगर जैब कर जाएंगे

48:50पिर हाथ कर जाएंगे तो सर्दियों में फिर हाथ अच्छे से काम नहीं करते हैं

48:53अप सभी को भी हैपी मकर सक्रांती पर या मजे कीजिए कर

49:00अधिते करें सर जल्दी जल्दी इसको खतम कर दीजिए फिर जैस होगी यह पिल्कुल इसके बाद जावास्क्रिप अपन पढ़ने वाले है

49:08सर जिनको पतंग उड़ानी नहीं आती वो क्या करें देखो जिनको पतंग उड़ानी नहीं आती उनके लिए जो अपनी चर्की होती है वो चर्की पगड़ सकते है जिसमें

49:20बंजाने पुड़ा ठीक है वो काम कर सकते है जिनको पतंग उड़ानी नहीं आती या फिर

49:2614 जो अपना

49:28मक्र सकरांती होती है

49:29उसमें पता नहीं सब जिके

49:31अलग-अलग चीजे होती है

49:32हमारे इदर का बता रहूँ मैं

49:34दिल के लड़ू बनते अच्छे अच्छे पकवान

49:36बनते तो उसके खाने के उपर

49:38फोकस करो उसके लगव

49:39music system भी लगा के लगते हैं सब

49:41music system में गाने भी चलते रहते हैं

49:43तो गाने enjoy करो

49:44बहुत सारे गाम होते हैं अगर पतां उड़ानी नहीं आती तो भी

49:47और अगर सारे friends एक साथ मिलके हैं

49:51तो बढ़िया enjoy करके

49:53dance करो गानों के उपर

49:54ठीक है तो

49:57तो बहुत सारे options से अगर पतंग उड़ानी नहीं आती तो

49:59और अगर फिर भी नहीं आती तो किसी से आप पतंग को लंबी दिला सकते हो

50:04फिर उसके बाद आप उड़ा सकते हो उस पतंग को

50:06बस उसमें terms and condition यह है कि आपकी पतंग कटने वाली है

50:10और जिसको उड़ानी आती है उसके लिए बहुत बड़ी बात है अगर उसके पतंग कट जाये तो

50:16जैसे मैं कोशिश करता हूँ कि अगर मैंने पतंग लंबी दी है तो फिर उसके बाद तो जितना

50:23जितनी पतंगे मैं काट सबता हूँ, उतना साफ कोनी की कोशिश करता हूँ, आसमान को, बागी एक दिन ही उडानी चाहिए, क्योंकि पक्षियों के लिए सही नहीं रती, जो यह होता है वो, ठीके तो एक दिन काफी इंजॉय के लिए, बागी दिन उनके लिए ही रने देने �

50:53हैं कि दोई दिन का बूटकेंट है जिसके अंदर अपन कंप्ट्रा कमप्लीट मांस्ट्रेगत्र में आपको बताने वाला हूँ, क्प्लीट मांस्ट्र तेक्मालोजी जिसमें जो-जो चीजेंड होगी वो बताओं हुड़ा सारी उसके अलावा अपनोनी प्रोजेक्ट्र �

51:23वर्डप्रेस की क्लास कब होगी, वर्डप्रेस की क्लास अपनी नहीं होती, वर्डप्रेस की क्लास अपने जो डिजिटल मार्केटिंग के विश्वास से हैं, वो लेते हैं, वर्डप्रेस पढ़ाने की क्लास, वर्डप्रेस अपने वाइब डिलेपेंट में नहीं आता है।

51:53को, अपनी 14 को class नहीं है, और attendance के points तो मैंने बताएं नहीं तो मैं attendance के points भी बता दिता हूँ, attendance के point 1 के अंदर आपको mention करना है, और वो mention करना है, cards, attendance के point 2 के अंदर आपको mention करना है, इसमें तो cards mention करना है, attendance के point 2 के अंदर आपको mention करना है, बटन,

52:23यह अपने attendance के point one and point two है

52:26जो आपको fill करने है

52:27ठीक है

52:29ठीक है गाइस

52:35तो आज की class इतनी ही मिलते हैं

52:37फिर अपन अपनी next class के अंतर

52:39बाई बाई everyone and take care all