Day - 30 | 💻 Bootstrap Utilities & Icons Explained

Name: Day - 30 | 💻 Bootstrap Utilities & Icons Explained
Uploaded: 2026-01-08T07:14:39+00:00
Duration: 53 min 39 s
Channel: skillwaala

skillwaala

5 weeks ago

👨‍💻 What You’ll Learn in This Class:
✅ What are Utility Classes in Bootstrap and why they’re important
✅ Using utility classes for margin, padding, colors, text, display & alignment
✅ How to create responsive layouts using Bootstrap utilities
✅ Introduction to Bootstrap Icons and how to install them
✅ Real-time coding demo and best practices

GitHub url :-
https://github.com/DevanshuSir/Full_Stack_Skillwaala_17nov_2025.git

Assignment url :-
https://drive.google.com/drive/folders/1xReCWLRl6WwNvOBH7lcC_XoPG_ma2EdM

Category

📚

Learning

Transcript

Display full video transcript

00:00अलो वाइज गुट इवनिंग आवरिवन गुट इवनिंग रवी अधित्या सिभूल सूरज अशीश

00:11अशीश

00:21अशीश

00:29अशीश

00:46अशीश

00:49अशीश

00:54कि एक बार सब रैस्पांस कर दो कि मेरी वाइस किलियर है और डिस्प्ले भी विजीबल है आप सभी को अपना आजाते अपने विए स्कूर के उपर और जिस फोल्डर बेपन काम करते हैं उसी फोल्डर बेपन है ठीक है इस वाइल को मैं डिलेट कर रहता हूं इंपार के लि�

01:24अधित्य करें की वोईस प्रेक सर्गेस बड़ सम्वाइस इशू होड़ा है ठीक है एक बार में चैक करता हूं वीडिय मिनट वीडिय मिनट गाइस

01:52प्रेक जसते हैं जस्वाइ करते हैं वाइस

02:22अब एक बार सब response कर दोiaswork क्रियर है और display दो visible एंभी

02:39एक बार सब response कर दो sowie____ कुर अब को issue नी आँ रहाँ वैस मैं

02:52इंग

03:14इंग

03:16स्टार्ट करते हैं

03:26अबρώ dikket कर रहे थे अपने Chrome rename

03:34सेट अपर करना हुआ

03:40यहां पर करते हैं जैसे मैं यहां पर आता हूँ और यहां पर आके अपन सर्च करते हैं अपना

03:46चिलिए लिरॉट इसको किस तरीके करो करेंगे अगर शिरियंग यहां पर इसको यूज करेंगे तो यह अपना सीरियल लिंक

04:10इसको अपने हैटेक में लगा रहते हैं, डाउनलोड करके भी इसको यूज कर सकते हैं, ये चीज़े अपने देखी थी, अब आते हैं अपने यूटीडीटी वाले सेक्षन पर, हाला कि सारी प्रोपरटीज अपने देख रखी हैं, जो भी प्रोपरटीज सब अपने डिसकस क

04:40क्लासेज याद रही ही इसकी, ठीक है? अब देखो, अपने देखते हैं, बैग्राउंड की कौन-कौन से अपने पास क्लासेज आती है, एक ही चीज़ से अपने स्टार्ट करते हैं, अब अपने देखा था कि अपने पास जो कलर ओप्शन है, वो कितने थे अपने पास, टो

05:10क्या होती है अपन बेसीक से चल रहे हैं इसलिए जो इंपोर्टेंट है वो सारी चीजे मैं इसमें अभी बताऊंगा जो रिमेनिंग रहे हैंगी वह आप ओटोमेटिकली आगे कहीं ने कहीं डिसकस हो जाएगी ठीक है कई चीजे जो जावस्क्रिप्ट से रिलिटेड हैं जी

05:40यह API अपने पास जो portion है इसको मैं भी के लिए skip कर रहा हूँ ठीक है चलो भाई अपने को सिर्फ अपना front end का जाना है भी HTML और CSS का क्योंकि अपने HTML CSS ही बड़ी है अब देखो background color अपने पास कहके आते background color की जो अपने पास class है वो अपने पास है bg फिर उसके बाद hyphen करके आ

06:10इस इस की code पर मैं को क्या करना अपना background color देना है तो मैं इस file को यहाँ पर run कर लेता हूँ

06:15इस फाइल को अपनरन कर लेते हैं इंडाइस.html को अब यह वाला जो अपने पास अपना एट्वेंट है इसको मैं को बैग्राउंड कलर देना है तो मैं यहाँ पर क्लास टिकूँगा मैं लिकूँगा बीजी हाइफन जो भी कलर आपको देना है जैसे मालू मैं यहाँ पर कल

06:45देखो bg1 यह क्लास है अपने पास ठीक है यह क्लास अपन यहाँ पर अपने बैग्राउंड की है ऐसे ग्रेडियन्ट की भी अपने को यह क्लास देता है देखो कैसे यूज करना है bg प्राइमरी दिया और bg प्राइमरी में आपको क्या करना है gradient करना है तो उसके लिए अ�

07:15लगाओगे तो इस पर gradient वाला एकडाई हो जाएगा जैसे अपन लगागे देखते में इसके उपर लगाता हूं वार्निंग में ज्यद्न नहीं हो रहा तो और यहां पर आके लगाते है अपना सक्सेस में bg सक्सेस लगाता हूं और यहां पर आके आप चेक करोगे तो तो �

07:45पर अगर आप 25 करोगे तो 50% होगी और अगर यहां पर देते हो 100 तो 100 तो बाइड़ ओसकी उपर टीक है जैसे मानलों पर मैं इस पे 50% अपीशिटी लगाना चाहता हूं तो मैं लिखूँगा bg-

08:04हाइफन ओपेसिटी बगा हूँ ठीक है। मैं ही यहाँ पर करना चाहता हूं तो मैंने यहाँ पर नाया पर आपको टार्सपेरेंसिया पर जदेट हो रही है।

