Home »
Web programming »
Bootstrap
Bootstrap - framework for responsive web design
Bootstrap - an introduction: In this article, we will learn about Bootstrap, its features, revisions, history etc.
Submitted by Bharti Parmar, on July 30, 2018
Bootstrap
Bootstrap - a framework for responsive web design: Web development is on hype and boom these days. And, a web developer has sought out everywhere in the IT industry. Each firm, every company needs a web portal/Website to present their interface to customers. HTML5, CSS3, Javascript are commonly used front-end tools. Then, why Bootstrap? It is not an alien tool. It is just a CSS framework designed to help developers create responsive designs. Another similar framework is W3.css. It is also a CSS framework developed by W3Schools. But, Bootstrap is easy to implement, plus it has proper documentation provided on its official website. So, let’s get ready to dive into this amazing tutorial series. Stay connected to read more interesting articles and “learn by doing”. Feel Free to ask your doubts in the comment section!
Introduction to Bootstrap
Bootstrap is a front-end framework for developing responsive and mobile friendly websites. It contains various inbuilt CSS classes. By using this, we can build fascinating web design. It contains a various pre-defined function that can be used to generate very useful effects.
How to use it?
It can come handy in use by two ways:
- By using local file - You can download bootstrap from here: https://getbootstrap.com/
- By using CDN (content delivery network) - Include/download and host bootstrap CDN.
In this article, we are going to introduce you to bootstrap, its features, and its version history. We will cover its environment setup in next article: How to set up Bootstrap environment?.
We often used HTML to design static WebPages and CSS to style it. CSS requires lots of efforts and code to make it stylish, but it looks crappy in the mobile view. To resolve all these problems, Bootstrap was introduced. It allows web pages to fit the device screen accordingly with the same design and less code. Bootstrap was first developed by “Mark Otto” and “Jacob Thornton” at Twitter. After that, it was released in August 2011 at open source on GitHub. It uses HTML, CSS, and JavaScript for its components. It allows the content of the webpage to adjust dynamically according to the device used such as mobile, desktop or tablet. Most companies like Twitter, GitHub, Medium, and others use bootstrap for front-end design.
Here, is an example showing it. Well, this is a more simple illustration image for naïve beginners. We’ll see more fun and advanced front-ends throughout this article series.
Desktop view:
Mobile view:
Features
- It is faster and easier.
- It is open source.
- It has pre-defined classes and components which are easy to use and customize.
- It is mobile friendly.
- It supports almost every web browsers including Chrome, Firefox, Opera, Safari etc.
- Anybody with prior knowledge of HTML and CSS can easily use it.
Version History
- Bootstrap 2 was released On January 31, 2012, which added a twelve-column responsive grid layout system.
- On August 19, 2013, Bootstrap 3 was released, focusing on flat design, and a mobile friendly approach.
- On October 29, 2014, Bootstrap 4 was announced.
- The first alpha version of Bootstrap 4 was released on August 19, 2015 and first beta version was released on 10 August 2017.
- The stable version of Bootstrap 4 was released on January 18, 2018 with enhanced print styles, border utilities and new responsive classes were added.
- Bootstrap 4 also offers few official themes to get started with readymade templates. But, you will need to pay a bit for that.
Community
Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.
Conclusion:
Thus far, we have known about a very useful and interesting front-end designing framework, Bootstrap. We will look into its setup, and implement it to create responsively and in demand websites in upcoming articles. If you are really interested to know more about Bootstrap by now; visit its official website or GitHub repository. Links are provided in this article itself. Don’t forget to visit us back for interesting, and intuitive articles. Let’s have fun and learn together. See you in the next article! Happy Learning!