Pull my Project up by Bootstraps
Coding your own website is a daunting activity. There are countless things to get right to make sure it works. You have to get a database, forms, authentication, cookies, sessions, etc etc. The list is endless. But after you get a website that works perfectly, you realize, it doesn’t look so hot. Even adding basic styling to your website can be a massive headache. Getting the perfect alignment, borders, colors, or anything else can take hours. Sometimes just having a library of different styled buttons, forms, and navigation menus could save you a massive headache. That is where Bootstrap comes in!
Bootstrap is a free open source CSS framework that was developed at twitter. It gives developers a library of different components that they can drop into their applications quickly and easily. Bootstrap focuses on responsive components so that they will work great on mobile or desktop applications and keep your style consistent. Bootstrap allows you to simply add a class name to an element in your html, and it will use Bootstrap’s stylesheets to style that element. Or you can even grab whole components that are already styled and drop them in your project. Let’s look at some examples so that you can speed up your front end development.
For the sake of the example, we will be using a React front end to add some Bootstrap components, but Bootstrap can in plenty of different applications. For this demonstration I will specifically be using reactstrap.
So let’s dive into an example, I am starting a new application, and I first want to focus on the navbar, I use a <ul> filled with links to the appropriate pages and I add some basic styling. It gets the job done, but it’s not responsive, it’s time consuming to get the styling right, and it lacks any pop!
To speed this whole process up and make our design process easier, lets implement Bootstrap. First step is to install bootstrap in your application, run the following in your console while in your project directory.
npm install --save bootstrap
npm install --save reactstrap react react-domThen in index.js add the following line of code
import 'bootstrap/dist/css/bootstrap.min.css';I can find different components at https://reactstrap.github.io/. By navigating to the navbar tab and looking through the documentation, I can import the appropriate components and create this.
This navbar was made quickly and easily, and it is also highly customizable and adaptive. Much of the code above was taken straight from the documentation provided by reactstrap. I didn’t have to look up any styling or fumble with other issues. It’s also very easy to mess with some styling. For example if I changed the theme to light, it would change the background color of the navbar and the color of the text at once, so there are less changes I have to make.
This navbar is just a simple example and there are other features that can easily save you much more time, like adding search bars, hamburger dropdowns, forms, alerts, or dozens of other commonly used components.
To get the feel for how powerful and time saving bootstrap is, I encourage you to use it yourself on your next project!