08:08फिर इसके बाद नेक्स अपन आते हैं बॉर्डर वारडर की क्रीएट करते हैं।

08:23करतें क्या क्लासेज होती है अब देखो बॉर्डर की क्लास बॉर्डर आप लिखोगे तो उस

08:30element की उपर और डायरेक्शन पर बॉर्डर क्रियेट होगी अगर आपको टॉप की

08:34की की करने है तो आप देखोंगे बॉर्डर अगर अंड मतलब यहां पर राइट साइट करनी है और अगर

08:42स्टार्ड मतलब लेब साइट करनी तो बॉर्डर स्टार्ट आप कास करोगे तो फिर्षप करते किसी बी

08:48इस paragraph tag पर मैंको बॉर्डर लगाते हैं तो मैं justShould करूँ आ?

08:52यहाँ पर आके पर लिखेंगे बॉड़र मैंने सिफ बॉड़र लिख inequality हो जाए है यहाँ पर अपने पास घ्लि माझे ऑपर अपने पास आप रिएट हो गई

09:14बॉर्डर की तिकने बढ़ा जाते हो ठीक है तो यह रही अपने पास वाल्डर अग्र आप 0 देखो तो जी तो इनिशिल है जो अपने पास है ठीक है फिर अपने पास अगर आप यहांपर देखोगे इसने दो पर कहां पर दे रहाएँ यह वाली निम्या

09:27स्कॉल वरो स्कॉल वरो स्कॉल वरो कहीं तो दे रखिया हुए इसने बॉर्डर की वेल्यू यह तो कलर दे रहे हैं बॉर्डर का कलर आपको क्या पास करना है

09:44ठीक है ठीक है यह रहा देखो बॉर्डर की वेल्यू वन है तो यह ऐसे क्रियेट होगी टू पे यह है थ्री पे यह है फोर पे यह है फाइव पे यह बस वन से फाइव तक इसकी वेल्यू उदी है

10:07जिसे मैं यहां पर आता हूँ मैं लिखता हूँ कि आप इस पर बॉर्डर फॉर वाली क्रियेट कर देना तो इस पर बॉर्डर जो है इंपर और चींज एफ बॉर्डर चाले और क्रियेट हो

10:30जाएगी

10:37सर फिर से वह हो रहा है सर थोड़ा थोड़ा एक बढ़ सब रिपेशा इस सीट का कि वह इसका इश्यू आ रहा है एक बढ़ सब रेस्पोंस करो कि वह इसका इश्यू आ रहा है या नहीं आ захơ

10:48कुछ करें हो रहा है यहस वोइस ब्रेक ठीक है

11:10यह सर प्रेक होता है थोड़ा थोड़ा

11:34ठीक है चलो मैं काम करता हूँ मैं क्लास को वापस से जोइन करता हूँ

11:38आप यहीं पर बने रहो मैं क्लास वापस से स्टार्ट करता हूँ

11:41ठीक है यहीं बने रहना है किसी को लैप्ट नहीं करना मैं लैप्ट हो रहा हूँ इसे

12:08अब वोइस क्लियर आ रही होगे मेरी शायद अब एक बार रैस्पंस कर दो भी वोइस क्लियर है

12:24अब आपने वियस कोड की उपर और यहीं चुछी यह पन देख रहे थे उसी पर आपन वापस आ जाते हैं

12:35मैं यह हां पर आ जाता हूं वर फूट सय पकर लेकित उपने रखुकियों अब

13:00वारी होगी बिल्कुल perfect ठीक है तो देखो यहां पर अपने पास जो बॉर्डर की

13:10TM बॉर्डर की प्रॉपर्ट्टी वो क्या-क्या है अपने देखा बॉर्डर करनी है और वन से लेके 5 तक यह value

13:17यह बात होगे अपने पास किस चीच की अपने बॉडर के उपर नेक्स अपने आगे चलते हैं बॉडर की अपने पास क्लासेज आती है जैसे अगर आप यहां पर देखो कि स्क्राओल करके यह डारेक्शन वाइस बॉर्डर बनानी है तो टॉप एंड बॉड़म स्टार्ट ट

13:47इस उपने पास कर सकते हूँ जैसे इस इन्पूट के उपर बॉडर किरीट करी तो उसने यहां पर लगाया बॉडर सक्सेस तो नेक्स अपने पास कलर

14:10प Sounds कर सकते हो वे उसके बाद ने grands आ आगे चलते हैं यह häuf इसपले-दिश्पले की प्रोपर्टिंज़ पर ने पड़ी थी भी छी लिस्पले आप ब्लॉग कर सकते हो ठीक है इस्पले आप

14:17अब देखो display की properties अपने पड़ी थी, display properties अपने पास कौन कान से थी, display आप block कर सकते हो, ठीक है, display आप inline कर सकते हो, inline block कर सकते हो, ठीक है, display flags था, अपने पास display grid था, वो सारी properties यहाँ पर अपने पास class के रूप में, देखो, अगर display null लगाना है तो none है अपने पास, inline लगान

14:47अब पेको अगर में को यहां पर display लगाना है तो मैं लिखूँगा डी-

14:50इन-फन इन-फन जीग है जैसा अपन यहां पर आते हैं इसी file की उपर और इस file को मैं आपर run करता हूं

14:57इलो अब में को क्या करना है यह मेरे पास मेरे enrichment यह यह क्या है यह ब्लॉक लिएवल

15:01है मेरे को करना है इसको इन्लाइन करना है मैं यहाँ पर क्या लिखुँआ इस पर लिखंगा अधि-हर फिर उसके बाद में है यहाँ थो कर

15:11कि इसमें लाइन में तो जैसे मैं डिस्प्ले लेगा तो नीटो किनमर्ड हो जाएगा

15:15जैसे अपने यहां पर आते हैं, एक और अपन टैग लेते हैं, मैं यहां पर एक अपना

