Let’s Talk About Twitter BootstrapBrenden ThorntonBlockedUnblockFollowFollowingMay 24Chances are if you’re reading this you might have yourself a shiny new application that needs styling.
Maybe it’s a project you’re building for your coding bootcamp or you’re working on a prototype that needs to get done quickly.
You’ve also probably heard the word Bootstrap thrown around here and there and are wondering what it is and how it could possibly help you.
Well Twitter Bootstrap or commonly referred to as Bootstrap is a HTML, CSS, JavaScript framework that makes styling your application quick and easy.
Especially if you’re trying to get this product out quickly, this framework can remove pretty much all the work of creating custom css.
Which honestly, is just wonderful.
Let’s get into more detail about what Bootstrap is and how it works.
A Little HistoryBootstrap is referred to as Twitter Bootstrap because it was developed by two employees Mark Otto and Jacob Thornton at Twitter.
It was originally called Twitter Blueprint before it was released as an open-source project on Github in August of 2011.
It was created to help avoid inconsistencies among developers within Twitter who were using different development tools.
This would allow internal teams at Twitter to build new projects with a set toolkit which would in turn speed up the production of these projects.
Why Should You Use It?Mobile-first, Responsive DesignsOne big advantage to using Bootstrap is that it allows you to create mobile-first, responsive websites quickly and easily.
This means you can create a website that is built to scale itself to the size of the viewport of the device a person is using.
As users continue to use their mobile devices to access the internet, we need our websites to prioritize mobile-first, responsive designs.
Time EfficiencyAnother core benefit of using Bootstrap is the cutdown on web design.
This tool has become an asset to a front-end developers toolkit because it greatly reduces the time it takes to style a website.
Essentially you no longer need to start from scratch.
Bootstrap has done the bulk of the work by creating reusable components that include customized css code which you can then plug into your website.
The really cool part is if the Bootstrap components don’t completely solve your styling needs, you can write custom css code that will go along with Bootstrap.
Open SourceThis may seem like a small benefit but having such a powerful tool be provided in this format is extremely beneficial.
Bootstrap is 100% free to use as an open source tool.
All you need to get started is a basic understanding of HTML and CSS.
The other important benefit of open source is the vast community that surrounds this tool.
If you ever run into issues with using Bootstrap there is a big community that is ready to help.
How To Use BootstrapInstallationBootstrap offers quite a few ways to get it up and running in your application.
I’m going to touch on a few of the ways I like to install Bootstrap but there are quite a few more ways to get it going.
BootstrapCDN: This installation allows for quick plug and play by using a CDN which uses a cached version of Bootstraps compiled CSS and JS.
Simply copy the code below and paste them into the main head tag of your website.
<link rel="stylesheet" href="https://stackpath.
bootstrapcdn.
com/bootstrap/4.
3.
1/css/bootstrap.
min.
css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><script src="https://stackpath.
bootstrapcdn.
com/bootstrap/4.
3.
1/js/bootstrap.
min.
js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>Also if you are using any components that require Bootstraps compiled JavaScript you will need to include a CDN version of JQuery and Popper.
js.
<script src="https://code.
jquery.
com/jquery-3.
3.
1.
slim.
min.
js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.
cloudflare.
com/ajax/libs/popper.
js/1.
14.
7/umd/popper.
min.
js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>Package Managers: Another popular way to load Bootstrap is using some popular package managers that load the compiled CSS and JS as dependencies for your project.
Here are some examples of how to get those running.
Ruby Gems: If using Bundler for you Ruby app you can add the following line to your Gemfile.
gem 'bootstrap', '~> 4.
3.
1'Yarn: If building a Node.
js app you can install Bootstrap with the Yarn package manager.
$ yarn add bootstrapThere are plenty more ways to get Bootstrap installed into your applications, regardless of your tech stack, and Bootstrap’s documentation can provide more details as to make that happen.
Check out this link to learn more about installation.
Are There Disadvantages?Nothing in life is perfect and this also goes for Bootstrap.
I wish that wasn’t the case but I’m going to give a couple disadvantages for using this powerful tool in your application.
Never Learning CSSBootstrap makes it really easy for new developers to implement the pre-made components without ever having to understand the css code written behind it.
It’s great to have reusable code that gets your site designed quickly, but it’s really helpful to have an understanding of how css works.
File SizeThe Bootstrap framework can be pretty hefty because the tool brings a lot of functionality.
The downside to the large size of this framework is it can increase load times for websites, which can lead to poor user experience.
However, there is a customize feature provided by Bootstrap that allows a developer to pick out the bits and pieces that you need without loading unused functionality.
ConclusionBootstrap is an amazing tool and when used properly it can make a huge impact on developing your website.
The amount of components provided by Bootstrap is amazing and it can help all developers, regardless of their level, create a mobile-first, responsive web design for their applications.
If you haven’t used Bootstrap and are contemplating whether to use it, I hope this article has helped you to see the countless benefits.
Happy Coding!BootstrapThe most popular HTML, CSS, and JS library in the world.
getbootstrap.
com.