Why I love Bootstrap
I am writing this article as a recent Grace Hopper Fullstack Academy grad! (Actually graduated two days ago)
The picture included is a paper plate award I earned on my last day. As you can most likely tell from the title and the plate I am a big fan of Bootstrap. Bootstrap, at its core, is a grid system (made up of rows and 12 columns).
Each column has a defined width (see image below for clarification). These widths depend on the size of the view width, meaning as the page’s width is confined to a smaller size the items, whether they be text or image, will adjust in size and width accordingly. This is also known as break points. And creates a truly responsive experience for the user, which always elevates a website.
Additionally, Bootstrap controls styling of certain HTML/React.js (depending on which type of Bootstrap you are implementing) features. These features include typeface, forms, and modals. However, if you do not wish to use the default Bootstrap styling, which is much better, I think, than the default styling, you can easily override them in your CSS.
I am writing this as someone who has used both HTML based Bootstrap and React.js Bootstrap. I love Bootstrap for the previously mentioned reasons and also because I find its documentation to be very straightforward!
Here is a link to the React.js Bootstrap documentation if you are interested: https://react-bootstrap.github.io/. Which, hopefully after all my ranting and raving you will be eager to try yourself! I don’t know if it is evident that I am a super fan.
This is all very evident from the documentation, but I’ll share anyway because you’ve made it this far in the article so why not learn more, right?!
First, when using with React.js, you have to npm install react-bootstrap bootstrap. Hopefully, you understand npm install, as this article will not delve into that topic further.
Next, add this to your html:
<link
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>Link preferably goes above your main stylesheet so your styles can override the built in Bootstrap ones if desired. I always mix up which to put above and below, so definitely experiment with this to your heart’s content. If it is not overriding, you can use !important in your CSS.
Then to implement Bootstrap make sure to import your desired features! Such as Col, Row, Form, or Nav. Oh almost forgot to mention: the Bootstrap navigation feature is one of my favorites! It is relatively straightforward (easy even) to create a hamburger menu. Those three horizontal lines that appear on responsive websites at smaller sizes or on mobile devices.
Thank you for reading this article! Perhaps I have converted you to a Bootstrap user?