15:21spend टैग लेता हूं और उसमें अपन लॉरेम करके 10 का content देते हैं, तो अपने पास अपना

15:30spend टैग आ रहा है, अब इसके उपर मैं लगा तो अपनी display property, सबसे पहले इस पर

15:35background color लगाना है, तो अपने यहां पर लिखें class, मैं लिखा bg, और bg करके मैं इसके उपर color देता हूं जैसे info, ठीक है, bg info color मैं नहीं आपर

15:44इसके उपर दे दिया, तो यह info color रिस पर हो गया, अब d क्या है अपने पास, यह inline element है, अगर block में

15:49convert करना है तो आप यहां पर क्या लिखोगे, d आइफन, फिर उसके बाद अपन यहां पर लगाएंगे अपना block, तो यह अपना block level element हो जाएगा, अपना

15:58पर देखा जाएगा, तो यह अपने पास display inline dog, यह सारी चीज़ अपने पास यहां पर आती है, तो यहां पर display, display की properties ही है, यह अपने पास जो अपने यहां पर देख रहे हैं, तो अपने देखा था, डिस्प्ले

16:14flags अपने पास होता है, फिर उसके बाद उसके अंदर अपने पास अपनी और values आती है, अब देखो यहां पर SM, SMMD, यह बहुत सारे breakpoints है, यह मैं आपको आगे बताओंगा breakpoints क्या होते हैं, अभी के लिए सिर्फ अपन यहां पर अपनी display flags देख रहे हैं, तीक है, जैसे अग

16:44इस div के अंदर मैं यहां पर div ले लेता हूँ, मैंने तीन div ले दिये, और इसको मैं यहां पर कह देता हूँ box 1, ठीक है, इसको मैं यहां पर कह देता हूँ box 2, और इसको मैं यहां पर कह देता हूँ box 3, ठीक है, तो यह अपना main div है, उस main div के अंदर अपने div ले ले लिए, अ

17:14गाले टीगर हैं तो इसकी वी जैसे में बार्डर लगा था क्लास

17:19बोलना अंहें जो बनेगी वह возenda बनेगी यहां पर सक्सेस वाली और जो

17:30स्� fly RW is the signing और थे कैसे अपने किस पर बोला जो एसी सैकेर घर और

17:42पर भी लगा देता हूं और यहाँ पर यहाँ पर हिता हुआ बूब बने यहां पर

17:44लगाते हुए तो ओ непर सूब हो जाना जैंडर यह इसको साथ कि अपने पास पास रहा जाते हो तो आपकि

18:03सब्सक्राइब 뭐 यहां पर अगर और आपकर चैक करोगे तो इसमें deeply

18:11सेंटर भी आपकी प्रोपर्टी यह हूग यह ग्लास होगी देखको यह रही justify content अब इसमें आपको कहां पे रखना है इस्टी फाइब

18:18content स्टार्ट मतलब left side justify content end मतलब आपका सबसे right side justify

18:24content सेंटर में जाएगा between between मतलब सबकी बीच में spacing हो जाएगी जिसे में

18:29बिट्विन लगाता हूँ, justify content between, ठीक है, किस पर लगाना है, parent भी लगेगा, तो इस पर लगा देते हैं, पर justify content between, तो जैसे आप बिट्विन लगा होगे, तो वो सब की बीच में एक एक spacing हो जाएगी, ठीक है, तो यह easy है अपने पास, align item अगर अपने को, अपने items की बीच में

18:59अपने कुछ discussion नहीं किया, क्योंकि अपन ब्रेक पॉइंट और grid उस पर पूरा discussion करेंगे, एक साय, ठीक है, कि मतलब bootstrap का grid system क्या होता है, किस तरीके से अपन अपने

19:10WhatsApp में एक responsive layout अपना ready कर सकते हैं, उसके बाद आता है अपन float की उपर, float अपने देखा था कि अगर किसी भी element को left या right float करना है, तो उसके लिए अपन यहाँ पर अपने float को use लेते हैं, किसी भी element को left या right अपने को float करना है, वैसे तो flag से काम हो जाता है अपना, लेकिन अपने

19:40अपने पास इस साइड तो पुरा content आ रहा है, और इस साइड यह box आ रहा है, यह जो box बना जिसमें image आ रही है, ठीक है, यहाँ पर कोई भी एक article चला लेता है, पन जैसे मैं यहाँ बराता हूँ, और मैं किसी चीज पर article चला लेता हूँ, जैसे अपन कहते है,

20:01web development, ठीक है, इसको उपन मैं यहाँ पर इसको उपन करता हूँ, तो अपने वास को चीज चीज को उपन करता हूँ, जैसे यह मान लो कि इस साइड तो अपने पास

20:27left side content आ रहे है, right side अपने पास ही पूरा अपना यह box बनावा रहा है, अब यह कैसे करेंगे, तो यह float की दुरू होता है, float मतलब किसी भी element को left यह right अपने को float करना है, तो उसके लिए पर यूज लेता है, जैसे मान लो कि यहाँ पर example से समझते हैं, मैंने एक paragraph tag लिया और उस

20:57folder बना देता हूँ, ठीक है, इस media के folder में पर image ले आते हैं, कुछ भी,

21:04download में आओ, और यहाँ से कोई भी image ले लो,

21:13यह जैसे यह image है, इसको मैं यहाँ पर ले लेता हूँ,

21:17ठीक है, यह image में यहाँ पर लगानी है, मैं यहाँ पर image लगा रहता हूँ,

21:27किस में रखी वी है, media में, और ux.png करके अपने पास अपनी image है,

21:31वोपन यहाँ पर लगा रहते हैं, तो देखो, मेरे पास यह content आ रहा है, ठीक है,

21:35और इस content के बाद इधर image आ रही है, image को थोड़ी सी छोटी कर लो,

