I hope you liked the video. If you are already here in the comment section, I invite you to let me know what other videos would you like to see in the future. Also, share any other feedback that you have on this video! I don't run ads on tutorials - the only value I get is your engagement in the MDB community. So if you would like to show your support: - Encourage more people to Keep Coding ---> Send this video to one person - Stay tuned for new content ---> Subscribe & ring the bell In the description, you will find links to some useful, free resources: 📥 Download Material Design for Bootstrap - FREE open-source UI KIT 🎓 Learn responsive web design with the latest Bootstrap 5 (full 1.5H course) 🎁 Join our mailing list & receive exclusive perks (free stuff that is normally behind a paywall) ⭐Support the creation of open-source packages with a STAR on GitHub 👪 If you have any questions - don't hesitate to ask on our Facebook group Thank you for your support!
I think I can work out things from here, however if you are willing, I would love to see a remake of the bootstrap portfolio site in React. Thank you for the wonderful content, I've just come off a full-stack coding bootcamp that I only realised at the end assumed I was already comfortable with front end work and your tutorials are helping me to actually make my work functional enough so I'll be able to apply for work soon. You're saving me weeks of work and I can't thank you enough.
Great video as always. Your pace of explanation is great. I haven't used MDB for publishing before, but it looks so simple, I will give it a try. Looking forward to more of your future content!
Bootstrap is acting very strange for me. Whenever I try to add the Button component, for some reason, I end up with a completely BLANK page. Like, even when I inspect it, I cant find the react template HTML code (its disappears somehow). Does Bootstrap do the same thing for anyone else??
The video is good, but it could be zoomed in a bit more, especially with the content that is in the browser. It's hard to read on a laptop. When something is typed into the command line, it shouldn't be all the way at the bottom of the screen either. When the video is paused, everything is obscured by the bar.
Cześć, Będzie może jakiś tutorial odnośnie layoutu przy większych rozdzielczościach 2, 4, 8k? chodzi mianowicie w jaki sposób powiększyć wielkość tekstu, ikon czy search bara. o ile bootstrap jest fajny przy rozdzielczości pc - tel to powyżej jest tragedia próbujesz pisać pod 4k to trzeba pisać pod kilka rozdzielczości bo zawsze sie coś przemieści.
Hej, sam Bootstrap wprowadził w wersji 5 rozmiar xxl dla szerokosci większej niż1400px, dodatkowo odpalili poboczny projekt RFS: github.com/twbs/rfs/tree/v9.0.3 i tu można takie rzeczy robić. Pozwala to uzależnić rozmiar tekstu, marginów i paddingów itp od rozdzielczości przeglądarki przez stosowanie funkcji calc: .title { font-size: calc(1.525rem + 3.3vw); }
hey chatGPT thinks you may be doing the wrong way.... In the video you provided, the instructor used class instead of className when adding Bootstrap classes to his React components. Although it is technically valid HTML and JSX syntax, it is considered bad practice because class is a reserved keyword in JavaScript and could cause problems when working with other libraries or code. In general, it is always better to follow the conventions and guidelines of the React community, which recommends using className instead of class to add classes to your components. This will ensure that your code is consistent, easier to read, and less likely to cause issues in the future.
IMHO better use react + bootstrap 5 pure without react-bootstrap otherwise you loose the mobile and other benefits of pure bootstrap 5. Since Bootstrap 5 no longer depends on jQuery.
If you wanted to change the background color and the text color of the navbar, for example, how would you go about doing that with the Navbar react-bootstrap component?
Try this out: 1. Place the Image in Your Project Directory: First, you need to place the image file into the public directory of your React project. This could be directly in the public folder or within a subdirectory like public/images. 2. Importing the Image in React: In your React component, you can import the image at the top of your file. For example; javascript code: import MyImage from './path-to-your-image.jpg'; 3. Using the Image in Your JSX: Once the image is imported, you can use it in your JSX like any other variable. For instance; jsx code: 4. Styling with Bootstrap: To style this image using Bootstrap, you can simply add Bootstrap classes to the img tag. For example, to make the image responsive, you can use; jsx code: 5. Alternative Approach - Directly in JSX: Instead of importing the image, you can also reference it directly in the JSX by providing the relative path from the public directory. For example; jsx code: Just remember to ensure that the path you use matches the location of your image in the project structure. Also, if your image is large, consider optimizing it to reduce the load time of your web page. I hope that helps, Keep Coding :)
I hope you liked the video. If you are already here in the comment section, I invite you to let me know what other videos would you like to see in the future. Also, share any other feedback that you have on this video!
I don't run ads on tutorials - the only value I get is your engagement in the MDB community.
So if you would like to show your support:
- Encourage more people to Keep Coding ---> Send this video to one person
- Stay tuned for new content ---> Subscribe & ring the bell
In the description, you will find links to some useful, free resources:
📥 Download Material Design for Bootstrap - FREE open-source UI KIT
🎓 Learn responsive web design with the latest Bootstrap 5 (full 1.5H course)
🎁 Join our mailing list & receive exclusive perks (free stuff that is normally behind a paywall)
⭐Support the creation of open-source packages with a STAR on GitHub
👪 If you have any questions - don't hesitate to ask on our Facebook group
Thank you for your support!
I think I can work out things from here, however if you are willing, I would love to see a remake of the bootstrap portfolio site in React.
Thank you for the wonderful content, I've just come off a full-stack coding bootcamp that I only realised at the end assumed I was already comfortable with front end work and your tutorials are helping me to actually make my work functional enough so I'll be able to apply for work soon. You're saving me weeks of work and I can't thank you enough.
Great video as always. Your pace of explanation is great. I haven't used MDB for publishing before, but it looks so simple, I will give it a try. Looking forward to more of your future content!
This just clarified so many little details that have impeded my ability to utilize bootstrap effectively in react applications. Thank you SO MUCH
Happy to help :) Keep Coding, mate!
finally someone who is fast and isnt talking for 30 minutes
Best of them all. You built a website in realtime just like in about 12 minutes. Thanks for the lecture. Am watching this over again
thank you, just need a video for react and react-router to build a page, this was fantastic!
Thank you for this tutorial ! Such a huge help for me.
dzięki ta ten Tutorial :) jestem właśnie w trakcie pisania czegoś do swojego pierwszego portfolio :)
hi, one questin, why you can use class instead of className in react? thanks
because JSX lets you use HTML tags inside React. There is already a keyword called 'class' in HTML. That's why it uses className instead.
nwbi here: where can I find the html generated? (which folder?) thanks!
that's amazing but my question is how can i know the class name like you give
You make it look so easy 😉
Bootstrap is acting very strange for me. Whenever I try to add the Button component, for some reason, I end up with a completely BLANK page. Like, even when I inspect it, I cant find the react template HTML code (its disappears somehow). Does Bootstrap do the same thing for anyone else??
Can you comment here the code
The video is good, but it could be zoomed in a bit more, especially with the content that is in the browser. It's hard to read on a laptop.
When something is typed into the command line, it shouldn't be all the way at the bottom of the screen either. When the video is paused, everything is obscured by the bar.
Huge thank you! I will build an awesome bootstrap app now :)
Great to hear!
Thanks a lot, your explanation was really good!
Glad it was helpful!
This was excellent, thank you.
Glad you enjoyed it!
Helpful thank you
Cześć,
Będzie może jakiś tutorial odnośnie layoutu przy większych rozdzielczościach 2, 4, 8k? chodzi mianowicie w jaki sposób powiększyć wielkość tekstu, ikon czy search bara. o ile bootstrap jest fajny przy rozdzielczości pc - tel to powyżej jest tragedia próbujesz pisać pod 4k to trzeba pisać pod kilka rozdzielczości bo zawsze sie coś przemieści.
Hej, sam Bootstrap wprowadził w wersji 5 rozmiar xxl dla szerokosci większej niż1400px, dodatkowo odpalili poboczny projekt RFS: github.com/twbs/rfs/tree/v9.0.3 i tu można takie rzeczy robić. Pozwala to uzależnić rozmiar tekstu, marginów i paddingów itp od rozdzielczości przeglądarki przez stosowanie funkcji calc:
.title {
font-size: calc(1.525rem + 3.3vw);
}
hey chatGPT thinks you may be doing the wrong way....
In the video you provided, the instructor used class instead of className when adding Bootstrap classes to his React components. Although it is technically valid HTML and JSX syntax, it is considered bad practice because class is a reserved keyword in JavaScript and could cause problems when working with other libraries or code.
In general, it is always better to follow the conventions and guidelines of the React community, which recommends using className instead of class to add classes to your components. This will ensure that your code is consistent, easier to read, and less likely to cause issues in the future.
Exactly, I used className everywhere.
IMHO better use react + bootstrap 5 pure without react-bootstrap otherwise you loose the mobile and other benefits of pure bootstrap 5. Since Bootstrap 5 no longer depends on jQuery.
What do you mean by "loose the mobile and other benefits of pure bootstrap 5" ? How would you loose it using react-bootstrap?
You are going to have to explain that one.
👍 react + bootstrap pure is too enough for me. I don't want to make my frontend too complicated
Gem 💎
Thankssss
This is perfect! Straight to the point. You really take the stress out of it! Thanks! 🙏
👌
Thanks. That's cool
Happy to help, Keep Coding :)
Simple and great,
The most I like is the free and simple web hosting method.
If you wanted to change the background color and the text color of the navbar, for example, how would you go about doing that with the Navbar react-bootstrap component?
boostrap documentation
boss, the image library was from bootstrap, how can I use images from my local PC?
Try this out:
1. Place the Image in Your Project Directory: First, you need to place the image file into the public directory of your React project. This could be directly in the public folder or within a subdirectory like public/images.
2. Importing the Image in React: In your React component, you can import the image at the top of your file. For example;
javascript code: import MyImage from './path-to-your-image.jpg';
3. Using the Image in Your JSX: Once the image is imported, you can use it in your JSX like any other variable. For instance;
jsx code:
4. Styling with Bootstrap: To style this image using Bootstrap, you can simply add Bootstrap classes to the img tag. For example, to make the image responsive, you can use; jsx code:
5. Alternative Approach - Directly in JSX: Instead of importing the image, you can also reference it directly in the JSX by providing the relative path from the public directory. For example; jsx code:
Just remember to ensure that the path you use matches the location of your image in the project structure. Also, if your image is large, consider optimizing it to reduce the load time of your web page.
I hope that helps, Keep Coding :)
got well 🎉🎉
Keep Coding :)
prosiłbym o większy tekst, by móc oglądać w niższych rozdzielczościach
Nagranie jest w 4k więc można zwiększyć rozdzielczośc filmu i powinno się ładnie dać powiększyć
@@DawidAdach ale ja nie mam internetu takiego
Why would you develop one way and then change the code for production? Develop with proper standards seems more logical ...