Beginner-friendly website project using Bootstrap 5

Hostinger:
https://www.hostinger.com/traversymedia
– Use the code TRAVERSYMEDIA for 10% off!

Code:
https://github.com/bradtraversy/bootstrap-bootcamp-website

Project Demo:
https://www.frontendbootcampdemo.com/

Latest Udemy Courses:
https://traversymedia.com

💖 Support The Channel!
http://www.patreon.com/traversymedia

Timestamps:
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

source

38 Comments

  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. 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

  3. 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?

  4. 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?

  5. 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 😀

  6. 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>
    </div>
    </div>
    </div>
    </section>

  7. 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?

  8. 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

  9. Hey Brad, great job as usual! THANKS SO MUCH!…
    Question… using your demo (and my code)… on my phone, the scrolling is smooth, but on my Mac, all 3 browsers JUMP to the div's… any ideas why?

Leave A Reply

Please enter your comment!
Please enter your name here