21:40यहीं पर आप क्या लगाओगे, width, और मैं कहा देता हूँ, 100 pixel ही रखो आप इसकी width,

21:47ठीक है, एक fix width में यहाँ पर देता हूँ, 100 pixel, तो भी इमेज छोटी आ रही है,

21:50अब मैं चाहता हूँ कि image यहाँ पर right side है, या फिर image अपनी left side है,

21:55तो वो अपने float की थोड़ सकता है, float start करोगे तो अपकी image कहा चली जाएगी, start में चली जाएगी,

22:00जैसे मैं यहाँ पर आता हूँ, इस पर लगाता हूँ, float start, ठीक है, किस पर लगा रहा हूँ, अपने image की उपर,

22:04तो यहाँ पर आके पर लगाएंगे अपनी glass, ठीक है, और glass लगा के मैं यहाँ पर क्या लगा दूँगा, float start,

22:10तो आपकी जो image है, वो start में चली जाएगी, ठीक है, आप चाहते हो, end में चली जाएगी, तो मैं यहाँ पर कहता हूँ,

22:16कि आप इसको float क्या कर देना, end, end मतलब right side, तो मैंने इसको गए दिया, float end, तो आपकी image यहाँ पर कहा चली जाएगी,

22:23content बढ़ता जाएगा, तो जिसके content अपन बढ़ाते हैं, मैंने बुला, lorem करके यहाँ पर 50 का content ओर दे तो, तो वो image automatically सही दिखेगी,

22:31ठीक है, तो यह image अपने पास कहाँ पर जादी है, अपनी right side यहाँ पर जादी है, परफेक्ट, ठीक है, या फिर यह जो अपने float end लगा है, इसको यहाँ ना लगा के,

22:43इमेज पर ना लगा के, जैसे मैं paragraph tag के उपर ही लगाता हूँ, मैंने paragraph tag के उपर ही लगाती है, ठीक है, तुदे को इस तरीकी से अपने पास यह image अपनी arrange हूँ किया रही है, यह काम आती है, किसी भी element को set करने के लिए, यहाँ पर इमेज ही है, यहाँ पर, किसी image पर लगा

23:13जो border बनाओगे, वो आप 3 की बनाना और जो border है, उसका color आप यहाँ पर जैसे danger करें, ठीक है, यह चीज मैंने यहाँ पर पास करीब, यह image इसके बाहर कैसे जा रही है, रुख को एक मिनेट,

23:27क्लियर की क्या ग्लास थी, फ्लोट, लैप्ट, राइट, यही अपने पास, क्लियर की ग्लास नहीं बतारा गई है,

23:57क्या तो एक काम करूँ, content से पहले ले लो, इसको, इस paragraph tag के अंदर, content से पहले ले ले दाओ image को,

24:08कि उस सही से सैट हो क्या जाए, यह content से पहले ले लो उसको, जो यहाँ पर अपर अप्टमेटिक ली left right arrange हो क्या रही है, मैं float end करता हूँ, तो end में चली आएगी,

24:17और अगर मैं start करता हूँ, तो start में आ जाएगी, content उसे साब से अरेंज हो जाएगा, तो यह अपने पास अपने float होता है, अगर किसी भी element को left right shift करना है, तो यह अपने पास आता है, अपना interactions,

24:34interactions के अंदर अपने पास देखो, यह क्या क्या चीज़े है, text selection, अगर अपन टेक्स selection की बात करें, चीक है,

24:42interaction, इसको रहने तो अभी के लिए, यहाँ पर देखो, cannot be clicked, मतलब अगर अपने को यहाँ पर यह class लगानी है,

24:55यहाँ पर जो आपका एंकट है, वो नन हो जाएगा, ठीक है, अगर आपको यहाँ पर auto करना है, तो वो अपने पास clickable होगा, और इस तरीके से अपने पास यहाँ पर आने वाला है, ठीक है, इसको रहने तो अभी के लिए, अपने बाता है, अब देखो, अपने पास अपन

25:25होगी, 25% होगी, ठीक है, जैसे आपको 50% opacity लगानी इस paragraph टैक पर, तो आप यहाँ पर क्या बोलोगे, आप बोलोगे opacity और आप बोलोगे 50, opacity 50 करते ही, इस पर opacity जो है, वो 50% यहाँ पर apply हो जाएगी, इस तरीके से, ठीक है, तो यह बात होगी अपने पास opacity की, overflow, overflow पन पढ़

25:55सबसे पहले, sizing देखो अपने पास, यहाँ पर क्या है, width और height set करने का, अगर किसी भी element की width और height set करने है, जैसे आपको width 25% करनी है, तो आप लिगोगे, width 50, 75%, 70, और अगर 100%, 100, auto यहाँ पर auto generate हो जाएगे इस पास, height की लिए भी same concept है, यहाँ पर, ठीक है, height की लिए भी अप

26:25यहाँ पर एक box अपना बना लेता हूं, ठीक है, मैंने box बनाया, और इसकी width और height मैं यहाँ पर site करता हूं, width मैंने बोला कि आप width क्या कर देना, 50, और height जो है, वो आप यहाँ पर क्या कर देना, इसकी 50 कर देना, perfect, उसके अलावा, मैं यहाँ पर lorem का content ले लेता हूं, और lore

26:55sustainable поговорant, stream content bag, और मैं इसकी height change करता हूं, height यहाँ पर क्या दिया, 50%, मैं कहता हूं, height आप 25 ही लगा, इसकी, तो height को मैं यहाँ पर क्या क्या क्या करता हूं, 25.

27:09ग. मैंने height क्या क्या दी, 25 क्या दी, तो�서 यहाँ पर अपने पास सकी height क्या हूं मैं पिक्या नीची 25.

27:15है है है है है है है है है है है है है है है यहां पर आओ और इसको टार्गेट करो

27:29हाइट कैसे चेंज नहीं हुड़ी है अच्छा हाइट के लिए फिर अपने को यहां पर अपना इन्लाइन

