Posted on 08/23/17 1:29 PM
If you are a techie or you’re keen learning web development, then at some point, you’ve heard of ‘Bootstrap’. Whether I’m right or wrong, but, this post is specially designed for all folks who want to get a quick dive into the flawless world of Twitter Bootstrap.
A brief unfolding…
Originally developed by Mark Otto and Jacob Thornton at Twitter, Bootstrap was released as an open source product in August 2011. It is a free front-end framework which gives you responsibility for creating clean and organized responsive designs.
➨ Bootstrap is free to download and use.
➨ It provides fast and easier development.
➨ It includes Html & Css based design templates.
➨ Most important, It facilitates responsive development.
Why to use…
Make use of Bootstrap for followng reasons:
For letting your website adapt to various screen devices
For adding consistency to design and code
For quickly & easily prototyping new designs
For ensuring cross-browser compatability
And, anybody having basic knowledge of HTML and CSS can use Bootstrap.
What does responsive means…
Something can be called responsive if it typically adjusts itself to look good on all screen devices. For more in-depths, check out our previous blog post – ‘Responsive Web Designing’.
From where you can get Bootstrap…
You can start using Boostrap in two ways –
Download it from getbootstrap.com
Include bootstrap from CDN
What does Boostrap package contains…
Grid systems, link styles and background
Global css settings, Html element style, advanced grid system
Reusable components such as dropdowns, navigations, pop-overs, alerts, etc.
Lot of custom Jquery plugins.
And, you can typically customize everything in bootstrap to get your own style.
First Bootstrap example…
<title>First Bootstrap example</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
<h1> First web page</h1>
There are vast number of things to study in Bootstrap. You can follow the links here:
Out of all, Grid is the most important Bootstrap feature that we’ll take into account here. So, what are grids actually?
The grid system of bootstrap adds up to 12 columns. You can use them individually or group together as one single unit. (to form wider column)
Bootstrap’s Grid System has four main classes:
xs for phones
sm for tablets
md for desktop
lg for large desktops
All these classes combine together to form much complex and flexible layouts. Let’s run down to understand the basic structure of Bootstrap grid system:
So, Thast’s all about the Grid System.
Now, you must have gone a quick look of what Bootstrap is all about. It is easy to understand, reliable to implement and fast to customize. You can extensively use it to build and maintain your websites – responsive ready, browser friendly and completely free of cost. Looking forward to meet you with my another blog post. Till then, sayonara. 🙂
Web 3.0: The Future of Decentralized and Interconnected Web
04/5/23 8:31 AM
Web Development in the Age of AI and Serverless Architecture
03/27/23 12:43 PM
Evolution of World Wide Web (1.0, 2.0, 3.0)
03/24/23 6:52 AM
Synergy in Action: The Power of Combining IoT and AI
03/16/23 9:25 AM
A Trip to the Hills
05/29/19 7:28 AM