React Bootstrap Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 4 ส.ค. 2024
  • This React Bootstrap Tutorial 2020 will cover how to install bootstrap react together using a basic create react application.
    If you need to use bootstrap react tutorial 2020 from scratch, this beginner guide will include the following steps:
    00:00 - Introduction to react-bootstrap
    00:25 - Installing create-react-app
    00:59 - Installing bootstrap and react-bootstrap
    01:32 - React Bootstrap Button
    03:52 - React Bootstrap Alert
    05:00 - React Bootstrap Breadcrumb
    06:00 - React Bootstrap Card
    09:09 - React Bootstrap Form Example
    12:36 - React Bootstrap Row Cols Containers
    15:16 - Conclusion
    React-bootstrap example code can be found directly on the site at:
    react-bootstrap.github.io/
    Also if you are looking for regular Bootstrap, it can be found here:
    getbootstrap.com/
    Learn Design for Developers!
    A book I've created to help you improve the look of your apps and websites.
    📘 Enhance UI: www.enhanceui.com/
    Feel free to follow me on:
    🐦 Twitter: intent/follow?scr...
    💬 Discord: / discord
    💸 Patreon: / adriantwarog
    Software & Discounts:
    🚾 Webflow: webflow.grsm.io/adrian
    🌿 Envato: 1.envato.market/yRZjz2
    🌿 Envato Elements: 1.envato.market/LP0OJZ
    🔴 Elementor: elementor.com/adrian/?ref=23140
    ✖ Editor X: www.editorx.com/adrian-twarog
    Computer Gear:
    ⬛ Monitor: amzn.to/3f9DOQI
    ⌨ Keyboard: amzn.to/3eA5UFD
    🐁 Mouse: amzn.to/3xVJO8l
    🎤 Mic: amzn.to/3hgCfms
    📱 Tablet: amzn.to/3ewt7sa
    💡 Lighting: amzn.to/3vOZeZY
    💡 Key Lighting: amzn.to/3f6qP2f
    Camera Equipment:
    📷 Camera: amzn.to/3uCv4J9
    📸 Primary Lens: amzn.to/3vT6wMm
    📸 Secondary Lens: amzn.to/3tyqWIX
    🎥 Secondary Camera: amzn.to/3o2zCGi
    🎙 Camera Mic: amzn.to/33tCz9l
    🎞 USB to HDMI: amzn.to/33yW9RE
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 207

  • @AdrianTwarog
    @AdrianTwarog  3 ปีที่แล้ว +55

    I am trying to grow my channel, so if you find this video useful, #subscribe & hitting the #bell :) Thanks for watching and hope you liked and learnt something new!

    • @shaidor
      @shaidor 3 ปีที่แล้ว +1

      Hello Adrian ! I am trying to learn how to import bootstrap in my react project, your video helped me a lot but can you suggest me any tutorial about how to combine sass with bootstrap and react? I have learned some basic stuff about bootstrap but i don't know how to insert custom colors, themes etc.. in my project.

    • @AdrianTwarog
      @AdrianTwarog  3 ปีที่แล้ว +1

      CRA has ways to add it, or even using styled-components

    • @King1Toni
      @King1Toni 3 ปีที่แล้ว

      quite the open and direct guy, nice

    • @prateek1728
      @prateek1728 3 ปีที่แล้ว +1

      where can i find the source code of your lecture?

    • @alexkruk4683
      @alexkruk4683 2 ปีที่แล้ว

      Thank you for video! You have Polish name and surname. Are you parents from Poland?

  • @the_true_hier_to_the_sharingan
    @the_true_hier_to_the_sharingan 4 ปีที่แล้ว +116

    You just delivered a 1hr lecture in 15 mins, it is great. This is how you introduce something. Awesome content man, keep going.

    • @AdrianTwarog
      @AdrianTwarog  4 ปีที่แล้ว +4

      JAY TAILOR that’s great to hear!

    • @deliriumcode
      @deliriumcode 3 ปีที่แล้ว +2

      @@AdrianTwarog I can fully agree with JAY, if you can - please provide us with more content like this!

    • @harishvasisht782
      @harishvasisht782 2 ปีที่แล้ว +1

      @@AdrianTwarog worthful video ❤️

    • @basaniranjan2352
      @basaniranjan2352 2 ปีที่แล้ว

      hdhchoco

  • @AsheAve
    @AsheAve 11 หลายเดือนก่อน +3

    Great tutorial. I love how you started and kept it simple. I've struggled with overcomplicated React tutorials that just included Bootstrap but didn't explain much about the connections. Excellent. I'm applying for jobs in a couple of weeks and this will be a huge help.

  • @hapogenmanrow8038
    @hapogenmanrow8038 3 ปีที่แล้ว +8

    holy shit dude ive been seraching for 2 hours how to use bootstrap in my react project for homework and luckily i found you thanks mate!

  • @MaverickReynolds
    @MaverickReynolds 3 หลายเดือนก่อน

    Literally the highest value per second tutorials on this found on TH-cam! Another subscriber right here

  • @amymarais4909
    @amymarais4909 3 ปีที่แล้ว +4

    This was a life-saver! So much clarity provided

  • @DamianDemasi
    @DamianDemasi 2 ปีที่แล้ว

    Today I search for 3 React related videos. Adrian was the top pick. You are doing a great job! Thanks for all the amazing content!

  • @elkhanhamet2561
    @elkhanhamet2561 2 ปีที่แล้ว

    Mate you're a rockstar of the web design, so far everything I've been searching for is covered by your tutorials. 👏👏👏🎸🎸🎸🙂🙂

  • @zedsmelee
    @zedsmelee ปีที่แล้ว

    So helpful. Have to see it to understand it with most things programming and this tutorial was exactly what I needed. Thanks a lot, appreciate it.

  • @catalystakhand
    @catalystakhand 3 ปีที่แล้ว +1

    Just a simple and awesome way to cover a lot of topics. Thanks 👍

  • @danilodiniz8887
    @danilodiniz8887 3 ปีที่แล้ว

    This video is exactly what i was needing, thx for your content! hugs from Brazil! 🔥🔥

  • @wagnerdds
    @wagnerdds 2 ปีที่แล้ว +1

    I loved that you are straight to the point without missing any important piece of infomation. Thank you!

    • @AdrianTwarog
      @AdrianTwarog  2 ปีที่แล้ว

      Thanks it’s what I aim for

  • @jrmlp78
    @jrmlp78 4 ปีที่แล้ว +1

    Hi, Adrian. Thanks for sharing this tutorial. I'm doing a challenge regarding a job and I need to learn React-Bootstrap and apply in this challenge. Very useful. I've already subscribed into your channel. Greetings from Brazil!

  • @xsytrance
    @xsytrance 2 ปีที่แล้ว

    I'm completely new to React and this was a big help. Thank you!!

  • @King1Toni
    @King1Toni 3 ปีที่แล้ว +1

    Thats what i name a real crash course. An awesome one, thank you

  • @katanacodes6835
    @katanacodes6835 3 ปีที่แล้ว +4

    Great work Adrian, keep up the pace. We need you!

  • @ivancastillo3893
    @ivancastillo3893 3 ปีที่แล้ว +2

    Awesome video! Great structure for showing the most important points of react-bootstrap, and enough to give a good gist of the structure so that I can easily learn the rest through the docs

  • @fmaciel2
    @fmaciel2 3 ปีที่แล้ว

    Excellent work! Thank you *very much* for the great tutorial!

  • @mikelord
    @mikelord 3 ปีที่แล้ว

    Fantastic job Adrian!! Love this.

  • @HopeAndrea_HFG
    @HopeAndrea_HFG 8 หลายเดือนก่อน

    This was perfect, thank you!

  • @KevinJonesCreates
    @KevinJonesCreates 3 ปีที่แล้ว +1

    Adrian, Great video! Thanks for the quick but well explained intro to bootstrap in react. Exactly what I needed to know before diving into it.

  • @batumanav
    @batumanav 3 ปีที่แล้ว +1

    I didn't have any single idea about bootsrap before the video and now I feel like I can create new application lol

  • @alefrrlima
    @alefrrlima 6 หลายเดือนก่อน

    What a good video, thanks a lot. I've never used bootstrap before, this tutorial have give me a good overview.

  • @mrgaud
    @mrgaud ปีที่แล้ว

    Thanks bud :) saved me some time having to read through the docs

  • @electrobuilds4656
    @electrobuilds4656 2 ปีที่แล้ว

    Short and to the point! Thanks!

  • @kianbeev744
    @kianbeev744 3 ปีที่แล้ว +1

    you have a nice teaching style. Subscribed

  • @fangyongsun7182
    @fangyongsun7182 2 ปีที่แล้ว

    Thanks very much. Very good video!

  • @ariolverab
    @ariolverab 3 ปีที่แล้ว +2

    Great video Adrian! clear, simple and just to the point. Thanks

  • @hananhaider4254
    @hananhaider4254 2 ปีที่แล้ว

    It's better than 2 hour tutorial. Thank you so much bro.

  • @rvicinip
    @rvicinip 3 ปีที่แล้ว +1

    Thank you! What a great content. The best teacher on Bootstrap and React. Thanks!!

  • @zooom6286
    @zooom6286 4 ปีที่แล้ว +2

    Dude. Saw u on brad's vid. After watching i subbed to u as well. U have amazing contents. Keep em coming. Thank you 🤙

  • @fransimanuel7782
    @fransimanuel7782 2 ปีที่แล้ว

    it helped me a lot bro, thx you so much

  • @oussemabouyahia474
    @oussemabouyahia474 ปีที่แล้ว

    clear and concise , really appreciated

  • @fernando73820208
    @fernando73820208 3 ปีที่แล้ว

    This video was very useful, I had to sub + like & hit the bell, hope to see
    more videos like this.

  • @CourageousCreatives
    @CourageousCreatives 3 ปีที่แล้ว +2

    Thanks for this great tutorial! I'm working on my first React app for my fullstack dev bootcamp. This was helpful!

  • @m.jurydube6004
    @m.jurydube6004 2 ปีที่แล้ว

    Thank you so much for this

  • @a_maxed_out_handle_of_30_chars
    @a_maxed_out_handle_of_30_chars 9 หลายเดือนก่อน

    this was good, thank you :)

  • @nanimys
    @nanimys 2 ปีที่แล้ว

    wow.. thanks, mate! it's helpful so much!!

  • @scottrobison6316
    @scottrobison6316 2 ปีที่แล้ว

    Very helpful. Thank you!

  • @sithumdilanga650
    @sithumdilanga650 3 ปีที่แล้ว

    Thanks man. Easy to follow

  • @usmanhabib3390
    @usmanhabib3390 2 ปีที่แล้ว

    it help me in first 6 mints to understand thanks man... subscribed and liked your channel...

  • @vitorgabrielcesarino3983
    @vitorgabrielcesarino3983 2 ปีที่แล้ว

    OMGG, thank you so much for your help, I wasn't able to use the bootstrap properly because I didn't import this css library

  • @dancemusikk
    @dancemusikk 3 ปีที่แล้ว

    You saved my project!! Omg thank youuuuuuu!!

  • @user-oh5vo5rj6y
    @user-oh5vo5rj6y 3 ปีที่แล้ว

    Excellent lesson, sir. My gratitude.

  • @sokkpupptz
    @sokkpupptz 2 ปีที่แล้ว +1

    Great stuff Adrian! Clear, succinct and to the point, very useful :)

  • @kakarende
    @kakarende 3 ปีที่แล้ว

    really great video. very easy to understand

  • @PrudhviRoyals
    @PrudhviRoyals ปีที่แล้ว

    Superb explanation adrian
    Thank you very much
    I Hope your channel will get 1Million Subscribers
    As soon As possible😊😊😊😊

  • @shinibarney41
    @shinibarney41 3 ปีที่แล้ว

    you just saved my time awesome tutorial

  • @henryjackson3186
    @henryjackson3186 2 ปีที่แล้ว

    thanks a lot, I can now build my project

  • @ArifHussain-gf2jz
    @ArifHussain-gf2jz 2 ปีที่แล้ว

    The way you teach is really awesome,
    Love from India..

  • @deekshithpodila3928
    @deekshithpodila3928 3 ปีที่แล้ว +5

    I really appreciate the quality of production and content of each and every video produced. I really think you should have a lot more subscribers.

    • @AdrianTwarog
      @AdrianTwarog  3 ปีที่แล้ว +1

      :) thanks it’s always nice to hear stuff like this :)

  • @programadorfrontend8968
    @programadorfrontend8968 3 ปีที่แล้ว

    bootstrap is amazing. awesome video

  • @unknownuser5910
    @unknownuser5910 3 ปีที่แล้ว

    Nice explanation. Time saver.

  • @thankfully99
    @thankfully99 2 ปีที่แล้ว

    Thank you sir! Highly excellent

  • @guerrierekang5694
    @guerrierekang5694 2 ปีที่แล้ว

    Wow thank you very much, you know how to teach! thanks, man.

  • @muhammadinshal2742
    @muhammadinshal2742 10 หลายเดือนก่อน

    Bro, I wish that I could learn every concept of programming in 15 minutes with rich content like this......100/100.
    Very ungaging video..............................🙂
    Thank You!

  • @robertobaldizon8206
    @robertobaldizon8206 2 ปีที่แล้ว

    Awesome content. Thanks.

  • @magnobaglieri
    @magnobaglieri 3 ปีที่แล้ว +1

    Good introduction to React. Would be good if you make a tutorial about how to manage the routing too

  • @momoduoladapo4097
    @momoduoladapo4097 2 ปีที่แล้ว

    You have given men everything I need. I cant just go ahead to build while I continue studying the fundamentals of ReactJS. I have been using Bootstrap to build complex apps for a long time now. Thanks. Find a translator to tell you what I meant in my previous comment. More Wins Adrian. 🎈🎈🎈🎈🎆🎆🎇🎇🧨🧨✨✨🎉🎉🎊🎊🎄🎄🎄🎄

  • @peud390
    @peud390 ปีที่แล้ว

    Great content

  • @youssefbenouiran7262
    @youssefbenouiran7262 3 ปีที่แล้ว

    nice straight to the point gj

  • @leeyahav4754
    @leeyahav4754 ปีที่แล้ว

    Amazing video

  • @erobiamshinima3766
    @erobiamshinima3766 3 ปีที่แล้ว

    Aw, you are great tutor bros, thanks, man :)

  • @thevloglife105
    @thevloglife105 3 ปีที่แล้ว

    Lovely tutorial. I got it problem solved from you.

  • @user-cc8kb
    @user-cc8kb 2 ปีที่แล้ว

    Thank you a lot :)

  • @SLCODEGEN
    @SLCODEGEN 2 ปีที่แล้ว

    Thank U so much.

  • @MinhLe-nf7fo
    @MinhLe-nf7fo 2 ปีที่แล้ว

    Thank you so much

  • @ran_css
    @ran_css 8 หลายเดือนก่อน

    wooow really thank u

  • @timewilltale9214
    @timewilltale9214 11 หลายเดือนก่อน

    Bahahah the icecream truck going past at the end there made me think I was going insane, I was wondering why mr icecream man was driving around at like 7pm

  • @MdNaimurRahmanHera
    @MdNaimurRahmanHera ปีที่แล้ว

    Nice tutorial

  • @codetheworld6721
    @codetheworld6721 ปีที่แล้ว

    Nice Bro.. Keep Going

  • @shashwatgupta_
    @shashwatgupta_ 3 ปีที่แล้ว +2

    can we use multiple classes in classname ? and can we use breakpoints too like mb-md-5 ?

  • @sandupaegodage8163
    @sandupaegodage8163 3 ปีที่แล้ว

    good job nice introduction

  • @adri123161
    @adri123161 3 ปีที่แล้ว

    I love u thanks!

  • @evanlittle114
    @evanlittle114 3 ปีที่แล้ว

    Thank so you much! Now I finally understand how to add bootstrap to my next.js project. You're amazing. I'm embarrassed I tried for 3 or 4 hours to figure out how to add basic component library to my app. Will definitely be watching more of your tutorials!

  • @hacistein
    @hacistein 2 ปีที่แล้ว

    Thanx a lot ^^

  • @lostelogaming
    @lostelogaming 3 ปีที่แล้ว +1

    Nice video, It's very helpful, thanks!

  • @axelgrind
    @axelgrind 3 ปีที่แล้ว +1

    Helpful! Thanks :D

  • @HudsonDiasFotografia
    @HudsonDiasFotografia 3 ปีที่แล้ว +1

    Awesome video! Thank you!

  • @alexandrohdez3982
    @alexandrohdez3982 2 ปีที่แล้ว +1

    absolute... love your video 👏👏

  • @jowelrana179
    @jowelrana179 3 ปีที่แล้ว

    Thank you sir.

  • @vaishnavipudari7657
    @vaishnavipudari7657 8 หลายเดือนก่อน

    Thankyou❤

  • @krushnnabaviskar2170
    @krushnnabaviskar2170 2 ปีที่แล้ว +1

    Loved it

  • @abolfazldeldadeh8065
    @abolfazldeldadeh8065 2 ปีที่แล้ว

    Thank you

  • @emhaxim7697
    @emhaxim7697 2 ปีที่แล้ว

    amazing

  • @sharkman6434
    @sharkman6434 3 ปีที่แล้ว

    thank you friend, make more videos for react bootstrap please !!

  • @donbigosso
    @donbigosso 3 ปีที่แล้ว +1

    Dobra robota Adrian!

  • @jeetray11
    @jeetray11 2 หลายเดือนก่อน

    I have been looking for courses to learn react-bootstrap library all day today but didn't bother to come to YT. In 15 minutes you gave me a solid idea on what it can do and how to use it. Thank you! Where can I get/buy a comprehensive training material on this CSS library?

  • @payalraghuwanshi188
    @payalraghuwanshi188 2 ปีที่แล้ว

    Awesome

  • @itdropout
    @itdropout ปีที่แล้ว

    New Subscriber here!

  • @basiccodingwithadam8125
    @basiccodingwithadam8125 4 ปีที่แล้ว +1

    Very nice video!

  • @saiyedali561
    @saiyedali561 3 ปีที่แล้ว +1

    Great , thank u !

  • @kenlee2284
    @kenlee2284 4 ปีที่แล้ว +1

    So nice! thx

    • @AdrianTwarog
      @AdrianTwarog  4 ปีที่แล้ว

      빠른손김참치 no worries!

  • @leonardoveloso2876
    @leonardoveloso2876 3 ปีที่แล้ว

    Thanks a lot

  • @434946
    @434946 3 ปีที่แล้ว

    I'd be really happy if I had half of your speed at coding haha, great video btw!!

  • @hadramielbey8443
    @hadramielbey8443 3 ปีที่แล้ว

    شكرا جزيلا 💙💙

  • @vivekrk5946
    @vivekrk5946 3 ปีที่แล้ว +1

    Thank you so much ❤️❤️❤️❤️❤️❤️

  • @usmanmunir1559
    @usmanmunir1559 3 ปีที่แล้ว

    Cool 😎 as ever

  • @kenkioqqo
    @kenkioqqo 3 ปีที่แล้ว +1

    I really enjoyed this video, Adrian. I am learning Front-end Development at the moment...I've become very good at HTML and CSS, and am at an intermediate level in JS. You've just demystified this whole concept for me in a very simple and practical way. I now feel excited and more confident about using React and Bootstrap in my projects. Thanks a lot. Though I've just discovered your channel, I look forward to learning more from your videos.

  • @herisuqer1327
    @herisuqer1327 2 ปีที่แล้ว

    hey adrian, how to set yarn as default package manger when we use npx create react app. mine is always using npm, even though i have already installed yarn.