27:52पड़ेगी फिर उसके बाद है चेंज करने पड़ेगी जैसे मैं चेंज गरना जाता हूं तो सबसे पहले में लाइन

27:57देना जाते हुँगा उस पिक्सल के अंदर आप कितनी हाइट देना जाते हुग आपको पास करना पड़े जैसे यह डिव है

28:04पर मैं अपनी स्टाइल लगाता हूं इनलाइन सी एसस और वहां पर मैंने लिखा अपनी हाइट चीक है वह नहीं आपको बता था अपन पूरी हंड़ेड परसेंट फूट्सेव यूज़ नहीं करते हैं

28:13प्रसेंट परसेंट 3 परसेंट अपने को अपनी सी एसस भी यूज़ करनी परती है मैंने हाइट लगा यहाइट मैंने की सब्रसकिया इसकी हाइट करते हैं

28:29कि अपनियां पर अप्लाइ करती है तिक है अब वो उसके अंदर हाइड जो है वो

28:33आप यहां पर जैसे स्वैंटिफाइफ आप इसकी हाइड यहां पर करके रखांगे

28:41हिसको यहां लाओ यहां लाओ यहां पर लगा ओ इनलाइन सी से

28:46पेले रगा दो इसने एलिमेंट को दे रखी हाइट और उसको हंड़ेट इसकी अंदर जो चाइल्ड है उनको हाइट यह दे रहा है

29:00कि है कि हाइट कैसे वर्फ नहीं करें इसको हटाओ इन लाइन वाली को हैट अपने क्या बोली 75% ठीक है यहां पर आओ और इसको जैक करो विर्थ तो अपनी अप्लाई होड़ी हाइट अपनी अप्लाई नहीं होड़ी

29:25इंस्पेक्ट करो और इसको चाट करो इक बार के लिए यह एलिमेंट है इस पर ने हाइड लगाई हाइड अपने पास क्या है 75%

29:38हाइड में कुछ चेंजेस के से नहीं आ रहा है

29:47कि अगर अगर

29:55हाइड लगाते चलो पने स्क्यूप पर

30:13वी एच हंड्रेड हंड्रेड वी एच लगेगी यहां पर

30:19हाइड 75 पर सेवंटीफ़ परसेंट अप्ले होनी चीन है स्क्यूप पर

30:37हाइड का क्या सीन है आगे देखते इसको अपन ऐसे ही अगर अपन यहांपर बात करें अपने ओफ्लोग स्वाण

30:46कि चलो देखते हैं हाइट का क्या सीन है आगे देखते हैं ऐसे ही अगर अपन यहां पर बात करें अपने ओवर्फ्लो की ठीक है तो अपने पास अपना क्या था कंटेनर इसको मैंने वेट तो हाइट कुछ भी नहीं थी परस इसके अंदर अपना कॉंटेंट लिखा हुआ है �

31:16से बाहर जा रहा है आपके जो में कंटेंटर से बाहर जा रहा है चreet

31:38और इसको तार्गयट कर लेते हैं चुलिए यह तो अपने पास याल और यह अज़्याब्त आण

31:46कि यह वाला भी वे इसको मैं आधे लेताउं एक्हार करना है इतार फार्वक्स एपकन आपन आप देती हैं इसका

31:53मैं क्लास और केकल लेता हुए यो उ Sachen कर दो बॉटसर से एक्हार बैवा कर ली प्रिसेंट झा alrededor

32:02परसेंट कर देना आप ठीक है यहाँ पर आपना कॉंटेंट यहाँ पर बाहर क्या हो रहा है इससे बाहर जा रहा है तो यहाँ पर आपने पास प्रोपटी होती है और आता हुटब

32:23तो अट्मेटिकली यहां पर जायगा फिटन करोंगे तो हाइड हो जायगा और अगर आप वीजीबल करोंगे तो वीजी बल रहेगा और पर स्कॉल करना चाता है तो अपना स्कॉलूर � ATL.

32:43तो यह अपने पास overflow है, अपन सब चीज़े पढ़के आएं,

32:46position, position basically अपने पास टाम आती है,

32:48किसी भी element की position set करने के लिए,

32:51अब अपने देखा था, position की अपने पास अलग-अलग values थी,

32:54static था, अपने पास, relative था, absolute था,

32:57ठीक है, fixed था, और sticky था,

32:59अगर किसी भी element को यहाँ पर अपने को set करना है,

33:02position की हिसाब से, तो वो सारी है,

33:04static by default होती ही, top, bottom, left, right, पर नहीं करेगा,

33:07relative अपने पास क्या होती है,

33:09अपने खुद से relate करता है, ठीक है,

33:11अपने parent से relate करता है,

33:13absolute अपने यहाँ पर देखी थी,

33:15absolute हमेशा parent किसको मान रहा है,

33:17वो body को, ठीक है, लेकिन अगर change करना है,

33:19तो अपने चेंज कर सकते हैं,

33:20fixed अपने पास किसी value को fix करना है,

33:22sticky, अपने पास अपने पास अपनी sticky होती है,

33:24ठीक है, तो यहाँ पर अपने पास इसकी value है,

33:27top, start, bottom, end,

33:29यह सारी values हैं, और इनको आप pass कर सकते हैं,

33:31top से zero बोल रहा है, start से zero बोल रहा है,

33:34ठीक है, इस तरीके से,

33:35जैसे अपने पास यह आ रहा है,

33:37यह वाला box आ रहा है, मैं इसको चाहता हूँ कि यहाँ पर आए,

33:40कहाँ पर आए, इस जैगे, मैं fix करना चाहता हूँ इस जैगे,

33:43तो मैं यहाँ पर क्या बोलूँगा,

33:44मैं बोलूँगा कि मेरे पास जो position है,

33:48ठीक है, जो मेरे पास position है,

33:49वो मैंने यहाँ पर क्या लगा दी, fixed लगा दी,

