What is Twitter Bootstrap?Twitter Bootstrap is a Sleek, intuitive, and powerfulfront-end framework for faster and easier webdevelopment. Twitter Bootstrap is a toolkit todevelop web apps and sites fast. It includes basicCSS and HTML for creating Grids, Layouts,Typography, Tables, Forms, Navigation, Alerts,Popovers etc.
Origin• Developed by Mark Otto and Jacob Thornton at Twitter• In August, 2011 Twitter released Bootstrap as open- source• In February 2012, it became the most popular GitHub development project.
Grid SystemThe default Bootstrap grid system utilizes 12columns, making for a 940px wide container withoutresponsive features enabled. With the responsive CSSfile added, the grid adapts to be 724px and 1170pxwide depending on your viewport. Below 767pxviewports, the columns become fluid and stackvertically.
Fluid Grid SystemThe fluid grid system uses percents instead of pixelsfor column widths. It has the same responsivecapabilities as our fixed grid system, ensuring properproportions for key screen resolutions and devices.
Layouts• Fixed Layout Provides a common fixed-width (and optionally responsive) layout with only <div class="container">required.• Fluid Layout Create a fluid, two-column page with <div class="container- fluid">—great for applications and docs.
Responsive DesignResponsive Web Design is an idea of providing theuser with best viewing experience of a website acrossdevices of various sizes. For responsive web deign towork, you need to create a CSS which comprises ofstyles suitable for various devices sizes, or better to sayfor various device size ranges. Once the page is aboutto load on a specific device, using various font end webdevelopment techniques like Media Queries, the sizeof the viewport of the device is detected, then thestyles specific to the device is loaded.
Supported DevicesBootstrap supports a handful of media queries in a single file tohelp make your projects more appropriate on different devicesand screen resolutions.Label Layout width Column width Gutter widthLarge display 1200px and up 70px 30pxDefault 980px and up 60px 20pxPortrait tablets 768px and above 42px 20pxPhones to 767px and below Fluid columns, no fixed widthstabletsPhones 480px and Fluid columns, no fixed widths below
ComponentsDozens of reusable components built to providenavigation, alerts, popovers, and more. • Dropdowns • Labels and Badges • Button Groups • Typography • Button dropdowns • Thumbnails • Navs • Alerts • Navbars • Progress Bars • Breadcrumbs • Media Objects • Pagination • Miscellaneous
Reasons to Use Bootstrap• Integration Integration is simple, fast and easy to accomplish and once done you can play with your design to your heart’s content.• Responsiveness Bootstrap adapts to the change in platforms with super speed and efficiency.• Future Compatibility Bootstrap Comes equipped with many elements that are being considered the future of design itself. For example HTML5 and CSS3.• The docs Talk Bootstrap gives you a head start because you don’t have to play with everything to learn and instead can find information on just about anything through the documentation.