Bootstrap 5 Crash Course | Website Build & Deploy

Bootstrap 5 Crash Course | Website Build & Deploy

Beginner-friendly website project using Bootstrap 5


– Use the code TRAVERSYMEDIA for 10% off!


Project Demo:

Latest Udemy Courses:

💖 Support The Channel!

0:00 – Intro
2:01 – Docs & Getting Started
4:40 – Including Bootstrap CDN
6:38 – Responsive Navbar
14:04 – Showcase With Flex Classes
24:25 – Newsletter With Input Group
31:03 – Boxes With Bootstrap Grid & Cards
33:22 – Bootstrap Icons
38:44 – Learn Sections
44:38 – FAQ With Accordion
54:50 – Instructors Grid Cards
1:01:11 – Contact Info & Map
1:07:18 – Footer
1:09:38 – Enrollment Modal
1:14:57 – Deployment To Hostinger

#Bootstrap #Crash #Website #Build #amp #Deploy

learn bootstrap

bootstrap,bootstrap 5,html,css,css frameworks,bootstrap crash course,bootstrap 5 crash course

50 Replies to “Bootstrap 5 Crash Course | Website Build & Deploy”

  1. One small thing I want to mention is around 33:20 when we add the icons, you will see a div with the class of “card-body” just pop in there. That got cut out for some reason, so just be sure to add that. Thanks for watching guys 😊

  2. How to change the colour theme in the Vs code?? The one used in this video looks way better than the default one. How to change it?

  3. I know Bootstrap makes life simpler, but it still seems like cheating to me. Still, I can't argue with the results. Very nice video.

  4. Hello Brad, do you think I dive into bootstrap after learning CSS or JS..

    Would love your opinion as well as others please 🤲

  5. Excellent tutorial! It was well-paced and incredibly practical with a great use-case for Bootstrap. I was curious, however, is there a way to add our API key to use the Map Block while maintaining security on a public git repository? (Wanting my repository to be public so potential employers can see my work.)

  6. 47:36 thanks for turning the documentation into real coding. Just one thing, I knew it is quite common to add a ghost element on top of body to push everything down. Another way of doing this is using css position sticky. In bootstrap 5 it is wrapped up as fixed-top class.

  7. This was really good. As someone who started HTML and CSS and JavaScript yesterday I could have used a bit more explaining what some elements / classes were doing but considering how novice I am and how much I understood I think this is a great video

  8. Thank you very much for the tutorial, explanation is easy to follow, the example website is just perfect. Everything is explained clearly and straightforwardly.

  9. So once you set that up to use git to commit and deploy does it automatically deploy updates or do you have to tell it to update?
    Sorry if it's a dumb question just trying to wrap my head around it,I love the idea of doing this over using ftp

  10. Hello, I am having some problems following the start part about the resposive navbar . I followed the tutorial, but when i digit ms-auto the ul contents they still remain on the left side of the broswer not on the same line like the tutorial. I can't figure out what could be the problem. I only can see the button created when i reduce the window to medium or small. Are there someone who had my same problem?

  11. Hi I am learning front end web development, and i have learned HTML and CSS, now trying to learn bootstrap before learning javascript, i can't actually see the point of bootstrap, in this tutorial you designed your web site in such a way that you can show bootstrap to us, you developed your website only using HTML and every thing in your website is like a pre-defined thing it is very basic, but real life scenario will not be like that right? we will have lot of different colours and different types of shapes for buttons ( I mean sometimes we will have more border radius and box shadows and other things) and some complicated layouts unlike the layouts showed in this website, and you did not even change the font-family, i want to know how we can apply bootstrap for a real life scenario website, can you make video on that?

  12. Been following this guide step by step but using my own content for the website.

    I have a few questions so far

    1. I have inserted a logo into the brand instead of text, when its on mobile i want it to be centered but then on all other screen sizes i want it to be on the left like default. How do i do this?
    2. I want to add a search bar above the navbar on the left and a login/basket on the right how would I do this?

    Cheers for the great video. Ive had to pause and rewind it but its helping me loads 😀

  13. Newsletter with form-floating:

    <section class="bg-secondary text-light p-5">
    <div class="container">
    <div class="d-md-flex justify-content-between align-content-md-between">
    <h3 class="mb-3 mb-md-0 pt-2">Sign Up For Our Newsletter</h3>
    <div class="form-floating d-md-flex news-input input-group-lg">
    <input type="email" class="form-control" id="email" placeholder="Enter Email">
    <label class="text-secondary" for="email">Email address</label>
    <button class="btn btn-dark btn-lg" type="button">Submit</button>

  14. When I go to VS Code terminal just like the video says and write 'git init' it gives error: "git : The term 'git' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again."
    What do I do how do I actually resolve this issue? Do I have to install any extension?

  15. Hello Brad. Thank you for the video. Please I need your assistance on a particular area in this video. Under the 'Our Instructors area', you made mention of using a specific A.P.I to insert pictures into the card title. I have my pictures in the image folder and I have being trying to use the A.P.I you used in the video for inserting the pictures but it's not working on mine. What do you think is the problem? Is there another specific A.P.I I can use for this? I would appreciate it if I am giving a quick reply. Thanks

Leave a Reply