33:52position कौन से लगा दी, उसके पर fixed,

33:53दे

33:55अब मैं यहां पर चाहता हूँ कि यह

33:58bottom से zero और

34:00यहाँ पर अपने पास क्या है यह right side

34:02मतलब end से zero रहे

34:04तो मैं यहाँ पर कहता हूँ कि end से zero

34:06कर देना और bottom से इसको

34:08zero कर देना ठीक है? end से zero रहे

34:10और bottom से zero तो यह यहाँ पर आगया

34:12अपना box ठीक है? तो यह position है

34:14जो अपन use करते हैं वो ही सारी चीज़ है

34:28अजय करते हैं अब

34:42आपको SM करते हो Presidential वहाँ पर

34:46अब जयसे मैं किसी भीए

34:49ELK तो यहाँ डाज पर हो करता हूँ

34:53मैं यहाँ पर अपने पास यह

34:55वाला जो आपकाए अव़

34:57जो अपने पास paragraph है इसके उपर में गोड़ाव करनी है ठीक है यह जो paragraph अपने लिए रखा है इसी पर लगाना चाहता हूं तो मैं यहाँ पर लिखूंगा

35:05shadow ठीक है और कौन सी लगाँगा एलजी तो उसके उपर जो shadow

35:09पर क्रिएट होगी वाली shadow यहां पर क्रिएट होगी तो आप इस पर shadow क्रिएट हो रही है नहीं पता चल रहा एक काम करो इसका जो बॉर्डर है उसको आपने कलर क्या दे रखा है

35:20डेंजर कलर दे रखा है बॉर्डर बॉर्डर री बॉर्डर डेंजर और कि इस पर मत रहो रहा है अपने चैडव लगाते है पने

35:40मैं इस पैंटेक के उपर लगाता हूं मज़े से ठीक है शेडव मैंने यहाँ पर क्या बोला है यहाँ पर शेडव एलजी करो इस क्यूप पर शेडव दिखाई नहीं दे रही कोई अच्छी जगर लगाओ और उसमें स्पीसिंग करो मैंने बाद तो

35:53अब अगर अपन डायरेक्शन वाइस मार्जी लगाना चाते है तो अपन डायरेक्शन वाइस कैसे लगाएंगे

36:21अगर अपन लिखते है टी का मतलब टॉप साइड मार्जीन टॉप या फिर पैडिंग टॉप अगर बी लिखते है तो मार्जीन बॉटम या फिर पैडिंग बॉटम अगर अपन एस लिखते है मार्जीन लेफ्ट या पैडिंग लेफ्ट ठीक है मार्जीन राइट और पै�

36:51यह अपने पास होता है, अब इसकी value अगर आप देखोगे, तो value अपने पास आती है, 0 से लेके 5 तक, बस, 0 से 5 तक आती है, 0 में कोई भी भी नहीं है, 0 में 0 रहती है, अगर आप 1 लगाते हो, उसका मतलब 0.25 यहाँ पर अपनी margin apply होने वाली है, ठीक है? 0.25 REM margin apply होगी, अगर �

37:21और यहां पर अगर आप देखोगे 5, 5 पे अपने पास 3 अप्लाई होगी, ठीक है, तो यह margin की values हैं, ठीक है, जैसे मैं margin लगाता हूँ, मैं किसी भी element के उपर margin लगाता हूँ, यह जो paragraph टैग है, इस पर मैं top से margin लगाना चाहता हूँ, ठीक है, यह जो paragraph टैग है, इस पर मैं top स

37:51MS क्या होगी, start से, ठीक है, कितनी देना चाहता हूँ, मैंने बोला MS, आप यहाँ पर 2 दे देना, ठीक है, तो यहाँ पर MS, start से margin 2 हो जाएगी, आप अपने end से भी देना चाहते हो, तो मैं ME दूमा, margin, end, वो मैं यहाँ पर देना हूँ, ठीक है, तो end से यहाँ पर margin apply होगी, �

38:21मैं यहाँ पर इसमें क्या देना चाहता हूँ, पैडिंग देना चाहता हूँ, यह तो margin दी, पैडिंग क्या होती है, container के अंदर की spacing, ठीक है, water की inside, जो transparent space होता है, वो अपने पास क्या होती है, अपनी padding होती है, तो चलो अपन पैडिंग लगाता है, जैसे मैं को all directions से देनी

38:51fix कर रखा है, इसलिए यहाँ पर यहाँ आ रहा है, fix होके अपना यह, ठीक है, तो यह अपने पास margin और padding होती है, spacing के लिए, margin कैसे लगाते है, M करके padding कैसे लगाते है, P करके, ठीक है, और अगर अपने बात करे, T से top हो गया, B से bottom, S से start, E से अपने पास क्या हो गया, end हो ग

39:21आते हैं, यहाँ पर shadow पर, जैसे अब मैं इसके उपर shadow create करता हूँ, ठीक है, यह जो box है, इसके उपर shadow गिए भी दिख रही होगी, यह box आपको ऐसे उबढ़ा हुआ लगा लगा होगा, ठीक है, तो यह अपने पास अपनी shadow की class होती है, तो आपने कुछ classes यहाँ पर देखी

39:51सारी चीजे अपने पढ़ रखी है, बस मैं एक बार classes आपको बता रहा हूँ किस तरीके से apply करनी है, किस तरीके से use करनी है, क्योंकि practice से ही यह चीजे clear होने वादी है, आपको कितनी classes बता दूँ, जब तक आप यह utility वाला section जो आपने देखा, उसको खुद से try नहीं करोगे

40:21visibility अपने पढ़ा था, visibility अपने पास क्या था, hidden और visibility अपने पास visible था, अगर आप visible दोगे तो visible रहेगा, और invisible दोगे तो अपने पास क्या हो जाएगा, hide हो जाएगा, जैसे अपने देखा ही था, भूल गए इस सीच को, यहाँ पर आता हूँ, और इस डिव के बाद ही, मैं �

