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
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 😊
I'm trying to put image up when I'm on half screen how do i do that
I am shocked by how cool bootstrap is… And this tutorial is so dope, I love you man.
Thank you. I learned a lot. I just starting studying boostrap and I understand it now.
Please how did you make the backgrounds of your images black? The images have white backgrounds.
Thanks for the absolutely precious course,all for free.Can you please tell me your theme i find it really pleasing to the eyes
Anyone have a problem styling the map? I had to use the default inline styles that Mapbox provided.
13:20 how did you do that like what is the shortcut for that?
What did you click to resuffle your written words in line? What is the shortcut for that?
Hey, where do u get the stock photos, can I know the site name, I can't catch what you said there… pretty please
Thank you very much for the tutorial, explanation is easy to follow, the example website is just perfect. Everything is explained clearly and straightforwardly.
good course did you made any other bootstrap project
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
Up arrow in my code is not visible, it only appears if i remove class `position-absolute`
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?
what is "flush"?
you did good THX sooooooooooooooooooooooooooooo much
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?
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 😀
Which code editor u r using here ?
what is your color theme on vscode?
Making a list of things to do after exam
how i can made (-) sign taller like ? if font — what is font name .
Sorry I don't understand how do I know what code does what style?
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>
I usually never comment on vidoes, but this video is just too amazing! Keep on the great work =)
Hey, will there be an updated bootstrap 5 course on udemy at any point in the near future? Thanks!!
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?
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
Thank you, sir! This really helps me..
How do I get the images you used in the website? Having trouble getting them from Github. Thanks!
What app for code writing are you using?
Something is missing in BS 5.1 like a decent select class with auto-complete and a datepicker.
I enjoyed this tutorial!
Thanks a lot!
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?
46:17
How you remember all this classes and attributes
Learning by doing – just fine! Thank you very much!!!