Thank you heimasidur! I always am thinking about a website from a design perspective when I'm writing code. At the end of the day, a user doesn't care what language you wrote the site in. They just care how it operates (which is why I love Gatsby, because it's stupid fast). Appreciate the comment!
Thanks for the video. Can you pls explain if there are any advantages of using React Bootstrap over vanilla Bootstrap since both can be integrated in a React app?
@@ADesignerWhoCodes Yes, but that is syntax level change. Is there any other benefit (like performance or something else) of using React Bootstrap over vanilla Bootstrap? As far as I understand based on your video, React Bootstrap also generates same HTML output, hence I asked that question.
@@ADesignerWhoCodes I was going through Bootstrap documentation and got the answer I was looking for. "While the Bootstrap CSS can be used with any framework, the Bootstrap JavaScript is not fully compatible with JavaScript frameworks like React, Vue, and Angular which assume full knowledge of the DOM. Both Bootstrap and the framework may attempt to mutate the same DOM element, resulting in bugs like dropdowns that are stuck in the “open” position. A better alternative for those using this type of frameworks is to use a framework-specific package instead of the Bootstrap JavaScript." Hope this helps.
The installation for React Bootstrap also installs Vanilla Bootstrap as well. Small note though, React/Vanilla Bootstrap are not v5.x yet. The only big thing to watch out with that is Left and Right is now Start and End in the new version of Bootstrap (there are some others but this is the big one). So I still type ml-5 for margin-left vs ms-5. But ya, the npm installs both React and Vanilla of BS.
Sure. It's more to do with the framework you are using. I use Gatsby a lot (because it's freaking awesome) and since it's built using the React Framework, I use React Bootstrap. The underlying code is essentially the same. Once built, the site has the same classes and such. If I'm just building a website with HTML/CSS/JS, then I'll go with Vanilla because I'm not running React. Here is how I built my website: ruclips.net/video/TJ5CaIThKWk/видео.html
I would. Only because react bootstrap is based upon vanilla bootstrap. Just a head’s up, React Bootstrap is still on version 4.x while classic is v5. Just some minor differences amongst the two.
Perfect!! this was what i was searching for. :)
this is great :) keep it up, its so nice to see a design angle to react, because it's so typically left out or just not discussed ;)
Thank you heimasidur! I always am thinking about a website from a design perspective when I'm writing code. At the end of the day, a user doesn't care what language you wrote the site in. They just care how it operates (which is why I love Gatsby, because it's stupid fast). Appreciate the comment!
Awesome video! This is going to save me so much trouble on my MERN project.
I was struggling to update React Bootstarp image height/width. Thank you for clear, short examples!
Happy to help! I updated my gatsby carousel video for v3 as well:
ruclips.net/video/GOg6u6h_aqQ/видео.html
Thanks!
Haydn
i can't believe this video has 15k views. Something so simple yet nobody created it lo. Gj
It’s changed a little with bootstrap 5. Might make a new one. But the basic information is still the same. Thanks!
Great way of detailing the difference.
Thanks! A few things have changed since the video but overall it’s still there
Thanks for sharing the difference react bootstrap and vanilla bootstrap it's very helpful for me
You're welcome. The great part about installing React Bootstrap is it comes with Vanilla (Get) Bootstrap built in.
That is really great!
Thanks for the video. Can you pls explain if there are any advantages of using React Bootstrap over vanilla Bootstrap since both can be integrated in a React app?
More shorthand. For instance vs or in react
@@ADesignerWhoCodes Yes, but that is syntax level change. Is there any other benefit (like performance or something else) of using React Bootstrap over vanilla Bootstrap? As far as I understand based on your video, React Bootstrap also generates same HTML output, hence I asked that question.
Then nope :) you are all good
@@ADesignerWhoCodes I was going through Bootstrap documentation and got the answer I was looking for.
"While the Bootstrap CSS can be used with any framework, the Bootstrap JavaScript is not fully compatible with JavaScript frameworks like React, Vue, and Angular which assume full knowledge of the DOM. Both Bootstrap and the framework may attempt to mutate the same DOM element, resulting in bugs like dropdowns that are stuck in the “open” position.
A better alternative for those using this type of frameworks is to use a framework-specific package instead of the Bootstrap JavaScript."
Hope this helps.
So to use vanilla BS , do i need to import that as well , or React-BS is enough ?
The installation for React Bootstrap also installs Vanilla Bootstrap as well. Small note though, React/Vanilla Bootstrap are not v5.x yet. The only big thing to watch out with that is Left and Right is now Start and End in the new version of Bootstrap (there are some others but this is the big one). So I still type ml-5 for margin-left vs ms-5.
But ya, the npm installs both React and Vanilla of BS.
@@ADesignerWhoCodes Thank you for replying 😀
i wanna create a simple website and i'm confused which one should i choose for my website. Can you help ?
Sure. It's more to do with the framework you are using. I use Gatsby a lot (because it's freaking awesome) and since it's built using the React Framework, I use React Bootstrap. The underlying code is essentially the same. Once built, the site has the same classes and such.
If I'm just building a website with HTML/CSS/JS, then I'll go with Vanilla because I'm not running React.
Here is how I built my website:
ruclips.net/video/TJ5CaIThKWk/видео.html
@@ADesignerWhoCodes finally i decided to go with bootstrap.
Thank you so much this was confusing the shit out of me!
Hahahaha. Happy to help Daniel.
and how can we change the style inside the css file?
I mean if we have a what can we write to as className to style it?
I don’t touch the bootstrap file but add a custom css file after it. And yep. You can add className to Container and it would work just fine.
Great, thanks! :))
So welcome Isaac. Happy to help.
Do you think it's important to learn Bootstrap before learning React-Bootstrap ?
I would. Only because react bootstrap is based upon vanilla bootstrap. Just a head’s up, React Bootstrap is still on version 4.x while classic is v5. Just some minor differences amongst the two.