40:51आप मैं यहाँ पर यह जो अपना यह paragraph है, इस paragraph को मैं दे रहा हूँ, यहाँ पर क्या? display none, क्या दे रहा हूँ, display none, किसको देना है इस paragraph को, तो मैंने यहाँ पर class लगाया, और मैंने बोला D, और मैंने क्या लिखा, none, display none में क्या होता है, अपना element भी hide हो जाता है, और space भी occupy �

41:21क्लास मैं यहाँ पर लिखता हूँ विजिबल तो बाइ डिफोल्ट है वह वैसे विजिबल ही और पने

41:26कुल लेकिन अगर मैं यहाँ पर इसको वेजिबन ना देकर इन्वीजीबल देता हूँ तो आस वाली क्लासare

41:32इन्वीजीबल देता हूं और इन्वीजीबल पर दो इसको दो इसको दो इसके उपर लगाता हूं मैं

41:45इन्वीजीबल तो वह आपका box हाइड हो जाएगा और space भी occupy रहेगा तो यह सब चीजें पर ने पढ़ रखी है तो एक वार वापस बता देता हूं utility पर ने देखा

41:56क्योंकि जो अपनी next class है उसमें अपने डिसकस करेंगे अपने breakpoints की उपर और अपने जो bootstrap है उसका most important topic अपने पास grid system क्या होता है, containers क्या होते है, rows क्या होती है, columns का divination कैसे करते है

42:12अगर ये आ गया तो आप एक complete responsive website बना सकते हो in a minute

42:17ठीक है?

42:19अब भी तो minutes में नहीं बना पाऊगे, आप गंटे तो लगी जाएंगे, आपको कुछ दिन भी लग जाएंगे शुरू में तो

42:26अब भी बैग्राउंड अपने देखा, बड़ी easy classes थी सारी, खुद से dry करना, border अपने देखी, border अपन किस तरीके से apply करते हैं, colors अपने देखा, colors अपने पास conforms properties आती है, classes आती है

42:36display के अपने कुछ classes देखी, कुछ अभी skip में है, क्योंकि अपन आगे जब पूरा boot set पढ़ लेंगे, तब आप automatically चीज़े clear कुटी जाएगे

42:44मैं भी आपको सिर्फ बता रहूं कि इस तरीके से अपने को अपनी classes यहाँ पर use करनी है, flex अपने देखा, flex अपन पढ़के आचुके, वही सारी classes यहाँ पर है, direction wise अपने पास है, flex row अगर अपने को set करना है, या फिर flex row reverse करना है, या फिर flex column करना है, तो दो flex column यहाँ पर class ह

43:14opacity के अगर अपने बात करें तो transparency है, overflow अपने देखा, overflow अगर कोई भी element यहाँ पर अपना, overflow रहा उसके लिए position अपने पढ़ी थी कि क्या होती है, position बस class की रूप में अपने इसको देख रहे है, shadows अगर अपने बात करें तो shadow आ रही है, sizing अपने बास अपनी width और height आती है, spacing क

43:44करने के लिए, line height चेंज करने के लिए, mono space मतलब हर एक content के बाद यहाँ पर spacing रहे है, फिर उसके बाद अपने पास visibility आता है, visibility की अपने यहाँ पर चीज देखिए, यहाँ तक की चीज के लिए है, तो एक बार बताओ, यहाँ तक की चीज के लिए है, इसमें कोई doubt नहीं किस

44:14सिबूल करें के सर, जो aside होता है, वो तो ads के लिए use करते हैं, तो वो semantic tag का use करते हैं, और उसको position हम set करते हैं, और fixed करते हैं, ना सर, जाको add के लिए जो होता वो अलग-अलग होता है, कई बार ऐसे होता, आप add देखते हो, जैसे scroll कर रहे हो, आप आपने आपन नहीं देखता

44:44की थ्रू होगा और अगर वो डिवाइडिशन में है तो वो कैसे चलेगा वो ग्रेड की थ्रू होगा सैट ग्रेड जैसे मैंने बता था ग्रेड में आप कंटेनर को कैसे सैट करोगे तो वो ग्रेड की थ्रू होने माना है ठीक है उतकश करें कि सर क्या बूट सेब की जगे टै

45:14अगर आपको आए तो बहुत अच्छी बात है क्योंकि जतने भी फ्रेमवर्क्स है वो आप बिल्कुल सीख सकते हो लेकिन उससे पहले आपको बेस के लिए रोना ज़रूरी है ठीक है

45:44अब देखो यहां तक की चीजी तो किलियर है अब देखो यहां पर अपने बस आइकन्स भी आते हैं

46:14अगर बूर के आइकन्स अगर अपने को बूर्ट शप क्या अइकन्स यूज करें और

46:29अबलो बहुत सारे बूर्साइब का आइकन्स भीन है जो भी आप यहां पर सार्च कर सकते हो

46:35एपल का आइकन दे रखा देखो

46:36बहुत सार आईकां सें

46:39यह लो ठिम्हे तीर च़लने वाला आईकन भी है

46:41ठीक है तो यहां पर सारे आईकन सें

46:53अगर आपको आईकन सीज करने है तो देखों कैसे करोगे

46:55वो यह आईकन के लिए सबसे प�hle क्या करना है

46:57सबसे पहले अपने को CDN find करना है, तो सबसे scroll करके आपको नीचे आना है, नीचे आने के बाद अगर आप देखोगे तो यहाँ पर आपको मिलेगा इसका CDN link, यह रहा CDN link, ठीक है, इस CDN link को copy करो, यह CDN link आपको कहाँ पर लगाना है, अपने head tag क्योग कर, यह लो, मैं अपने

