It’s not just the content on the web, or the headcount of people online that is growing - the number of ways we can actually get online is also on the rise. Nowadays, we can find ourselves interacting with websites on our laptops, TVs, phones, tablets, and even on our watches.
Building web applications that work properly and look great on all these different devices is one of the most common challenges that web developers and designers currently face. With more and more web traffic coming from mobile, it’s not enough to say, “At least it works on desktop.”
A variety of tools have been developed that make screensize responsiveness easier, and today we’re going to look at Bootstrap - arguably one of the best web development tools there is!
So what is Bootstrap? Will it really make your life easier? Read on to find out!
Bootstrap was originally created back in 2010 by Mark Otto and Jacob Thornton, who at that time worked at Twitter as a designer and web developer. It was originally developed as a style guide for Twitter’s internal tools, in an effort to encourage consistency.
After being used by other developers and designers at the first Twitter Hack Day, it was eventually released as an open source project in August 2011. It is currently hosted on GitHub, and it can be downloaded easily and for free from getbootstrap.com. It is maintained by its 7 core team members and a community of contributors.
But what exactly is Bootstrap? Bootstrap defines itself as
“the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.”
There are a lot of terms here already, so let’s break them down:
HTML, CSS and JS framework
Bootstrap is a collection of reusable pieces of code written in those languages, which gives you a good starting point for creating websites. It makes it easier and faster to develop on the web. Bootstrap also excels at making your websites responsive.
Responsive website design is the approach to web design focused on adapting the content and layout of web pages depending on the size of the screen used to view them. Responsive frameworks, like Bootstrap, use a variety of techniques, such as grid systems and flexible images (more on these below), to ensure that a user’s experience with a website is not diminished, whether it is viewed on a 27 inch computer screen or a 5.5 inch phone.
Advantages to using Bootstrap
I already mentioned two main selling points already:
1) Bootstrap makes it easier to create websites that work great on various screen sizes.
2) It’s completely free!
But, it definitely doesn’t end there. Here are some other great things about Bootstrap:
- Bootstrap’s grid
The grid system used by Bootstrap lays out your content in up to 12 columns as the device’s screen increases or decreases. Designers and developers can lay out their content in any combination of these columns for various screen sizes. For example, you could have your content appear in three equal columns alongside one another when viewed on a large screen and as your screen size decreases, Bootstrap’s predefined rules would make the columns start to appear one after the other, thus allowing content to be displayed in a readable manner, without you having to worry about defining such rules in your CSS code. This grid system allows for very complex layout designs, all the while remaining responsive.
- Bootstrap responsive images
Bootstrap also includes code that allows images to be automatically resized when screen size changes, by simply adding the .img-responsive class to your images. The predefined CSS rules take care of the rest. It can even change the shape of your images automatically by adding another class to them, like img-circle and img-rounded.
- Bootstrap components
Bootstrap also has a multitude of components, or little pieces of code, that serve a specific function and that can easily be added to your web page. Ranging from navigation bars, to dropdowns, to progress bars and thumbnails, Bootstrap’s components allow you to easily incorporate great looking design elements into your webpage, all of which work great no matter what screen size you are viewing them on. For a more complete list, check out their component documentation.
Bootstrap also allows developers to augment their component’s functionality with over a dozen custom JQuery plugins. This allows designers and developers to easily create modal popups, transitions, image carousels, and one of my personal favorites, a plugin known as scrollspy, which automatically updates your navigation bar as you scroll through your page.
- Great documentation
Bootstrap’s documentation is some of the best I have come across so far. All of the pieces of code offered by the framework are described and explained on their website. Explanations also include code samples of a basic implementation. This makes Bootstrap very beginner friendly, seeing as one can easily choose what they want to add to their website, copy and paste the code into their page and simply tweak from there.
- The ability to customize your Bootstrap installation
One of the main critiques of frameworks such as Bootstrap is that they are often very large and can slow down your application when first loaded. For example, the current version of Bootstrap’s CSS file is 119 KB, which is very large for a CSS file.
However, Bootstrap allows you to customize which functionality you want to include in your download. By simply going to their customize and download page, you can easily check off the features you won’t need for your application, allowing you to have a more lightweight file.
* - Bootstrap’s community*
As with many big open source projects, Bootstrap has a large community of designers and developers behind it. Being hosted on GitHub makes it easy for developers to modify and contribute to Bootstrap’s codebase. It also makes it easy for people to collaborate, help each other out and interact around a product they know and love.
Bootstrap has an active Twitter page, they maintain a Bootstrap blog, and_ _ they even have a dedicated Slack room. There are also a large number of developers willing to help with technical problems on Stack Overflow, where all questions can be found tagged under the bootstrap-4 tag.
- Bootstrap based templates
As the popularity of Bootstrap grew, people started creating templates based on Bootstrap in order to accelerate the web development process even more. A great number of websites are dedicated to sharing and buying custom templates based on Bootstrap.
Here are just a few:
By now you’re probably thinking that Bootstrap sounds like a no-brainer! Unfortunately, like almost everything in life, there are downsides too. Let’s quickly have a look over some disadvantages before we round up.
Here are the common complaints you might hear about Bootstrap:
- Some Bootstrap syntax can be confusing
When you are not familiar with Bootstrap, some of its syntax can be confusing. For example, when using the grid system, to make a column take up a third of the screen, you have to add the .col-md-4 class to it.
Now, the 4 might lead you to believe that it would take up a quarter of the screen and not a third. Though not very intuitive, this syntax makes sense when you know that Bootstrap uses a 12 column system (4 is a third of 12).
- Large file sizes
As I mentioned earlier, Bootstrap’s files are quite large, given the amount of functionality offered by the framework. This can cause slow load times for websites that incorporate Bootstrap, especially on slower cellular networks.
This problem can be difficult to identify and solve, especially for beginners. However, one way to limit this problem is to use the customize tool on Bootstrap’s website so that you don’t have tons of lines of code for functions you will never use.
You can always pick out the bits you need, and leave the rest. (Of course, this task gets easier the more you learn about coding!)
- Actually learning the code
Finally, there is a risk that by using Bootstrap, you will simply recycle existing code without understanding it. However, if you spend time understanding it and tweaking it, you can use it to accelerate your learning instead.
As you can see, Bootstrap is a very powerful tool that allows a developer to get up and running quickly. It makes it easy integrate many great features that enrich a user’s interaction with the web, without having to code them from scratch.
Want to start coding? With our FREE 7-day Web Development Short Course, you will have your first website up and running by the end of the week.
If you’re thinking about a career as a web developer, check out our mentored Web Development Course. This 6 month course takes you from beginner to junior web developer with full career guidance along the way.