Styling a website can be tedious in the first days of becoming a programmer. Maybe you just want to focus on the functionality of your website but still have a presentable website. You can do this with Bootstrap. A popular HTML, CSS, and JavaScript framework that can give us a responsive website without needing to write much code. In this blog I will show you how to plug in a navigation bar, form, and buttons to quickly make your website look appealing with Bootstrap.
Installing Bootstrap
There are two ways you can install Bootstrap. You can download the file and link to it locally in the link tag, otherwise link to a CDN that is provided on the Bootstrap website https://getbootstrap.com/. Also, if you want the drop down bars to work or any kind of functionality that comes with it. You must download jQuery and the JavaScript file that's provided on Bootstrap. I will only be using the css file in this blog.
A Simple Nav Bar
In Bootstrap you chose your styling by the name of the class. Since code is already pre defined, all you have to do is reference the class of a particular style. This format was grabbed from the components section on Bootstrap. You can adjust the default of that class. You would just have to go into the css file and make the changes you want whether it be a color, font size, etc. Heads up! It will be tons of classes already defined so I would use the find bar on your code editor to target the class quickly and make your tweaks. There are many components you can add to your navbar. Notice the anchor tag with a class of "navbar-brand". This allows the user to click the brand and redirect them to the link in your href attribute. You can also add drown down menus or add more links in your nav bar.Refer to the nav bar section under components to explore your options https://getbootstrap.com/docs/4.5/components/navbar/.
Adding A Jumbo Tron Because Why Not?
This jumbo tron was quickly created within seconds. Although the html structure looks simple to make, it is the "jumbotron" class that has properties to make it presentable. Note that there is a div with a class of "container" to center this jumbotron in the middle of the page. Without this class, it would take up the entire width of the screen. Bootstrap provides a grid system to position your components but you can use this class for now to center your components, add spacing, and padding around your elements.To find more formats refer to components section.
https://getbootstrap.com/docs/4.5/components/jumbotron/.
Conclusion
Bootstrap is used by many companies. Learning to use this framework will only benefit you and make your website look more appealing. Why work harder when you can work smarter? You can focus on the functionality of your website or app more. This is an excellent tool especially if you want to throw some css into your app quickly without devoting too much time to styling. Thank you for reading!
Top comments (1)
Strong disagree on this one. We find that learning bootstrap mostly destroys any chance of really learning CSS properly for your whole career.
This seems about right though / especially if it's a dashboard MVP.