47:27सारे चीज़ आ लिए, इस paragraph tag के अंदर ही, इसके आगे मैं icon use करना चाहता हूँ, तो मैं यहाँ पर आता हूँ, जो भी icon में को use करना है, वो चेक कर लो, कौन सा icon आपको लेना है, ठीक है, जैसे मैं scroll करता हूँ, ठीक है, जैसे यह वाला icon में को use करना है, तो मैं इस icon को यहा

47:57टेक करोगे, तो देखो, यह रहा वो icon, ठीक है, अब इस icon का color देखोगे, तो जो आपके content का color है, वो ही इस icon का color आ रहा है, लेकिन अगर आप change करना चाहते हो, तो change भी कर सकते हो, कैसे, इसके उपर class लगी भी, इसके उपर अपनी text class लगी, text की class लगा हो, आपको जो भी color क

48:27पर तो इसका color हो, ठीक है, यहाँ पर आप देखोगे, तो इसका जो color है, वो क्या हो गया, यहाँ पर green color हो क्या रहा है, ठीक है, अगर आप इसकी phone size भी change करना चाहते हो, इस icon की, तो FS के दुरू पर सकते हो, अपने FS पढ़ा था, phone size, मैंने FS1 दे दिया है, यहाँ पर, FS1 मे

48:57बहुत सारा icons अपने पास यहाँ पर है, ठीक है, तो यह बात होगे, अपने पास अपने boot set के icons की, ठीक है, तो आज अपने क्या चीज़े, डिसकस करी, आज अपने utilities वाला section यहाँ पर पूरा complete देखा है, कल जो अपन देखेंगे, वो अपन देखेंगे अपना grid, ठीक है, grid �

49:27सब चीजे समझ में आने वाली है, ठीक है, यहाँ तक की चीज़ के लिए रहे, तो एक बार comment करके बताओ, यह सर, यहाँ तक की चीज़ के लिए रहे, इसमें किसी को कोई doubt नहीं है,

49:51AI tool, home, tool, about contact, क्या बेचते रहे तो ही आप,

49:57यहाँ आपने बनाया है, यहाँ से बस images चेंज करते जा रहे हैं, जैसे जैसे क्लिक हो रहा है,

50:16download पर लगाएंगे तो download हो जाने चीज़िए, वाउ, क्या face दिया है,

50:22back करो, home, tools, अच्छे प्रोजेक्ट बना रहे हैं, इसको पुरा complete बनाओ, अच्छा है यह प्रोजेक्ट,

50:31इस सर क्लियर है, इस सर क्लियर है, ओके ठीक है, चलो बहुत अच्छे बात है, सब क्लियर है तो,

50:41तो bootstrap पर बनागे बढ़ रहे हैं, बस अपनी एक दूख लासोड होगी, फिर अपन बूटसफ पर बनाएंगे, फिर अपनाएंगे अपनी javascript के उपड़,

50:49वहां से आने वादाल मजए आपको वहीं

50:52मेरे को भी मजायगा आपको भी मजायगा क्योंकि वहीं से चीजी अची लगती है

50:57इरा अचेंड के पॉइंट वंदर आपको मेंच्ण करना है

51:02क्या mention करना है dependence के point-1 के अंदर अपन यहाँ पर mention कर देना क्याए चीज़ीं देखिए अपने

51:14utilities मंचन करें अपने utilities वला section यहाँ पर complete कवर कर दो आप

51:20और यहाँ पर mention करते हैब अटनेंस के point-1 के अंदर लैंचनकर ने utility ठीक है यह जंनकर कешь

51:28और attendance के point 2 के अंदर आपको mention करना है

51:35icons

51:37ठीक है

51:38यह attendance के point 1 और point 2 है

51:41जो आपको fill करने है

51:42Sir main topic boots app होगा

51:47Yes, बिल्कुल main topic boots app होगा

51:49main topic में आपको लिखना है boots app

51:51main topic में आपको boots app mention करना है

51:56ठीक है कोई doubt किसी को

52:10ठीक है कोई doubt नहीं है

52:12तो आज की class अपने इत्ती रखते हैं

52:13बाके अपन डिसकस करते हैं

52:14अपने next class के अंदर

52:15और इंतिजार करो बस अब अपन अपनी

52:18यह boots app complete होते ही

52:21अपन अपनी JavaScript पर आने वाला है

52:23वहाँ जाब को मजा आने वाला है

52:24और जो पीछे रह रहे है इस चीज़ के अंदर

52:27वो सारी चीज़े cover करो

52:29HTML, CSS और boots app तक cover कर लेना

52:32क्योंकि JavaScript में सिर्फ अपन

52:34JavaScript ही पढ़ेंगे शुरू के 20 दिन तक तो

52:37तब तक आप cover कर सकते हो

52:38अगर आपकी पीछे की चीज़े remaining रह रही है

52:40ठीक है cover करो इन चीज़ों को

52:42क्योंकि ये सब इतनी बार

52:44repeat होगी आपको automatically सब चीज़े याद हो जाएगी

52:47HTML, CSS और boots app

52:49और आपका tellwind CSS

52:50ये सारी classes बार-बार repeat होगी

52:53तो

52:54बिल्कुल आपको सब याद हो जाएगी

52:56अच्छे से

52:57Sir, icon का i tag कहां use किया

53:00icon का i tag है वो

53:10i tag जो आपको italicals के अंदर

53:12उसी के उपर इसने classes लगा रखिए

53:14icons की classes आपको याद नहीं करनी

53:16ये इसने लगा रखिए बस देख सकते हो आप

53:18use नहीं करनी इंको

53:19मतलब याद नहीं करनी आपको ठीक है

53:21याद करने बढ़ जाओ ये सारी classes

53:23ठीक है guys, okay

53:25thank you so much, मिलते हैं फिर अपने अपनी next class के अंदर

53:28आगेगी और interesting चीजों के साथ

53:30bye bye everyone and take care all

53:32bye, love you all

Comments

Add your comment

Day - 30 | 💻 Bootstrap Utilities & Icons Explained

Category

Transcript

Comments

Recommended