- Видео 65
- Просмотров 454 412
Coding Yaar
Индия
Добавлен 5 май 2020
Coding Yaar just translates to Coding Buddy. I hope I can be that to you and be helpful to you in some way.
I make videos about front-end development, mainly using HTML, CSS, and Bootstrap. You can find the source code on the Coding Yaar website for free. It's linked in the description of each video. You will also find a detailed written step-by-step explanation there.
You can reach out using comments, email, or Discord if you have any queries or want to say hi.
Don't forget to Subscribe to get future video notifications.
I make videos about front-end development, mainly using HTML, CSS, and Bootstrap. You can find the source code on the Coding Yaar website for free. It's linked in the description of each video. You will also find a detailed written step-by-step explanation there.
You can reach out using comments, email, or Discord if you have any queries or want to say hi.
Don't forget to Subscribe to get future video notifications.
Bootstrap Product Card #3
How to create a Bootstrap product card with rounded corners using the basic Bootstrap 5 card.
HTML | BOOTSTRAP
Source code for Bootstrap 5 Product Card:
codingyaar.com/product-card-oval-design-bootstrap-5-html/
HTML CSS Product Card:
ruclips.net/video/OVkvCYXSfKM/видео.html
Bootstrap 5 Cards Playlist:
ruclips.net/p/PLEGWy2sQ80YtFWWVixRdb6NXnFpdugHf-
Bootstrap 5 Navbars Playlist:
ruclips.net/video/NcGehKh3CpA/видео.html
Bootstrap 5 Carousels Playlist:
ruclips.net/p/PLEGWy2sQ80YvomOWLuUvsILbu7EmQ1V5R
#bootstrapcard #webdesign #bootstrap #bootstrap5 #productcard
Coding Yaar's Discord server: discord.gg/raxEDEWkCk
Buy Me A Coffee ☕️:
www.buymeacoffee.com/codingyaar
HTML | BOOTSTRAP
Source code for Bootstrap 5 Product Card:
codingyaar.com/product-card-oval-design-bootstrap-5-html/
HTML CSS Product Card:
ruclips.net/video/OVkvCYXSfKM/видео.html
Bootstrap 5 Cards Playlist:
ruclips.net/p/PLEGWy2sQ80YtFWWVixRdb6NXnFpdugHf-
Bootstrap 5 Navbars Playlist:
ruclips.net/video/NcGehKh3CpA/видео.html
Bootstrap 5 Carousels Playlist:
ruclips.net/p/PLEGWy2sQ80YvomOWLuUvsILbu7EmQ1V5R
#bootstrapcard #webdesign #bootstrap #bootstrap5 #productcard
Coding Yaar's Discord server: discord.gg/raxEDEWkCk
Buy Me A Coffee ☕️:
www.buymeacoffee.com/codingyaar
Просмотров: 675
Видео
Bootstrap Carousel Full Width With Captions In The Center
Просмотров 8614 месяца назад
A simple responsive Bootstrap 5 carousel full width with captions horizontally and vertically positioned in the center. HTML | CSS | Bootstrap Source code for Bootstrap Carousel Full Width With Captions In Center: codingyaar.com/bootstrap-carousel-full-width-with-captions-in-the-center/ Bootstrap 5 Carousels Playlist: ruclips.net/p/PLEGWy2sQ80YvomOWLuUvsILbu7EmQ1V5R Bootstrap 5 Navbars Playlist...
Product Landing Page using HTML CSS Bootstrap 5
Просмотров 4845 месяцев назад
How to create a simple responsive product website landing page using HTML CSS and Bootstrap 5. HTML | CSS | BOOTSTRAP Timestamps: 0:00 - Final Output 0:08 - Channel Intro 0:12 - File setup 0:30 - Add Bootstrap navbar 238 - Hero section of the landing page 4:06 - Best Selling products section 5:28 - About Us section 6:40 - Product Gallery 8:05 - Contact section Source code for responsive Bootstr...
Bootstrap 5 Product Card
Просмотров 1,7 тыс.7 месяцев назад
How to create a Bootstrap product card using the basic Bootstrap 5 card. HTML | BOOTSTRAP Source code for Bootstrap 5 Product Card: codingyaar.com/product-card-bootstrap-html HTML CSS Product Card: ruclips.net/video/OVkvCYXSfKM/видео.html Bootstrap 5 Cards Playlist: ruclips.net/p/PLEGWy2sQ80YtFWWVixRdb6NXnFpdugHf- Bootstrap 5 Navbars Playlist: ruclips.net/video/NcGehKh3CpA/видео.html Bootstrap ...
Bootstrap Accordion Color Change
Просмотров 7 тыс.9 месяцев назад
How to change Bootstrap accordion color using Bootstrap's CSS variables. Here are two Bootstrap 5 accordion examples or templates. HTML | CSS | Bootstrap Source code for Bootstrap 5 Accordion Color Change: codingyaar.com/bootstrap-accordion-color-change/ Bootstrap 5 Carousels Playlist: ruclips.net/p/PLEGWy2sQ80YvomOWLuUvsILbu7EmQ1V5R Bootstrap 5 Navbars Playlist: ruclips.net/video/NcGehKh3CpA/в...
Portfolio Website Using Bootstrap 5
Просмотров 2,4 тыс.9 месяцев назад
Portfolio Website Using Bootstrap 5: How to create a simple responsive portfolio website using HTML CSS and Bootstrap 5. HTML | CSS | BOOTSTRAP Timestamps: 0:00 - Final Output 0:10 - Channel Intro 0:13 - File setup 0:24 - Add Bootstrap navbar 1:27 - Hide button on small devices 2:03 - Hero section of the website 4:58 - Services section 5:30 - Bootstrap icon and styling 7:46 - About section 9:07...
Full Screen Navbar Bootstrap 5
Просмотров 2,4 тыс.10 месяцев назад
How to create a simple responsive Bootstrap full-screen navigation menu. HTML | CSS | BOOTSTRAP Source code for responsive Bootstrap 5 Full Screen Navbar: codingyaar.com/bootstrap-full-screen-navigation-menu/ Bootstrap 5 Mega Menu: ruclips.net/video/V5MquVuKlU4/видео.html Bootstrap 5 Multilevel Dropdown Submenu: ruclips.net/video/sqwk7xXBhFk/видео.html Bootstrap 5 Navbars Playlist: ruclips.net/...
Bootstrap Accordion Icon Change (Plus Minus icons)
Просмотров 6 тыс.11 месяцев назад
How to change Bootstrap accordion icon into plus and minus icons. HTML | CSS | Bootstrap Source code for Bootstrap 5 Accordion With Plus Minus Icons: codingyaar.com/change-bootstrap-accordion-icon/ Bootstrap 5 Carousels Playlist: ruclips.net/p/PLEGWy2sQ80YvomOWLuUvsILbu7EmQ1V5R Bootstrap 5 Navbars Playlist: ruclips.net/video/NcGehKh3CpA/видео.html Bootstrap 5 Cards Playlist: ruclips.net/p/PLEGW...
HTML CSS Product Card Design
Просмотров 3,2 тыс.Год назад
How to create a simple responsive HTML CSS product card with a hover effect. HTML | CSS Source code for HTML CSS Product Card: codingyaar.com/html-css-product-card/ Bootstrap 5 Horizontal Product Card: ruclips.net/video/GaOKdDlR0lo/видео.html Bootstrap 5 Cards Playlist: ruclips.net/p/PLEGWy2sQ80YtFWWVixRdb6NXnFpdugHf- Bootstrap 5 Navbars Playlist: ruclips.net/video/NcGehKh3CpA/видео.html Bootst...
Bootstrap 5 Carousel with Vertical Text Thumbnails
Просмотров 1,1 тыс.Год назад
A simple responsive Bootstrap 5 carousel with vertical text thumbnails on the left using the Bootstrap carousel with indicators. HTML | CSS | Bootstrap Source code for Bootstrap 5 Carousel Vertical Text Thumbnails: codingyaar.com/bootstrap-carousel-with-vertical-text-thumbnails/ Bootstrap 5 Carousels Playlist: ruclips.net/p/PLEGWy2sQ80YvomOWLuUvsILbu7EmQ1V5R Bootstrap 5 Navbars Playlist: ruclip...
Bootstrap 5 Button with Icon
Просмотров 3,4 тыс.Год назад
How to create a Bootstrap 5 rounded button with an icon. HTML | CSS | BOOTSTRAP Source Code for Bootstrap 5 Button with icon: codingyaar.com/bootstrap-5-button-with-icon/ Bootstrap 5 Cards Playlist: ruclips.net/p/PLEGWy2sQ80YtFWWVixRdb6NXnFpdugHf- Bootstrap 5 Navbars Playlist: ruclips.net/video/NcGehKh3CpA/видео.html Bootstrap 5 Carousels Playlist: ruclips.net/p/PLEGWy2sQ80YvomOWLuUvsILbu7EmQ1V...
Bootstrap 5 Product Card | Bootstrap horizontal card
Просмотров 8 тыс.Год назад
Bootstrap 5 Product Card | Bootstrap horizontal card
Bootstrap 5 Ecommerce Navbar (multiline)
Просмотров 1,7 тыс.Год назад
Bootstrap 5 Ecommerce Navbar (multiline)
Responsive Text Animation using HTML and CSS (changing or rotating)
Просмотров 702Год назад
Responsive Text Animation using HTML and CSS (changing or rotating)
Multiple Bootstrap Card Sliders On Same Page
Просмотров 7 тыс.Год назад
Multiple Bootstrap Card Sliders On Same Page
Bootstrap 5 Testimonial Slider | Testimonial Carousel
Просмотров 8 тыс.Год назад
Bootstrap 5 Testimonial Slider | Testimonial Carousel
Bootstrap Dropdown Submenu | Bootstrap Multilevel Dropdown menu
Просмотров 20 тыс.Год назад
Bootstrap Dropdown Submenu | Bootstrap Multilevel Dropdown menu
Popup Login Form Bootstrap | Bootstrap Modal Form
Просмотров 8 тыс.Год назад
Popup Login Form Bootstrap | Bootstrap Modal Form
Bootstrap 5 Card Example #5 | Dome-shaped image
Просмотров 1,3 тыс.Год назад
Bootstrap 5 Card Example #5 | Dome-shaped image
Bootstrap 5 Card Design With Hover Effect
Просмотров 3,1 тыс.Год назад
Bootstrap 5 Card Design With Hover Effect
Bootstrap cards same height | Bootstrap cards side by side
Просмотров 11 тыс.Год назад
Bootstrap cards same height | Bootstrap cards side by side
Bootstrap 5 Login Form | Basic Bootstrap Login Form
Просмотров 751Год назад
Bootstrap 5 Login Form | Basic Bootstrap Login Form
Bootstrap Banner Design | Bootstrap Hero Section
Просмотров 1,4 тыс.Год назад
Bootstrap Banner Design | Bootstrap Hero Section
Bootstrap 5 Carousel Multiple Items Responsive
Просмотров 88 тыс.Год назад
Bootstrap 5 Carousel Multiple Items Responsive
Bootstrap Profile Card | Bootstrap rounded card
Просмотров 5 тыс.Год назад
Bootstrap Profile Card | Bootstrap rounded card
Bootstrap 5 Material Design Form Responsive
Просмотров 1,1 тыс.Год назад
Bootstrap 5 Material Design Form Responsive
Bootstrap 5 Card Carousel | Multiple items carousel
Просмотров 95 тыс.2 года назад
Bootstrap 5 Card Carousel | Multiple items carousel
THANKS!!!!!!!!!!
Thanks
Excellent video. Concise.
Thank you, it is very helpfull! How did youe encode the svg image from html to css?
Thank you so much
thank you so muchhhhhh
Thanks. Only i have a problem, on a mobile version. When I tap to expand an item, second or even third level, I need that when I tap again on the item from which the list was expanded, to collapse again. This only works if I click on another item from a higher level.
Mai confirm Teri mako engrej chhod ke gya tha,
#HELP , the cards after click on right button shows up in column, why?
Hello, great video, it's just what I need to do but it only slides when the screen is small, when I have the browser fully open it doesn't, what could be the reason? thanks in advance
if I try to add 2 carousels for different topics the button prev and next changes all carousels
Here's how to manage multiple carousels on same page: ruclips.net/video/NTwYWKRfO3E/видео.html
Great !!! Thank you very much !!!
Thanks, how to use material icons instead of bootstrap ?
Thank you very much. It help me for my project. To help others people: change <a> by <button>, give a background #000 to button and modifie the "button css code" to have a correct position of them. All it work well !!!
You just save me from throwing out computer lol i tried everything to change those styles but could not thank you!!🙏🏿
thx
gracias gracias
best of all time
Worst…where to copy where to paste just a worst habbit…if you want to forgot that you had learned previously do not watch this video
Thanks Yaar
Nice tutorial ,tks for it . But why my previous and next buttons are not working. Pls help to fix it.
Check if you are using the correct data attributes. For Bootstrap 5, the controls should have the attribute data-bs-target.
Thanks for the reply . Its working now.@@codingyaar
I want the slider to be reponsive like big screen 5 slides min screen size 3 slides and small screen 1 by 1slide @@codingyaar
You can hide the slides as described in this video or try this instead: ruclips.net/video/nS_Ht0lT-uQ/видео.html
Tku so much that this video itself clearly explained . Great work .Able to bring the 5 slides and 1 slide for large ans small screen respectively. But when I am adding the medium screen with the class d-md-none , getting two outputs on the same page like small screen output on top and medium screen output on below to it . When checking fro medium screen also getting two such outputs but large screen works fine. Kindly pls help to fix it. Thanks in advance@@codingyaar
The offcanvas menu is a crap: You click on a menu item link and go to the next webpage. When you click on the back button and go back to the privious webpage, the offcanvas menu is still open! This is not a good idea for a menu, especially if the offcanvas menu is taking the whole screen of the mobile display! 👎
You can close it using JavaScript. Why aren't you collapsing it on mobile?
@@codingyaar Well, I have a collapsed offcanvas side menu on mobile. I click on the hamburger menu icon, then click on a link and go to the next page. But when I click on the back button, I go back to the privious webpage and the offcanvas side menu is still open. My visitors usually click the back button again and leave the website completely. I tried JS, but this is a hack and does not work properly (issues with cache, etc.). You can create a new video and show how to resolve the issue. That would be a great help to many of us. But the question still remains: Why should I hack it? Why doesn't it simply work as it is expected, just like a menu?
I was suggesting JS incase you wanted to collapse it on larger screen. As for it not collapsing after link click on mobile, I'll have to look into it.
@@codingyaarThank you for your efforts! 👍
Really helpful!!, Thanks for the help and guidance
really nice explanation!!!
It didn't work here :-(. The default style is still overriding the style defined within the html. Do you have any idea what it could be? Thanks! Using bootstrap in a spring boot webapp.
Make sure you have placed the Bootstrap css link before your custom styles.
@@codingyaar it was the bootstrap version! Thank you for answering.
Nice video! Thank you so much!
Thank you for this simple explanation
not working for me
useful content , need more explanation, also be a little slow while explaning things, your approach was fast which was problamatic. Overall the topic is useful , only improvment needs to done with respect to how you present. thanks.
Noted!
how to set it as multiple in mobile view
Remove the classes used to hide the cards
Super super super super - very helpful!!!
Muchas gracias :)
Thank you... no where was this answer described lol
Nice job!!!
A Big Thank you for you❤
You are life saver boss. Thanks a lot for your kind effort. ❤❤
Glad it helped🙂
sukriyaa mam
Thank you! This video is really helpful!
hi. this not working. left right button animation.
Sorry for the late reply. Did you manage to make it work?
Thank youuu soo muchhh ❤
Nice job!!
Thanks!!
Thanks! Im beginning to learn css and bootstrap and this video help me to do my job in the work! salutes from Mexico:)
I'm glad it helped and good luck!
Amazing Thanks :)
What a lifesaver! I was searching everywhere for this! Thanks a lot!
Thank you, miss!
You're so welcome!
Thank you 😊
You're welcome 😊
center text in button?
You can add *d-block text-center* classes to accordion-button
❤❤❤
You are so knowledgeable! Thanks for this great guide.
Glad it was helpful!
the repository of source code please
I haven't created a repo yet but you can find all the code on the website