Styling with Bootstrap
A developer will often have an awesome application idea, with many features in mind. To make this application a reality, the developer must also have in mind many different styling and user interface ideas, which may come as a struggle for some. This is where CSS frameworks can greatly help that developer.
What exactly is a CSS framework? According to Wikipedia, “A CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language”. In a nutshell, a css framework is just a library built on top of CSS that usually makes for easier styling due to reusable, customizable components. There exists many a framework, such as Semantic, Bulma, and Bootstrap, just to name a few. The one I will be discussing in this article is Bootstrap, which is also one I have used on multiple projects, and is my personal favorite.
Bootstrap is a framework first created by two developers at Twitter, Mark Otto and Jacob Thornton. It came about as a tool to encourage and allow consistency across your web application. For instance, it is a best practice to style things such as your buttons, forms, and navbars consistently throughout your application. This consistency lends to a smoother and more streamlined user experience for your application.
I’ve mentioned the consistency achieved with such items as buttons, forms, and navbars, but Bootstrap doesn’t stop there. There exists stylings for alerts, spinners, tables, modals, and many more. It is really an all in one framework to give your application professional grade styling. I will walk through how to use Bootstrap with a React.js application as an example. (Note, Bootstrap is not limited to React apps, it can be used across many languages)
To get started, add Bootstrap to your React application by installing the npm package.
npm install react-bootstrap --saveInstalling this React specific Bootstrap package will give access to all of the components in the React-Bootstrap library. From there, all you have to do in order to use these components is to import them into whichever file you’d like to use them. To use a button for instance, you would include this at the top of your file:
import React from 'react';
import {Button} from 'react-bootstrap';Doing so, you will now have access to Bootstrap styled buttons. To implement them, you would just wrap your element in the <Button> tag.
<Button variant="success" onClick=someFunction()>This is a button </Button>The elements can be customized with properties such as this one, “variant”, which, when changed to one of Bootstraps options, will change the styling of the button. Things such as size, color, and outline can all be customized with Bootstraps built in functionality. Inline styling can also be applied to these pre-built components.
There are many different ways to style your application with Bootstrap, and I hope this small dive into its features gives you an idea of the power of the framework. I encourage you to check out all of the different options available to use when implementing Bootstrap. The React bootstrap package and its information can be found at https://react-bootstrap.github.io/. The full application of Bootstrap can be explored at https://getbootstrap.com/. Thanks for reading, happy coding!
