What is Twitter Bootstrap?

Bootstrap is a smooth, intuitive, and powerful mobile first front-end framework for faster and easier web development. Bootstrap uses HTML, CSS and Javascript.

Why use Bootstrap?

  • first approach of mobile: Since Bootstrap 3 the framework consists of Mobile first styles throughout the entire library instead of in separate files.

  • Browser Support: Bootstrap is supported by all popular browsers.

  • Easy to get started: Only with the knowledge of HTML and CSS anyone can get started with Bootstrap. The Bootstrap official site also has a good documentation.

  • Responsive design: It's responsive CSS adjusts to Desktops, Mobiles and Tablets.

What Bootstrap Package Includes?

  • Scaffolding: It provides a basic structure with Grid System, background ,link styles.

  • CSS: Bootstrap comes with feature of fundamental HTML elements styled, global CSS settings and enhanced with extensible classes and an advanced grid system.

  • Components: It contains over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more.

  • JavaScript Plugins: Bootstrap contains over a dozen custom jQuery plugins. One can easily include them all or one by one.

  • Customize: One can customize Bootstrap's components, jQuery plugins and LESS variables to get your very own version.

What is Bootstrap Grid System

It includes a responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. Bootstrap includes predefined classes for easy layout options as well as powerful mixings for generating more semantic layouts.

Bootstrap 3 is mobile first in the sense that the code for Bootstrap now starts by targeting smaller screens like mobile devices, tablets, and then “expands” components and grids for larger screens such as desktops and laptops.

Working of Bootstrap Grid System

Grid systems are used for creating page layouts through a series of rows and columns that house your content. How the Bootstrap grid system works:-

  • Rows must be placed within a .container class for proper alignment and padding.

  • Make the use rows to create horizontal groups of columns.

  • Content should be placed within columns and only columns may be immediate children of rows.

  • Predefined grid classes like .row and.col-xs-4 are available for quickly making grid layouts. LESS mix-ins can also be used for more semantic layouts.

  • Columns create gutters via padding. That padding is offset in rows for the first and last column via negative margin on .rows.

  • Grid columns are created by specifying the number of twelve available columns you wish to span. For eg, three equal columns would use three .col-xs-4.

Share this post

We are always here to help. If you have a query Send Now