Bootstrap was developed by Twitter developers in 2011 to speed up the development and layout of front-end graphical elements. That same year the team released it as an open-source framework. Today, Bootstrap is one of the most used front end web development libraries in the world.
What is Bootstrap?
Bootstrap is a powerful front-end development library that includes pre-built HTML, CSS and JS components for building mobile-first responsive websites of all sizes and complexity. With Bootstrap, you get ready to use responsive themes and templates as a starting point for your web project.
Why use Bootstrap?
Web application development is all about consuming and publishing information. The consumption, in particular, should be as easily digestible as possible. That means your information should be accessible on any device. In a visually appealing and balanced way.
How to use Bootstrap
Bootstrap is very easy to use: Anybody with basic knowledge of HTML and CSS can start using Bootstrap.
It has responsive features:
- Bootstrap’s responsive CSS adjusts to devices of all sizes and resolutions.
- Browser compatibility: It is compatible with all modern browsers (Opera, Chrome, Firefox, Internet Explorer(Edge) and Safari).
- There are hundreds of excellently constructed free and monetized themes available online to give your work a head start. Having a base design to work from really accelerates UI development.
Importantly, the Bootstrap official site has great documentation to get you started.
You can download it and host it with your other application files on your web server or you can add a link to a Content Delivery Network (CDN) that will always serve you the latest version.
What do developers think?
While the popularity of Bootstrap may have fallen over the last few years, it is still widely used. We’ve asked one of our resident developers, Matt Rudge, to tell us about his views on Bootstrap.
Why I still love Bootstrap
Hidden somewhere in the darkest and, mercifully, untouched corners of the Internet Archive’s Wayback Machine lies the first-ever website I created. Actually, that’s not quite true. It’s the second version of the first website I ever created, because it was indexed in May 1996, and the first version went live in July 1994.
Then, of course, CSS arrived and made everything simultaneously easier and more difficult. Things could now be positioned with pixel accuracy, and the quality of web development improved rapidly. I do still favour writing CSS from scratch. However, it can feel like you’re playing a particularly tense game of Buckaroo where one false move can bring everything crashing down. One solution to endless CSS adjustments is to use a front-end framework, or library, where the heavy lifting has been done for you. Bootstrap is the one I always reach for.
Bootstrap started life as a Twitter project back in 2011. It was initially called “Blueprint”, a name I prefer! Mark Otto, the developer who initiated the project, said; “A super small group of developers and I got together to design and build a new internal tool and saw an opportunity to do something more. Through that process, we saw ourselves build something much more substantial than another internal tool. Months later, we ended up with an early version of Bootstrap as a way to document and share common design patterns and assets within the company.”
Consistency in appearance
In fact, Bootstrap became an internal style guide at Twitter. This is because generic Bootstrap projects have the same look and feel.
If you’ve read articles about Bootstrap before, then this consistency in appearance is also one of the things that is often viewed as a reason not to use it. One of my students even created a parody webpage to showcase everything wrong with generic Bootstrap designs.
I don’t think that’s an entirely fair characterisation. Here are five reasons why I still love using it, and why I think you should too:
- Super-fast development
The easy-to-understand, flexible grid system, as well as the vast library of plug-in components, means that you can create a functional, responsive website in a short space of time. It is easy to make elements appear or disappear, depending on the screen size. Bootstrap is built on the concept of mobile-first development, so your content will scale perfectly to a mobile device without you needing to do too much. You can then decide what components should be visible or how the content should adjust as the screen size changes. Right out of the box, you can get a project off the ground very quickly. This, of course, means that you have a generic-looking Bootstrap site, but that brings us on to the second reason why I like Bootstrap.
- It is easily customised
With a little CSS know-how, all visual elements in Bootstrap are customisable. This means that a generic-looking Bootstrap project doesn’t need to stay like that. You can re-design the buttons, modals, navigation bars, links and menus, and many larger organisations do this to personalise the user experience. The website for Forbes India (link: forbesindia.com) uses vanilla Bootstrap. Even the main Forbes website (link: forbes.com) uses a customised version of Bootstrap 3. So, with a little work, a Bootstrap project doesn’t need to look like a Bootstrap project, which segues nicely into my third reason:
- You don’t have to use all of it
Committing to using Bootstrap doesn’t mean that you need to use it all. If you don’t like Bootstrap’s default buttons, then design your own in CSS and keep Bootstrap around for the super-easy responsive grid. It’s straightforward to custom-design parts of your project and to sprinkle Bootstrap in where necessary.
- It has a massive library of interactive components
Collapsible mobile menus? Interactive carousel sliders? Styled, pop-up modals? Scroll-spy as you go down a single-page application? Popovers and spinners? They’re all included in Bootstrap. Now, some of it is – in my opinion – overused. I could rant about the carousel for longer than you’d like to continue reading; however used properly and judiciously, you can create beautifully styled, interactive components on your site with little-to-no coding. Most of them just require a simple class name to be added to a <div> element. All of these components are customisable too, so you can fit them into your site’s overall theme. And, finally, if you get stuck when customising these components:
- There is a considerable community actively developing for Bootstrap
There are thousands of templates and examples of how you can customise Bootstrap available. Take a look at examples on CodePen to see the creative ways in which Bootstrap can be customised and – with correct attribution, of course – try some in your own projects. With a little help from the community, you can bring your Bootstrap project to the next level.
In conclusion, Bootstrap has come a long way since its establishment as a style guide for internal Twitter projects. It is now a mature, powerful front-end library that allows you to focus on executing your vision. At the same time, it carries out the hard work of resizing your content to look good on different screen sizes underneath. Just because your site is based on Bootstrap, doesn’t mean that it has to look “Bootstrappy”. Yes, that is a word I just invented.
If Bootstrap had been available when I was developing my first website back in 1994, then, who knows? I might even have been happy to share the link.
Free Coding Challenge